From 7d1b86cae8c38b1b23a98dc6b3ae582b224abbbe Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Fri, 16 Jun 2023 22:18:50 +0200
Subject: [PATCH] [TASK] add 'fancy' login

---
 rot_app/src/app.css               |  8 +++++
 rot_app/src/routes/+layout.svelte |  2 +-
 rot_app/src/routes/+page.svelte   | 50 +++++++++++++++++++++----------
 3 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/rot_app/src/app.css b/rot_app/src/app.css
index fea01ad..277ef83 100644
--- a/rot_app/src/app.css
+++ b/rot_app/src/app.css
@@ -2,6 +2,14 @@
 @tailwind components;
 @tailwind utilities;
 
+h1 {
+  @apply text-center text-3xl uppercase tracking-wide font-bold text-primary-900;
+}
+
+.input {
+  @apply relative block w-full border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6;
+}
+
 .btn {
   @apply inline-block rounded-md px-3 py-2 text-sm font-semibold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer text-center;
 
diff --git a/rot_app/src/routes/+layout.svelte b/rot_app/src/routes/+layout.svelte
index 8278aff..0dc2352 100644
--- a/rot_app/src/routes/+layout.svelte
+++ b/rot_app/src/routes/+layout.svelte
@@ -18,7 +18,7 @@
     <Header />
   {/if}
 
-	<main class="flex min-h-screen {isLoggedIn ? 'items-center' : 'items-start'} justify-center px-4 py-12 sm:px-6 lg:px-8">
+	<main class="flex min-h-screen {isLoggedIn ? 'items-start' : 'items-center'} justify-center px-4 py-12 sm:px-6 lg:px-8">
 		<slot />
 	</main>
 
diff --git a/rot_app/src/routes/+page.svelte b/rot_app/src/routes/+page.svelte
index 5aba0ff..1477ed0 100644
--- a/rot_app/src/routes/+page.svelte
+++ b/rot_app/src/routes/+page.svelte
@@ -23,25 +23,45 @@
 	<title>Ruderassistent - ASKÖ Ruderverein Donau Linz</title>
 </svelte:head>
 
-<section>
-	<h1>
-		<span class="welcome">
-			<picture>
-				<source srcset={welcome} type="image/webp" />
-				<img src={welcome_fallback} alt="Welcome" />
-			</picture>
-		</span>
-	</h1>
-
   {#if isLoggedIn}
     <p>Here comes the list</p>
     <button on:click={logout} class="btn btn-primary">
       Jetzt ausloggen
     </button>
   {:else}
-    <p>Login</p>
-    <button on:click={login} class="btn btn-primary">
-      Jetzt einloggen
-    </button>
+  <div class="w-full max-w-md space-y-8">
+    <div>
+      <img class="mx-auto h-16 w-auto" src="https://rudernlinz.at/wp-content/uploads/2021/02/cropped-logo.png" alt="Logo Ruderassistent">
+      <h1 class="mt-6 h1">Ruderassistent</h1>
+    </div>
+
+    <form class="mt-8 space-y-6" method="post" action="/auth">
+      <input type="hidden" name="remember" value="true">
+      <div class="-space-y-px rounded-md shadow-sm">
+        <div>
+          <div>
+            <label for="name" class=" sr-only ">Name</label>
+            <input id="name" name="name" type="input" value="" class="input rounded-t-md" placeholder="Name">
+          </div>
+        </div>
+        <div>   
+          <div>
+            <label for="password" class=" sr-only ">Passwort</label>
+            <input id="password" name="password" type="password" value="" class="input rounded-b-md" placeholder="Passwort">
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <button on:click={login} type="submit" class="group relative flex w-full justify-center btn btn-primary">
+          <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+            <svg class="h-5 w-5 text-primary-300 group-hover:text-primary-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
+            </svg>            
+          </span>
+          Einloggen
+        </button>
+      </div>
+    </form>
+  </div>
   {/if}
-</section>