move back to form actions

very buggy, see pablo-abc/felte#277 for more info

frontend/package.json

@@ -20,6 +20,7 @@
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte": "^2.30.0",
+    "felte": "^1.2.12",
     "postcss": "^8.4.24",
     "prettier": "^3.0.3",
     "prettier-plugin-svelte": "^3.1.0",

frontend/src/app.d.ts

@@ -8,11 +8,12 @@ declare global {
     // interface Platform {}
   }
   namespace svelteHTML {
-  interface HTMLAttributes<T> {
-    'on:clickoutside'?: (event: CustomEvent<T>) => void;
+    interface HTMLAttributes<T> {
+      'on:clickoutside'?: (event: CustomEvent<T>) => void;
+      'on:feltesuccess'?: (event: CustomEvent) => void;
+      'on:felteerror'?: (event: CustomEvent) => void;
+    }
   }
 }
 
-}
-
 export {};

frontend/src/lib/components/SignupForm.svelte

@@ -1,42 +1,36 @@
 <script lang="ts">
-  import { PUBLIC_DATA_ROUTE } from '$env/static/public';
-  import { handleSubmit } from '$lib/utils/form';
-  import { signupSchema } from '$lib/schema/signupSchema';
+  import { createForm } from 'felte';
   import { showModal } from '../stores';
   import SubmitError from './SubmitError.svelte';
 
-  const CREATED = 201;
+  const { form: felteForm } = createForm({});
 
-  let signupStatus: number;
-  let responseData: { [index: string]: string };
+  async function handleSuccess(event: CustomEvent) {
+    const { response } = event.detail;
+    const responseBody = await response.json();
+    const data = JSON.parse(responseBody.data);
+    if (responseBody.type === 'failure') {
+      // a little hacky as $page.form only contains the response for the form on the route corresponding to the action name
+      // format returned by action is transformed in an odd way. might find a better solution later
+      formError = data[2];
+    } else {
+      showModal.set('signup', false);
+    }
+  }
+
+  let formError: undefined | string;
   let username = '';
   let password = '';
   let retyped_password = '';
-
-  async function onSubmit(e: SubmitEvent) {
-    const formData = new FormData(e.target as HTMLFormElement);
-    signupSchema
-      .validate(formData)
-      .then((valid) => console.log(valid))
-      .catch((err) => console.log(err));
-
-    if (password === retyped_password) {
-      const response = await handleSubmit(e, `${PUBLIC_DATA_ROUTE}/signup`);
-
-      responseData = await response.json();
-      signupStatus = response.status;
-
-      if (signupStatus === CREATED) {
-        username = '';
-        password = '';
-        retyped_password = '';
-        showModal.set('signup', false);
-      }
-    }
-  }
 </script>
 
-<form class="modal-form" on:submit|preventDefault={onSubmit}>
+<form
+  class="modal-form"
+  use:felteForm
+  action="?/signup"
+  method="post"
+  on:feltesuccess={handleSuccess}
+>
   <label for="username-input" class="form-label">name</label>
   <input
     name="username"
@@ -72,8 +66,8 @@
     maxlength="50"
     class="form-input"
   />
-  {#if responseData?.error}
-    <SubmitError>{responseData?.errorMessage || ''}</SubmitError>
+  {#if formError}
+    <SubmitError>{formError}</SubmitError>
   {/if}
-  <button class="send-button">send</button>
+  <button class="send-button" type="submit">send</button>
 </form>

frontend/src/lib/utils/form.ts

@@ -2,7 +2,11 @@
  * handles form submissions
  * @returns http status of the received response
  */
-export async function handleSubmit(e: SubmitEvent, dataRoute: string, token?:string): Promise<Response> {
+export async function handleSubmit(
+  e: SubmitEvent,
+  dataRoute: string,
+  token?: string
+): Promise<Response> {
   const formData = new FormData(e.target as HTMLFormElement);
   const data: { [key: string]: FormDataEntryValue } = {};
   //deconstructs each field and adds it to data object
@@ -12,7 +16,7 @@ export async function handleSubmit(e: SubmitEvent, dataRoute: string, token?:str
   }
 
   const headers: Record<string, string> = {
-    'Content-Type': 'application/json',
+    'Content-Type': 'application/json'
   };
 
   if (token !== undefined) {

frontend/src/routes/+page.server.ts

@@ -1,6 +1,9 @@
 import { INTERNAL_DATA_ROUTE } from '$env/static/private';
-import type { LoadEvent } from '@sveltejs/kit';
+import { fail, type LoadEvent } from '@sveltejs/kit';
 import type { Message } from '../../types/message';
+import type { Actions } from '@sveltejs/kit';
+
+const CREATED = 201;
 
 export async function load({ fetch }: LoadEvent) {
   const response = await fetch(`${INTERNAL_DATA_ROUTE}/global-message`);
@@ -9,3 +12,34 @@ export async function load({ fetch }: LoadEvent) {
     message
   };
 }
+
+export const actions: Actions = {
+  signup: async ({ request }) => {
+    const formData = await request.formData();
+    const formBody = {
+      username: formData.get('username'),
+      password: formData.get('password')
+    };
+
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json'
+    };
+
+    const response = await fetch(`${INTERNAL_DATA_ROUTE}/signup`, {
+      method: 'POST',
+      mode: 'cors',
+      headers: headers,
+      body: JSON.stringify(formBody),
+      credentials: 'include'
+    });
+
+    const responseData = await response.json();
+    const signupStatus = response.status;
+
+    if (signupStatus === CREATED) {
+      return { success: true };
+    }
+
+    return fail(signupStatus, responseData);
+  }
+};