From 188b37b2322e4762d06d55eec9ff46f23ca27c5e Mon Sep 17 00:00:00 2001
From: Eclypsed <nicholas.tamassia@gmail.com>
Date: Mon, 22 Jan 2024 12:47:22 -0500
Subject: [PATCH] Started on login migration

---
 .prettierrc                      |  2 +-
 src/routes/+layout.svelte        |  7 ++--
 src/routes/login/+page.server.ts |  0
 src/routes/login/+page.svelte    | 62 ++++++++++++++++++++++++++++++++
 4 files changed, 67 insertions(+), 4 deletions(-)
 create mode 100644 src/routes/login/+page.server.ts
 create mode 100644 src/routes/login/+page.svelte

diff --git a/.prettierrc b/.prettierrc
index 30fcf34..af6b768 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,7 +2,7 @@
     "tabWidth": 4,
     "singleQuote": true,
     "semi": false,
-    "printWidth": 200,
+    "printWidth": 220,
     "bracketSpacing": true,
     "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
     "overrides": [
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 190d2c5..9e56cb7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,8 +5,8 @@
     import { newestAlert, backgroundImage, pageWidth } from '$lib/stores'
     import { fade } from 'svelte/transition'
 
-    let alertBox: AlertBox
-    $: if ($newestAlert !== null && alertBox) alertBox.addAlert(...$newestAlert)
+    let alertBox: AlertBox;
+    $: if ($newestAlert !== null && alertBox) alertBox.addAlert(...$newestAlert);
 </script>
 
 <svelte:window bind:innerWidth={$pageWidth} />
@@ -14,9 +14,10 @@
     <div class="fixed isolate -z-10 h-full w-screen bg-black">
         <div id="background-gradient" class="absolute z-10 h-1/2 w-full bg-cover" />
         {#key $backgroundImage}
-            <img id="background-image" src={$backgroundImage} alt="" class="absolute h-1/2 w-full object-cover blur-lg" transition:fade={{ duration: 1000 }} />
+            <img id="background-image" src={$backgroundImage} alt="" class="absolute blur-lg h-1/2 w-full object-cover" transition:fade={{ duration: 1000 }} />
         {/key}
     </div>
+    <button class="w-14 aspect-square bg-neutral-500" on:click={() => $newestAlert = ['success', 'Test message!']} />
     <slot />
     <AlertBox bind:this={alertBox} />
 </div>
diff --git a/src/routes/login/+page.server.ts b/src/routes/login/+page.server.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
new file mode 100644
index 0000000..08302ec
--- /dev/null
+++ b/src/routes/login/+page.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+    import { enhance } from "$app/forms";
+    import { goto } from "$app/navigation";
+    import { fade } from "svelte/transition";
+    import { newestAlert } from "$lib/stores";
+    import type { PageServerData } from "../$types";
+    import type { SubmitFunction } from "@sveltejs/kit";
+
+    export let data: PageServerData
+
+    type FormMode = 'signIn' | 'newUser'
+    let formMode: FormMode = 'signIn'
+
+    const handleForm: SubmitFunction = ({ formData, cancel, action }) => {
+        const actionType: string = action.search.substring(2)
+        if (actionType !== formMode) {
+            cancel()
+            return (formMode = formMode === 'signIn' ? 'newUser' : 'signIn')
+        }
+
+        const { username, password, confirmPassword } = Object.fromEntries(formData)
+
+        if (!username || !password || (formMode === 'newUser' && !confirmPassword)) {
+            cancel()
+            return ($newestAlert = ['caution', 'All fields must be filled out'])
+        }
+
+        if (formMode === 'newUser') {
+            if (username.toString().length > 30) {
+                cancel()
+                return $newestAlert = ['caution', 'Username must be 30 characters or fewer']
+            }
+            if (password.toString().length < 8) {
+                cancel()
+                return $newestAlert = ['caution', 'Password must be at least 8 characters']
+            }
+            if (password !== confirmPassword) {
+                cancel()
+                return ($newestAlert = ['caution', 'Password and Confirm Password must match'])
+            }
+        }
+
+        cancel()
+    }
+</script>
+
+<div class="grid h-full place-items-center">
+    <main class="w-full max-w-4xl">
+        <div class="flex h-14 justify-center">
+            {#key formMode}
+                <h1 class="absolute text-5xl" transition:fade={{ duration: 100 }}>{formMode === 'signIn' ? 'Sign In' : 'Create New User'}</h1>
+            {/key}
+        </div>
+        <form method="post" on:submit|preventDefault use:enhance={handleForm}>
+            <section>
+                <div class="p-4">
+                    <input name="username" type="text" autocomplete="off" placeholder="Username" class="h-10 w-full border-b-2 border-lazuli-primary bg-transparent px-1 outline-none" />
+                </div>
+            </section>
+        </form>
+    </main>
+</div>
\ No newline at end of file