fix formsnap issue and add dotenv package

web/package.json

@@ -40,6 +40,7 @@
     "clsx": "^2.0.0",
     "crypto-js": "^4.2.0",
     "deepmerge": "^4.3.1",
+    "dotenv": "^16.3.1",
     "formsnap": "^0.4.1",
     "ioredis": "^5.3.2",
     "jsonwebtoken": "^9.0.2",

web/pnpm-lock.yaml

@@ -17,6 +17,9 @@ dependencies:
   deepmerge:
     specifier: ^4.3.1
     version: 4.3.1
+  dotenv:
+    specifier: ^16.3.1
+    version: 16.3.1
   formsnap:
     specifier: ^0.4.1
     version: 0.4.1(svelte@4.2.2)(sveltekit-superforms@1.9.0)(zod@3.22.4)
@@ -868,6 +871,11 @@ packages:
   /dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
+  /dotenv@16.3.1:
+    resolution: {integrity: sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==}
+    engines: {node: '>=12'}
+    dev: false
+
   /ecdsa-sig-formatter@1.0.11:
     resolution: {integrity: sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==}
     dependencies:

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()) {
+      const hashed = HASHED_PASSWORD.toLowerCase();
-      return setError(form, 'password', 'Incorrect password.');
+      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 {form} {options} schema={formSchema} let:config let:enhance asChild>
-      {form}
+      <form method="POST" class="pt-4 space-y-8" use:enhance>
-      schema={formSchema}
+        <div class="w-full flex items-center justify-center">
-      let:config
+          <div class="w-16 aspect-square flex items-center justify-center rounded-full bg-gray-200">
-      method="POST"
+            <i class="fas fa-user text-primary text-2xl" />
-      class="pt-4 space-y-8"
+          </div>
-      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>
 
-      <FormField {config} name="password">
+        <FormField {config} name="password">
-        <FormItem>
+          <FormItem>
-          <FormLabel>Password</FormLabel>
+            <FormLabel>Password</FormLabel>
-          <FormInput type="password" autocomplete="off" />
+            <FormInput type="password" autocomplete="off" />
-          <FormValidation />
+            <FormValidation />
-        </FormItem>
+          </FormItem>
-      </FormField>
+        </FormField>
 
-      <FormButton class="w-full">Sign In</FormButton>
+        <FormButton class="w-full">Sign In</FormButton>
+      </form>
     </Form>
   </CardContent>
 </Card>