Fixed submit function, working on matchin passwords alert

src/routes/+layout.svelte

@@ -10,14 +10,13 @@
 </script>
 
 <svelte:window bind:innerWidth={$pageWidth} />
-<div class="no-scrollbar relative font-notoSans text-white">
+<div class="no-scrollbar relative h-screen font-notoSans text-white">
     <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 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>

src/routes/login/+page.svelte

@@ -6,40 +6,46 @@
     import type { PageServerData } from "../$types";
     import type { SubmitFunction } from "@sveltejs/kit";
 
-    export let data: PageServerData
+    // export let data: PageServerData
 
     type FormMode = 'signIn' | 'newUser'
     let formMode: FormMode = 'signIn'
 
+    let passwordInput: string, confirmPasswordInput: string
+    let passwordsMatch: boolean = false
+    $: passwordsMatch = (passwordInput === confirmPasswordInput)
+    $: console.log(passwordsMatch)
+
     const handleForm: SubmitFunction = ({ formData, cancel, action }) => {
         const actionType: string = action.search.substring(2)
         if (actionType !== formMode) {
-            cancel()
+            formMode = formMode === 'signIn' ? 'newUser' : 'signIn'
-            return (formMode = formMode === 'signIn' ? 'newUser' : 'signIn')
+            return cancel()
         }
 
         const { username, password, confirmPassword } = Object.fromEntries(formData)
 
         if (!username || !password || (formMode === 'newUser' && !confirmPassword)) {
-            cancel()
+            $newestAlert = ['caution', 'All fields must be filled out']
-            return ($newestAlert = ['caution', 'All fields must be filled out'])
+            return cancel()
         }
 
         if (formMode === 'newUser') {
             if (username.toString().length > 30) {
-                cancel()
+                $newestAlert = ['caution', 'Username must be 30 characters or fewer']
-                return $newestAlert = ['caution', 'Username must be 30 characters or fewer']
+                return cancel()
             }
             if (password.toString().length < 8) {
-                cancel()
+                $newestAlert = ['caution', 'Password must be at least 8 characters']
-                return $newestAlert = ['caution', 'Password must be at least 8 characters']
+                return cancel()
             }
             if (password !== confirmPassword) {
-                cancel()
+                $newestAlert = ['caution', 'Password and Confirm Password must match']
-                return ($newestAlert = ['caution', 'Password and Confirm Password must match'])
+                return cancel()
             }
         }
 
+        console.log("Passed all checks")
         cancel()
     }
 </script>
@@ -51,23 +57,23 @@
                 <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}>
+        <form method="post" 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" />
+                        <input bind:value={passwordInput} 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" style="width: {formMode === 'newUser' ? '100%': 0};" aria-hidden={formMode !== 'newUser'}>
                         <div class="px-4">
-                            <input name="confirmPassword" type="password" placeholder="Confirm Password" class="h-10 w-full border-b-2 border-lazuli-primary bg-transparent px-1 outline-none" tabindex="{formMode === 'newUser' ? 0 : -1}" />
+                            <input bind:value={confirmPasswordInput} name="confirmPassword" type="password" placeholder="Confirm Password" class="h-10 w-full border-b-2 border-lazuli-primary bg-transparent px-1 outline-none" tabindex="{formMode === 'newUser' ? 0 : -1}" />
                         </div>
                     </div>
                 </div>
             </section>
-            <section class="mt-6 flex items-center justify-around">
+            <section class="mt-6 flex items-center justify-around gap-2">
                 <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" />