From 94cb59310f5cde903d8c94942b0c56dceb80bf79 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Sat, 26 Nov 2022 19:28:56 +0900
Subject: refactor: Add and use FormError class to handle form error logic

---
 .../(main)/(public)/reset-password/+page.svelte    | 19 +++-----
 .../routes/(main)/(public)/sign-in/+page.svelte    | 53 ++++++++++------------
 2 files changed, 31 insertions(+), 41 deletions(-)

(limited to 'code/app/src/routes/(main)')

diff --git a/code/app/src/routes/(main)/(public)/reset-password/+page.svelte b/code/app/src/routes/(main)/(public)/reset-password/+page.svelte
index 8bda3dc..eb02b45 100644
--- a/code/app/src/routes/(main)/(public)/reset-password/+page.svelte
+++ b/code/app/src/routes/(main)/(public)/reset-password/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { Alert, Input, Button } from "$lib/components";
     import LL from "$lib/i18n/i18n-svelte";
+    import { FormError } from "$lib/models/internal/FormError";
     import { PasswordResetService } from "$lib/services/password-reset-service";
 
     const formData = {
@@ -10,22 +11,15 @@
         },
     };
 
-    const formError = {
-        title: "",
-        subtitle: "",
-        set(title = "", subtitle = "") {
-            formError.title = title;
-            formError.subtitle = subtitle;
-        },
-    };
+    const formError = new FormError();
 
     const resetRequests = new PasswordResetService();
 
     let loading = false;
     let showSuccessAlert = false;
-    $: showErrorAlert = (formError.title !== "" || formError.subtitle !== "") && !showSuccessAlert;
+    $: showErrorAlert = formError.has_error() && !showSuccessAlert;
 
-    async function submitFormAsync() {
+    async function submit_form_async() {
         formError.set();
         showSuccessAlert = false;
         loading = true;
@@ -34,8 +28,7 @@
         if (response.isCreated) {
             showSuccessAlert = true;
         } else if (response.knownProblem) {
-            if (response.knownProblem.title) formError.title = response.knownProblem.title;
-            if (response.knownProblem.subtitle) formError.subtitle = response.knownProblem.subtitle;
+            formError.set_from_known_problem(response.knownProblem);
             for (const error of Object.entries(response.knownProblem.errors)) {
                 if (error[0] === "email") {
                     error[1].forEach(formData.email.errors.push);
@@ -63,7 +56,7 @@
 
     <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">
-            <form class="space-y-6" on:submit|preventDefault={submitFormAsync}>
+            <form class="space-y-6" on:submit|preventDefault={submit_form_async}>
                 <Alert title={formError.title} message={formError.subtitle} type="error" visible={showErrorAlert} />
 
                 <Alert
diff --git a/code/app/src/routes/(main)/(public)/sign-in/+page.svelte b/code/app/src/routes/(main)/(public)/sign-in/+page.svelte
index 01c65dd..cf6da75 100644
--- a/code/app/src/routes/(main)/(public)/sign-in/+page.svelte
+++ b/code/app/src/routes/(main)/(public)/sign-in/+page.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
     import { goto } from "$app/navigation";
-    import { http_account } from "$lib/api/account";
     import { Button, Checkbox, Input, Alert } from "$lib/components";
     import LL from "$lib/i18n/i18n-svelte";
     import pwKey from "$actions/pwKey";
-    import { isOk } from "rustic";
     import { onMount } from "svelte";
     import { signInPageMessageQueryKey, signInPageTestKeys, type SignInPageMessage } from ".";
     import { AccountService } from "$lib/services/account-service";
     import type { LoginPayload } from "$lib/services/abstractions/IAccountService";
+    import { FormError } from "$lib/models/internal/FormError";
 
     let loading = false;
+    let showErrorAlert = false;
     let messageType: SignInPageMessage | undefined = undefined;
 
     const accountService = new AccountService();
@@ -28,18 +28,16 @@
             value: false,
             errors: [],
         },
-    };
-
-    const formError = {
-        title: "",
-        subtitle: "",
-        set(title = "", subtitle = "") {
-            formError.title = title;
-            formError.subtitle = subtitle;
+        as_payload(): LoginPayload {
+            return {
+                password: formData.password.value,
+                username: formData.username.value,
+                persist: !formData.persist.value,
+            };
         },
     };
-    
-    $: showErrorAlert = (errorData.text?.length ?? 0 + errorData.title?.length ?? 0) > 0;
+
+    const formError = new FormError();
 
     onMount(() => {
         const searcher = new URLSearchParams(window.location.search);
@@ -50,22 +48,21 @@
         }
     });
 
-    async function submitFormAsync() {
-        errorData = { text: "", title: "" };
+    async function submit_form_async() {
+        formError.set();
+        showErrorAlert = formError.has_error();
         loading = true;
-        data.persist = !data.persist;
-        const loginResponse = await http_account.login_async(data);
-        if (isOk(loginResponse)) {
+        const loginResponse = await accountService.login_async(formData.as_payload());
+        if (loginResponse.isLoggedIn) {
             await goto("/home");
+        } else if (loginResponse.knownProblem) {
+            formError.set_from_known_problem(loginResponse.knownProblem);
         } else {
-            errorData.title = loginResponse.data.title;
-            errorData.text = loginResponse.data.subtitle;
-            if (!errorData.text && !errorData.title) {
-                errorData.text = $LL.tryAgainSoon();
-                errorData.title = $LL.unexpectedError();
-            }
+            formError.title = $LL.unexpectedError();
+            formError.subtitle = $LL.tryAgainSoon();
         }
         loading = false;
+        showErrorAlert = formError.has_error();
     }
 </script>
 
@@ -108,9 +105,9 @@
     <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">
             {#if showErrorAlert}
-                <Alert title={errorData.title} message={errorData.text} type="error" _pwKey={signInPageTestKeys.formErrorAlert} />
+                <Alert title={formError.title} message={formError.subtitle} type="error" _pwKey={signInPageTestKeys.formErrorAlert} />
             {/if}
-            <form class="space-y-6 mt-2" use:pwKey={signInPageTestKeys.signInForm} on:submit|preventDefault={submitFormAsync}>
+            <form class="space-y-6 mt-2" use:pwKey={signInPageTestKeys.signInForm} on:submit|preventDefault={submit_form_async}>
                 <Input
                     id="username"
                     _pwKey={signInPageTestKeys.usernameInput}
@@ -118,7 +115,7 @@
                     type="email"
                     label={$LL.emailAddress()}
                     required
-                    bind:value={data.username}
+                    bind:value={formData.username.value}
                 />
 
                 <Input
@@ -129,7 +126,7 @@
                     _pwKey={signInPageTestKeys.passwordInput}
                     autocomplete="current-password"
                     required
-                    bind:value={data.password}
+                    bind:value={formData.password.value}
                 />
 
                 <div class="flex items-center justify-between">
@@ -137,7 +134,7 @@
                         id="remember-me"
                         _pwKey={signInPageTestKeys.rememberMeCheckbox}
                         name="remember-me"
-                        bind:checked={data.persist}
+                        bind:checked={formData.persist.value}
                         label={$LL.signInPage.notMyComputer()}
                     />
                     <div class="text-sm">
-- 
cgit v1.3