diff options
Diffstat (limited to 'code/app/src/routes')
| -rw-r--r-- | code/app/src/routes/(main)/(public)/reset-password/+page.svelte | 19 | ||||
| -rw-r--r-- | code/app/src/routes/(main)/(public)/sign-in/+page.svelte | 53 |
2 files changed, 31 insertions, 41 deletions
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"> |