From f241259f78efaae5f2c9df364c9ce562bb46148b Mon Sep 17 00:00:00 2001
From: axel <contact@axel.moe>
Date: Fri, 18 Apr 2025 13:22:48 +0200
Subject: [PATCH] feat: styled login form UI - wip for #4

---
 src/routes/login/+page.svelte | 53 ++++++++++++++++++++++++++---------
 1 file changed, 39 insertions(+), 14 deletions(-)

diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index d43d286..14847cb 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -1,21 +1,46 @@
 <script lang="ts">
+  import InputText from '$lib/v2/forms/InputText.svelte';
+  import { Button } from 'bits-ui';
+  import IconLogin2 from '~icons/tabler/login2';
   import type { PageProps } from './$types';
 
   let { form }: PageProps = $props();
 </script>
 
-<form method="POST">
-  <label>
-    Username
-    <input name="username" type="text" />
-  </label>
-  <label>
-    Password
-    <input name="password" type="password" />
-  </label>
-  <button>Log in</button>
-</form>
+<svelte:head>
+  <title>WOL Panel - Sign In</title>
+</svelte:head>
 
-{#if form?.error}
-  <p>Could not login: {form.error}</p>
-{/if}
+<div class="flex items-center justify-center w-svw h-svh bg-neutral-900">
+  <div
+    class="flex flex-col m-4 w-full max-w-120 bg-neutral-950 p-8 sm:p-12 sm:px
+      rounded-2xl border border-neutral-700 shadow-xl"
+  >
+    <form method="POST">
+      <InputText
+        name="username"
+        label="Username"
+        class="w-full !bg-black"
+        placeholder="Enter your username..."
+        required
+      />
+      <InputText
+        name="password"
+        label="Password"
+        type="password"
+        class="w-full !bg-black"
+        placeholder="Enter your password..."
+        required
+        description="Contact an administrator if you have forgotten your password."
+      />
+      <Button.Root
+        class="w-full flex items-center justify-center gap-2 bg-neutral-100 text-neutral-950 rounded-full p-2
+          border border-white cursor-pointer transition-all ease-in-out duration-300
+          hover:scale-95 hover:bg-neutral-400 font-semibold"
+      >
+        Sign in
+        <IconLogin2 />
+      </Button.Root>
+    </form>
+  </div>
+</div>