Gonna try to start using git properly

src/routes/login/+page.svelte

@@ -0,0 +1,91 @@
+<script>
+    import { enhance } from '$app/forms'
+    import { goto } from '$app/navigation'
+    import { fade } from 'svelte/transition'
+    import { newestAlert } from '$lib/stores/alertStore.js'
+
+    export let data
+
+    let formMode = 'signIn'
+
+    const handleForm = ({ formData, cancel, action }) => {
+        const actionType = 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.length > 50) {
+                cancel()
+                return ($newestAlert = ['caution', 'Really? You need a username longer that 50 characters? No, stop it, be normal'])
+            }
+            if (password.length < 8) {
+                cancel()
+                return ($newestAlert = ['caution', 'Password must be at least 8 characters long'])
+            }
+            if (password !== confirmPassword) {
+                cancel()
+                return ($newestAlert = ['caution', 'Password and Confirm Password must match'])
+            }
+        }
+
+        if (data.redirectLocation) formData.append('redirectLocation', data.redirectLocation)
+
+        return async ({ result }) => {
+            if (result.type === 'redirect') {
+                goto(result.location)
+            } else if (result.type === 'failure') {
+                return ($newestAlert = ['warning', result.data.message])
+            }
+        }
+    }
+</script>
+
+<div class="flex h-full items-center justify-center">
+    <div class="w-full max-w-4xl rounded-2xl p-8">
+        <section class="flex h-14 justify-center">
+            {#key formMode}
+                <span class="absolute text-5xl" transition:fade={{ duration: 100 }}>{formMode === 'signIn' ? 'Sign In' : 'Create New User'}</span>
+            {/key}
+        </section>
+        <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>
+                <div class="flex">
+                    <div class="w-full p-4">
+                        <input name="password" type="password" placeholder="Password" class="h-10 w-full border-b-2 border-lazuli-primary bg-transparent px-1 outline-none" />
+                    </div>
+                    <div class="overflow-hidden py-4 transition-[width] duration-300 ease-linear" style="width: {formMode === 'newUser' ? '100%' : 0};" aria-hidden={formMode !== 'newUser'}>
+                        <div class="px-4">
+                            <input name="confirmPassword" type="password" placeholder="Confirm Password" class="block h-10 w-full border-b-2 border-lazuli-primary bg-transparent px-1 outline-none" />
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section class="mt-6 flex items-center justify-around">
+                <button formaction="?/signIn" class="h-12 w-1/3 rounded-md transition-all active:scale-[97%]" style="background-color: {formMode === 'signIn' ? 'var(--lazuli-primary)' : '#262626'};">
+                    Sign In
+                    <i class="fa-solid fa-right-to-bracket ml-1" />
+                </button>
+                <button
+                    formaction="?/newUser"
+                    class="h-12 w-1/3 rounded-md transition-all active:scale-[97%]"
+                    style="background-color: {formMode === 'newUser' ? 'var(--lazuli-primary)' : '#262626'};"
+                >
+                    Create New User
+                    <i class="fa-solid fa-user-plus ml-1" />
+                </button>
+            </section>
+        </form>
+    </div>
+</div>