1 files changed, 62 insertions, 24 deletions
diff --git a/code/app/src/routes/(main)/(public)/sign-up/+page.svelte b/code/app/src/routes/(main)/(public)/sign-up/+page.svelte
index f2b0d7f..9fa8dfa 100644
--- a/code/app/src/routes/(main)/(public)/sign-up/+page.svelte
+++ b/code/app/src/routes/(main)/(public)/sign-up/+page.svelte
@@ -1,35 +1,62 @@
 <script lang="ts">
     import { goto } from "$app/navigation";
-    import { create_account } from "$lib/api/account";
+    import type { CreateAccountPayload } from "$lib/api/account";
     import { Button, Input, Alert } from "$lib/components";
     import LL from "$lib/i18n/i18n-svelte";
-    import type { CreateAccountPayload } from "$lib/api/account/models/CreateAccountPayload";
-    import type { ErrorResult } from "$lib/models/internal/ErrorResult";
+    import { FormError } from "$lib/models/internal/FormError";
+    import { AccountService } from "$lib/services/account-service";
 
     const formData = {
-        username: "",
-        password: "",
-    } as CreateAccountPayload;
+        username: {
+            value: "",
+            errors: [],
+        },
+        password: {
+            value: "",
+            errors: [],
+        },
+        as_payload(): CreateAccountPayload {
+            return {
+                username: formData.username.value,
+                password: formData.password.value,
+            };
+        },
+    };
+
+    const formError = new FormError();
+    const accountService = new AccountService();
 
-    const errorData = {
-        text: "",
-        title: "",
-    } as ErrorResult;
     let loading = false;
-    $: showErrorAlert = (errorData?.text.length ?? 0 + errorData?.title.length ?? 0) > 0;
+    let showErrorAlert = false;
 
-    async function submitFormAsync() {
+    async function submit_form_async() {
         loading = true;
-        errorData.text = "";
-        errorData.title = "";
-        const response = await create_account(formData);
-        loading = false;
-        if (response.ok) {
+        showErrorAlert = false;
+        formError.set();
+        formData.username.errors = [];
+        formData.password.errors = [];
+        const response = await accountService.create_account_async(formData.as_payload());
+        if (response.isCreated) {
             await goto("/home");
-            return;
+        } else if (response.knownProblem) {
+            formError.set_from_known_problem(response.knownProblem);
+            for (const error of Object.entries(response.knownProblem.errors)) {
+                if (error[0] === "username") {
+                    const errors = [];
+                    error[1].forEach((e) => errors.push(e));
+                    formData.username.errors = errors;
+                }
+                if (error[0] === "password") {
+                    const errors = [];
+                    error[1].forEach((e) => errors.push(e));
+                    formData.password.errors = errors;
+                }
+            }
+        } else {
+            formError.set($LL.unexpectedError(), $LL.tryAgainSoon());
         }
-        errorData.title = response.data?.title ?? $LL.unexpectedError();
-        errorData.text = response.data?.text ?? $LL.tryAgainSoon();
+        loading = false;
+        showErrorAlert = formError.has_error();
     }
 </script>
 
@@ -48,8 +75,10 @@
 
     <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
         <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
-            <Alert title={errorData.title} message={errorData.text} type="error" class="mb-2" visible={showErrorAlert} />
-            <form class="space-y-6" on:submit|preventDefault={submitFormAsync}>
+            {#if showErrorAlert}
+                <Alert title={formError.title} message={formError.subtitle} type="error" class="mb-2" />
+            {/if}
+            <form class="space-y-6" on:submit|preventDefault={submit_form_async}>
                 <Input
                     label={$LL.emailAddress()}
                     id="email"
@@ -57,10 +86,19 @@
                     autocomplete="email"
                     required
                     type="email"
-                    bind:value={formData.username}
+                    bind:value={formData.username.value}
+                    errors={formData.username.errors}
                 />
 
-                <Input label={$LL.password()} id="password" name="password" required type="password" bind:value={formData.password} />
+                <Input
+                    label={$LL.password()}
+                    id="password"
+                    name="password"
+                    required
+                    type="password"
+                    bind:value={formData.password.value}
+                    errors={formData.password.errors}
+                />
                 <Button type="submit" text={$LL.submit()} {loading} fullWidth />
             </form>
         </div>