fix

web/src/routes/login/+page.server.ts

@@ -1,6 +1,7 @@
-import { type Actions, fail } from '@sveltejs/kit';
+import { fail } from '@sveltejs/kit';
+import type { Actions } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { superValidate } from 'sveltekit-superforms/server';
+import { setError, superValidate } from 'sveltekit-superforms/server';
 import { formSchema } from './schema';
 import { HASHED_PASSWORD } from '$env/static/private';
 import { generateToken } from '$lib/auth';
@@ -12,19 +13,22 @@ export const load: PageServerLoad = () => {
 };
 
 export const actions: Actions = {
-  default: async ({ request, cookies }) => {
-    const data = await request.formData();
-    const password = data.get('password') ?? '';
+  default: async (event) => {
+    const form = await superValidate(event, formSchema);
+
+    if (!form.valid) {
+      return fail(400, { ok: false, message: 'Bad Request', form });
+    }
+
+    const { password } = form.data;
 
     if (HASHED_PASSWORD.toLowerCase() !== Buffer.from(password.toString()).toString('hex').toLowerCase()) {
-      console.warn('auth failed');
-      return fail(401, { message: 'Unauthorized' });
+      return setError(form, 'password', 'Incorrect password.');
     }
 
     const token = await generateToken();
-    cookies.set('authorization', token);
+    event.cookies.set('authorization', token);
 
-    console.info('logged in.');
-    return { message: 'Success!' };
+    return { ok: true };
   },
 };

web/src/routes/login/+page.svelte

@@ -1,30 +1,44 @@
 <script lang="ts">
-  import * as Form from '$lib/components/ui/form';
-  import * as Card from '$lib/components/ui/card';
   import { formSchema, type FormSchema } from './schema';
   import type { SuperValidated } from 'sveltekit-superforms';
+  import { Card, CardContent } from '$lib/components/ui/card';
+  import { Form, FormButton, FormField, FormInput, FormItem, FormLabel, FormValidation } from '$lib/components/ui/form';
+  import { goto } from '$app/navigation';
 
   export let form: SuperValidated<FormSchema>;
 </script>
 
-<Card.Root>
-  <Card.Content>
-    <Form.Root method="POST" {form} schema={formSchema} let:config class="pt-4 space-y-8">
+<Card>
+  <CardContent>
+    <Form
+      {form}
+      schema={formSchema}
+      let:config
+      method="POST"
+      class="pt-4 space-y-8"
+      options={{
+        onResult: ({ result }) => {
+          if (result.type === 'success') {
+            goto('/');
+          }
+        },
+      }}
+    >
       <div class="w-full flex items-center justify-center">
         <div class="w-16 aspect-square flex items-center justify-center rounded-full bg-gray-200">
           <i class="fas fa-user text-primary text-2xl" />
         </div>
       </div>
 
-      <Form.Field {config} name="password">
-        <Form.Item>
-          <Form.Label>Password</Form.Label>
-          <Form.Input type="password" autocomplete="off" />
-          <Form.Validation />
-        </Form.Item>
-      </Form.Field>
+      <FormField {config} name="password">
+        <FormItem>
+          <FormLabel>Password</FormLabel>
+          <FormInput type="password" autocomplete="off" />
+          <FormValidation />
+        </FormItem>
+      </FormField>
 
-      <Form.Button class="w-full">Sign In</Form.Button>
-    </Form.Root>
-  </Card.Content>
-</Card.Root>
+      <FormButton class="w-full">Sign In</FormButton>
+    </Form>
+  </CardContent>
+</Card>

web/src/routes/login/schema.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
 export const formSchema = z.object({
-  password: z.string(),
+  password: z.string().min(1, { message: 'Password is required' }),
 });
 export type FormSchema = typeof formSchema;