diff options
Diffstat (limited to 'apps/kit/src/routes/(main)/(public)/reset-password')
| -rw-r--r-- | apps/kit/src/routes/(main)/(public)/reset-password/+page.svelte | 16 | ||||
| -rw-r--r-- | apps/kit/src/routes/(main)/(public)/reset-password/[id]/+page.svelte | 79 |
2 files changed, 52 insertions, 43 deletions
diff --git a/apps/kit/src/routes/(main)/(public)/reset-password/+page.svelte b/apps/kit/src/routes/(main)/(public)/reset-password/+page.svelte index 9ee4a83..aa26892 100644 --- a/apps/kit/src/routes/(main)/(public)/reset-password/+page.svelte +++ b/apps/kit/src/routes/(main)/(public)/reset-password/+page.svelte @@ -37,16 +37,14 @@ </script> <div class="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8"> - <div class="sm:mx-auto sm:w-full sm:max-w-md"> - <h2 - class="mt-6 text-center text-3xl tracking-tight font-bold text-gray-900" - > - {$LL.requestAPasswordReset()} + <div class="sm:mx-auto sm:w-full p-2 sm:p-0 sm:max-w-md"> + <h2 class="mt-6 text-3xl tracking-tight font-bold text-gray-900"> + {$LL.resetPasswordPage.requestAPasswordReset()} </h2> - <p class="mt-2 text-center text-sm text-gray-600"> + <p class="mt-2 text-sm text-gray-600"> {$LL.or().toLowerCase()} <a href="/sign-in" class="link"> - {$LL.signIntoYourAccount()} + {$LL.signIntoYourAccount().toLowerCase()} </a> </p> </div> @@ -64,7 +62,7 @@ <Alert type="success" title={$LL.success()} - message={$LL.requestSentMessage()} + message={$LL.resetPasswordPage.requestSentMessage()} visible={showSuccessAlert} /> @@ -77,7 +75,7 @@ bind:value={formData.email} label={$LL.emailAddress()} /> - <Button text={$LL.submit()} type="submit" fullWidth /> + <Button text={$LL.submit()} type="submit" {loading} fullWidth /> </form> </div> </div> diff --git a/apps/kit/src/routes/(main)/(public)/reset-password/[id]/+page.svelte b/apps/kit/src/routes/(main)/(public)/reset-password/[id]/+page.svelte index 7b46d2d..562d902 100644 --- a/apps/kit/src/routes/(main)/(public)/reset-password/[id]/+page.svelte +++ b/apps/kit/src/routes/(main)/(public)/reset-password/[id]/+page.svelte @@ -9,6 +9,7 @@ import type { PageServerData } from "./$types"; import type { ErrorResult } from "$lib/models/ErrorResult"; import { goto } from "$app/navigation"; + import { Message, messageQueryKey } from "../../sign-in/+page.svelte"; export let data: PageServerData; @@ -16,18 +17,15 @@ newPassword: "", }; - $: showErrorAlert = - (errorData?.text.length ?? 0 + errorData?.title.length ?? 0) > 0 && - !showSuccessAlert; - const errorData = { text: "", title: "", } as ErrorResult; + let errorState: undefined | "expired" | "404" | "unknown"; + let finishedPreliminaryLoading = false; let loading = false; - let showSuccessAlert = false; let canSubmit = true; async function submitFormAsync() { @@ -38,39 +36,48 @@ formData.newPassword ); if (request.ok) { - goto("/sign-in?m=1"); + goto( + "/sign-in?" + + messageQueryKey + + "=" + + Message.AFTER_PASSWORD_RESET + ); } loading = false; } onMount(async () => { + errorState = undefined; const isValidRequest = await check_forgot_password_request( data.resetRequestId ); - if (!isValidRequest.ok) { - errorData.text = isValidRequest.data?.text ?? $LL.tryAgainSoon(); - errorData.title = - isValidRequest.data?.title ?? $LL.unexpectedError(); + if (!isValidRequest.ok && isValidRequest.status !== 404) { + errorState = "unknown"; + canSubmit = false; + } + if (isValidRequest.status === 404) { + errorState = "404"; + canSubmit = false; + } + if (isValidRequest.ok && isValidRequest.data !== true) { + errorState = "expired"; canSubmit = false; } - if (isValidRequest.status === 404) goto("/reset-password"); finishedPreliminaryLoading = true; }); </script> <div class="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8"> {#if finishedPreliminaryLoading} - <div class="sm:mx-auto sm:w-full sm:max-w-md"> - <h2 - class="mt-6 text-center text-3xl tracking-tight font-bold text-gray-900" - > - {$LL.requestAPasswordReset()} + <div class="sm:mx-auto sm:w-full p-2 sm:p-0 sm:max-w-md"> + <h2 class="mt-6 text-3xl tracking-tight font-bold text-gray-900"> + {$LL.resetPasswordPage.setANewPassword()} </h2> - <p class="mt-2 text-center text-sm text-gray-600"> + <p class="mt-2 text-sm text-gray-600"> {$LL.or().toLowerCase()} <a href="/sign-in" class="link"> - {$LL.signIntoYourAccount()} + {$LL.signIntoYourAccount().toLowerCase()} </a> </p> </div> @@ -81,21 +88,24 @@ class="space-y-6" on:submit|preventDefault={submitFormAsync} > - <Alert - title={errorData.title} - message={errorData.text} - type="error" - visible={showErrorAlert} - /> - - <Alert - type="success" - title={$LL.success()} - message={$LL.requestSentMessage()} - rightLinkHref="/sign-in" - rightLinkText="Sign in" - visible={showSuccessAlert} - /> + {#if errorState === "404"} + <Alert + title={$LL.notFound()} + message={$LL.resetPasswordPage.requestNotFound()} + /> + {:else if errorState === "expired"} + <Alert + title={$LL.resetPasswordPage.expired()} + message={$LL.resetPasswordPage.requestHasExpired()} + rightLinkHref="/reset-password" + rightLinkText={$LL.resetPasswordPage.requestANewReset()} + /> + {:else if errorState === "unknown"} + <Alert + title={$LL.unexpectedError()} + message={$LL.tryAgainSoon()} + /> + {/if} <Input id="password" @@ -104,8 +114,9 @@ autocomplete="new-password" required bind:value={formData.newPassword} - label={$LL.newPassword()} + label={$LL.resetPasswordPage.newPassword()} /> + <Button text={$LL.submit()} type="submit" |