aboutsummaryrefslogtreecommitdiffstats
path: root/code/app/src/routes/(main)/(public)/reset-password/+page.svelte
diff options
context:
space:
mode:
authorivarlovlie <git@ivarlovlie.no>2022-10-05 14:45:21 +0200
committerivarlovlie <git@ivarlovlie.no>2022-10-05 14:45:21 +0200
commitb7e39b59fd0fc7b5610ebff29035bf622079e0d8 (patch)
tree64be84ebbdac9f7ceced983390c53b10d575af5c /code/app/src/routes/(main)/(public)/reset-password/+page.svelte
parent2001c035fbb417ab0a3d42cfb04d17420bde4086 (diff)
downloadgreatoffice-b7e39b59fd0fc7b5610ebff29035bf622079e0d8.tar.xz
greatoffice-b7e39b59fd0fc7b5610ebff29035bf622079e0d8.zip
refactor: Change file structure
Diffstat (limited to 'code/app/src/routes/(main)/(public)/reset-password/+page.svelte')
-rw-r--r--code/app/src/routes/(main)/(public)/reset-password/+page.svelte82
1 files changed, 82 insertions, 0 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
new file mode 100644
index 0000000..aa26892
--- /dev/null
+++ b/code/app/src/routes/(main)/(public)/reset-password/+page.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+ import { create_forgot_password_request } from "$lib/api/user";
+ import { Alert, Input, Button } from "$lib/components";
+ import LL from "$lib/i18n/i18n-svelte";
+ import type { ErrorResult } from "$lib/models/ErrorResult";
+
+ const formData = {
+ email: "",
+ };
+
+ $: showErrorAlert =
+ (errorData?.text.length ?? 0 + errorData?.title.length ?? 0) > 0 &&
+ !showSuccessAlert;
+
+ const errorData = {
+ text: "",
+ title: "",
+ } as ErrorResult;
+
+ let loading = false;
+ let showSuccessAlert = false;
+
+ async function submitFormAsync() {
+ errorData.text = "";
+ errorData.title = "";
+ showSuccessAlert = false;
+ loading = true;
+ const request = await create_forgot_password_request(formData.email);
+ loading = false;
+ if (!request.ok) {
+ errorData.text = request.data.text ?? $LL.tryAgainSoon();
+ errorData.title = request.data.title ?? $LL.unexpectedError();
+ return;
+ }
+ showSuccessAlert = true;
+ }
+</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 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-sm text-gray-600">
+ {$LL.or().toLowerCase()}
+ <a href="/sign-in" class="link">
+ {$LL.signIntoYourAccount().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">
+ <form 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.resetPasswordPage.requestSentMessage()}
+ visible={showSuccessAlert}
+ />
+
+ <Input
+ id="email"
+ name="email"
+ type="email"
+ autocomplete="email"
+ required
+ bind:value={formData.email}
+ label={$LL.emailAddress()}
+ />
+ <Button text={$LL.submit()} type="submit" {loading} fullWidth />
+ </form>
+ </div>
+ </div>
+</div>