fix formsnap issue and add dotenv package

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

@@ -1,10 +1,10 @@
-import { fail } from '@sveltejs/kit';
 import type { Actions } from '@sveltejs/kit';
+import { fail } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 import { setError, superValidate } from 'sveltekit-superforms/server';
 import { formSchema } from './schema';
-import { HASHED_PASSWORD } from '$env/static/private';
 import { generateToken } from '$lib/auth';
+import 'dotenv/config';
 
 export const load: PageServerLoad = () => {
   return {
@@ -20,10 +20,21 @@ export const actions: Actions = {
       return fail(400, { ok: false, message: 'Bad Request', form });
     }
 
-    const { password } = form.data;
+    const { HASHED_PASSWORD } = process.env;
+    if (HASHED_PASSWORD) {
+      const { password } = form.data;
 
-    if (HASHED_PASSWORD.toLowerCase() !== Buffer.from(password.toString()).toString('hex').toLowerCase()) {
-      return setError(form, 'password', 'Incorrect password.');
+      const hashed = HASHED_PASSWORD.toLowerCase();
+      const receivedHashed = Buffer.from(password.toString()).toString('hex').toLowerCase();
+
+      if (hashed !== receivedHashed) {
+        console.log('[+] TEST ONLY', password, hashed, receivedHashed);
+        return setError(form, 'password', 'Incorrect password.');
+      }
+    }
+
+    if (!HASHED_PASSWORD) {
+      console.warn('No password is set!');
     }
 
     const token = await generateToken();

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

@@ -4,41 +4,42 @@
   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';
+  import type { FormOptions } from 'formsnap';
 
   export let form: SuperValidated<FormSchema>;
+
+  const options: FormOptions<typeof formSchema> = {
+    validators: formSchema,
+    onResult: ({ result }) => {
+      if (result.type === 'success') {
+        goto('/');
+      } else {
+        console.error('Server-failure: Validation failed');
+      }
+    },
+  };
 </script>
 
 <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" />
+    <Form {form} {options} schema={formSchema} let:config let:enhance asChild>
+      <form method="POST" class="pt-4 space-y-8" use:enhance>
+        <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>
-      </div>
 
-      <FormField {config} name="password">
-        <FormItem>
-          <FormLabel>Password</FormLabel>
-          <FormInput type="password" autocomplete="off" />
-          <FormValidation />
-        </FormItem>
-      </FormField>
+        <FormField {config} name="password">
+          <FormItem>
+            <FormLabel>Password</FormLabel>
+            <FormInput type="password" autocomplete="off" />
+            <FormValidation />
+          </FormItem>
+        </FormField>
 
-      <FormButton class="w-full">Sign In</FormButton>
+        <FormButton class="w-full">Sign In</FormButton>
+      </form>
     </Form>
   </CardContent>
 </Card>