feat: WIP! Rework http calls into services

1 files changed, 69 insertions, 54 deletions

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 5e2cb56..01c65dd 100644
--- a/code/app/src/routes/(main)/(public)/sign-in/+page.svelte
+++ b/code/app/src/routes/(main)/(public)/sign-in/+page.svelte
@@ -1,26 +1,44 @@
 <script lang="ts">
-    import {goto} from "$app/navigation";
-    import {http_account} from "$lib/api/account";
-    import {Button, Checkbox, Input, Alert} from "$lib/components";
+    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 { 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";
 
     let loading = false;
     let messageType: SignInPageMessage | undefined = undefined;
 
-    const data = {
-        username: "",
-        password: "",
-        persist: true,
-    } as LoginPayload;
+    const accountService = new AccountService();
 
-    let errorData = {
-        text: "",
+    const formData = {
+        username: {
+            value: "",
+            errors: [],
+        },
+        password: {
+            value: "",
+            errors: [],
+        },
+        persist: {
+            value: false,
+            errors: [],
+        },
+    };
+
+    const formError = {
         title: "",
-    } as ErrorResult;
+        subtitle: "",
+        set(title = "", subtitle = "") {
+            formError.title = title;
+            formError.subtitle = subtitle;
+        },
+    };
+    
     $: showErrorAlert = (errorData.text?.length ?? 0 + errorData.title?.length ?? 0) > 0;
 
     onMount(() => {
@@ -33,7 +51,7 @@
     });
 
     async function submitFormAsync() {
-        errorData = {text: "", title: ""};
+        errorData = { text: "", title: "" };
         loading = true;
         data.persist = !data.persist;
         const loginResponse = await http_account.login_async(data);
@@ -56,24 +74,24 @@
         <div class="sm:max-w-md sm:mx-auto sm:w-full">
             {#if messageType === "after-password-reset"}
                 <Alert
-                        title={$LL.signInPage.yourNewPasswordIsApplied()}
-                        _pwKey={signInPageTestKeys.afterPasswordResetAlert}
-                        message={$LL.signInPage.signInBelow()}
-                        closeable
+                    title={$LL.signInPage.yourNewPasswordIsApplied()}
+                    _pwKey={signInPageTestKeys.afterPasswordResetAlert}
+                    message={$LL.signInPage.signInBelow()}
+                    closeable
                 />
             {:else if messageType === "user-disabled"}
                 <Alert
-                        title={$LL.signInPage.yourAccountIsDisabled()}
-                        _pwKey={signInPageTestKeys.userDisabledAlert}
-                        message={$LL.signInPage.contactYourAdminIfDisabled()}
-                        closeable
+                    title={$LL.signInPage.yourAccountIsDisabled()}
+                    _pwKey={signInPageTestKeys.userDisabledAlert}
+                    message={$LL.signInPage.contactYourAdminIfDisabled()}
+                    closeable
                 />
             {:else if messageType === "user-inactivity"}
                 <Alert
-                        title={$LL.signInPage.youHaveReachedInactivityLimit()}
-                        _pwKey={signInPageTestKeys.userInactivityAlert}
-                        message={$LL.signInPage.feelFreeToSignInAgain()}
-                        closeable
+                    title={$LL.signInPage.youHaveReachedInactivityLimit()}
+                    _pwKey={signInPageTestKeys.userInactivityAlert}
+                    message={$LL.signInPage.feelFreeToSignInAgain()}
+                    closeable
                 />
             {/if}
         </div>
@@ -84,46 +102,43 @@
         </h2>
         <p class="mt-2 text-sm text-gray-600">
             {$LL.or().toLowerCase()}
-            <a href="/sign-up" use:pwKey={signInPageTestKeys.signUpAnchor}
-               class="link">{$LL.createANewAccount().toLowerCase()}</a>
+            <a href="/sign-up" use:pwKey={signInPageTestKeys.signUpAnchor} class="link">{$LL.createANewAccount().toLowerCase()}</a>
         </p>
     </div>
     <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={errorData.title} message={errorData.text} 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={submitFormAsync}>
                 <Input
-                        id="username"
-                        _pwKey={signInPageTestKeys.usernameInput}
-                        name="username"
-                        type="email"
-                        label={$LL.emailAddress()}
-                        required
-                        bind:value={data.username}
+                    id="username"
+                    _pwKey={signInPageTestKeys.usernameInput}
+                    name="username"
+                    type="email"
+                    label={$LL.emailAddress()}
+                    required
+                    bind:value={data.username}
                 />
 
                 <Input
-                        id="password"
-                        name="password"
-                        type="password"
-                        label={$LL.password()}
-                        _pwKey={signInPageTestKeys.passwordInput}
-                        autocomplete="current-password"
-                        required
-                        bind:value={data.password}
+                    id="password"
+                    name="password"
+                    type="password"
+                    label={$LL.password()}
+                    _pwKey={signInPageTestKeys.passwordInput}
+                    autocomplete="current-password"
+                    required
+                    bind:value={data.password}
                 />
 
                 <div class="flex items-center justify-between">
                     <Checkbox
-                            id="remember-me"
-                            _pwKey={signInPageTestKeys.rememberMeCheckbox}
-                            name="remember-me"
-                            bind:checked={data.persist}
-                            label={$LL.signInPage.notMyComputer()}
+                        id="remember-me"
+                        _pwKey={signInPageTestKeys.rememberMeCheckbox}
+                        name="remember-me"
+                        bind:checked={data.persist}
+                        label={$LL.signInPage.notMyComputer()}
                     />
                     <div class="text-sm">
                         <a href="/reset-password" class="link" use:pwKey={signInPageTestKeys.resetPasswordAnchor}>
@@ -132,7 +147,7 @@
                     </div>
                 </div>
 
-                <Button text={$LL.submit()} fullWidth type="submit" {loading}/>
+                <Button text={$LL.submit()} fullWidth type="submit" {loading} />
             </form>
         </div>
     </div>