diff options
Diffstat (limited to 'code/app/src/routes/(main)/(public)')
10 files changed, 501 insertions, 0 deletions
diff --git a/code/app/src/routes/(main)/(public)/+layout.svelte b/code/app/src/routes/(main)/(public)/+layout.svelte new file mode 100644 index 0000000..69c29c5 --- /dev/null +++ b/code/app/src/routes/(main)/(public)/+layout.svelte @@ -0,0 +1,18 @@ +<script> + import LL from "$lib/i18n/i18n-svelte"; +</script> + +<slot /> +<footer + class="grid sm:gap-5 grid-flow-row sm:justify-center px-2 sm:grid-flow-col" +> + <a href="https://greatoffice.life/privacy" class="link"> + {$LL.privacyPolicy()} + </a> + <a href="https://greatoffice.life/tos" class="link"> + {$LL.tos()} + </a> + <a href="https://greatoffice.life/documentation" class="link"> + {$LL.documentation()} + </a> +</footer> 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> diff --git a/code/app/src/routes/(main)/(public)/reset-password/[id]/+page.server.js b/code/app/src/routes/(main)/(public)/reset-password/[id]/+page.server.js new file mode 100644 index 0000000..1c7fa30 --- /dev/null +++ b/code/app/src/routes/(main)/(public)/reset-password/[id]/+page.server.js @@ -0,0 +1,11 @@ +import { is_guid } from '$lib/helpers'; +import { redirect } from '@sveltejs/kit'; +export const load = async ({ params }) => { + const resetRequestId = params.id ?? ""; + if (!is_guid(resetRequestId)) + throw redirect(302, "/reset-password"); + return { + resetRequestId + }; +}; +//# sourceMappingURL=+page.server.js.map
\ No newline at end of file diff --git a/code/app/src/routes/(main)/(public)/reset-password/[id]/+page.server.js.map b/code/app/src/routes/(main)/(public)/reset-password/[id]/+page.server.js.map new file mode 100644 index 0000000..52fb93b --- /dev/null +++ b/code/app/src/routes/(main)/(public)/reset-password/[id]/+page.server.js.map @@ -0,0 +1 @@ +{"version":3,"file":"+page.server.js","sourceRoot":"","sources":["+page.server.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,MAAM,CAAC,MAAM,IAAI,GAAmB,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;IACrD,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC;IACvC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAAE,MAAM,QAAQ,CAAC,GAAG,EAAE,iBAAiB,CAAC,CAAC;IACrE,OAAO;QACH,cAAc;KACjB,CAAC;AACN,CAAC,CAAC"}
\ No newline at end of file diff --git a/code/app/src/routes/(main)/(public)/reset-password/[id]/+page.server.ts b/code/app/src/routes/(main)/(public)/reset-password/[id]/+page.server.ts new file mode 100644 index 0000000..389d04c --- /dev/null +++ b/code/app/src/routes/(main)/(public)/reset-password/[id]/+page.server.ts @@ -0,0 +1,11 @@ +import { is_guid } from '$lib/helpers'; +import { redirect } from '@sveltejs/kit'; +import type { PageServerLoad } from './$types'; + +export const load: PageServerLoad = async ({ params }) => { + const resetRequestId = params.id ?? ""; + if (!is_guid(resetRequestId)) throw redirect(302, "/reset-password"); + return { + resetRequestId + }; +};
\ No newline at end of file diff --git a/code/app/src/routes/(main)/(public)/reset-password/[id]/+page.svelte b/code/app/src/routes/(main)/(public)/reset-password/[id]/+page.svelte new file mode 100644 index 0000000..562d902 --- /dev/null +++ b/code/app/src/routes/(main)/(public)/reset-password/[id]/+page.svelte @@ -0,0 +1,132 @@ +<script lang="ts"> + import { + check_forgot_password_request, + fulfill_forgot_password_request, + } from "$lib/api/user"; + import { onMount } from "svelte"; + import LL from "$lib/i18n/i18n-svelte"; + import { Alert, Input, Button } from "$lib/components"; + 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; + + const formData = { + newPassword: "", + }; + + const errorData = { + text: "", + title: "", + } as ErrorResult; + + let errorState: undefined | "expired" | "404" | "unknown"; + + let finishedPreliminaryLoading = false; + let loading = false; + let canSubmit = true; + + async function submitFormAsync() { + if (!canSubmit) return; + loading = true; + const request = await fulfill_forgot_password_request( + data.resetRequestId, + formData.newPassword + ); + if (request.ok) { + 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 && 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; + } + 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 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-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} + > + {#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" + name="password" + type="password" + autocomplete="new-password" + required + bind:value={formData.newPassword} + label={$LL.resetPasswordPage.newPassword()} + /> + + <Button + text={$LL.submit()} + type="submit" + {loading} + fullWidth + /> + </form> + </div> + </div> + {:else} + <p>Checking your request...</p> + {/if} +</div> diff --git a/code/app/src/routes/(main)/(public)/sign-in/+page.svelte b/code/app/src/routes/(main)/(public)/sign-in/+page.svelte new file mode 100644 index 0000000..908e2ba --- /dev/null +++ b/code/app/src/routes/(main)/(public)/sign-in/+page.svelte @@ -0,0 +1,133 @@ +<script lang="ts"> + import { goto } from "$app/navigation"; + import { login } from "$lib/api/user"; + import { Button, Checkbox, Input, Alert } from "$lib/components"; + import LL from "$lib/i18n/i18n-svelte"; + import type { ErrorResult } from "$lib/models/ErrorResult"; + import type { LoginPayload } from "$lib/models/LoginPayload"; + import pwKey from "$actions/pwKey"; + import { onMount } from "svelte"; + import { messageQueryKey, signInPageTestKeys, type Message } from "."; + + let loading = false; + let messageType: Message | undefined = undefined; + + const data = { + username: "", + password: "", + persist: true, + } as LoginPayload; + + let errorData = { + text: "", + title: "", + } as ErrorResult; + $: showErrorAlert = (errorData?.text.length ?? 0 + errorData?.title.length ?? 0) > 0; + + onMount(() => { + const searcher = new URLSearchParams(window.location.search); + if (searcher.get(messageQueryKey)) { + messageType = searcher.get(messageQueryKey) as Message; + searcher.delete(messageQueryKey); + history.replaceState(null, "", window.location.origin + window.location.pathname); + } + }); + + async function submitFormAsync() { + errorData = { text: "", title: "" }; + loading = true; + data.persist = !data.persist; + const loginResponse = await login(data); + if (loginResponse.ok) { + await goto("/home"); + } else { + errorData.title = loginResponse.data.title; + errorData.text = loginResponse.data.text; + } + loading = false; + } +</script> + +<div class="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8"> + {#if messageType} + <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 + /> + {:else if messageType === "user-disabled"} + <Alert + 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 + /> + {/if} + </div> + {/if} + <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.signInPage.signIn()} + </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> + </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} /> + {/if} + <form class="space-y-6" 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} + /> + + <Input + 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()} + /> + <div class="text-sm"> + <a href="/reset-password" class="link" use:pwKey={signInPageTestKeys.resetPasswordAnchor}> + {$LL.signInPage.resetPassword()} + </a> + </div> + </div> + + <Button text={$LL.submit()} fullWidth type="submit" {loading} /> + </form> + </div> + </div> +</div> diff --git a/code/app/src/routes/(main)/(public)/sign-in/index.ts b/code/app/src/routes/(main)/(public)/sign-in/index.ts new file mode 100644 index 0000000..cbdcbf6 --- /dev/null +++ b/code/app/src/routes/(main)/(public)/sign-in/index.ts @@ -0,0 +1,19 @@ +export enum Message { + AFTER_PASSWORD_RESET = "after-password-reset", + USER_INACTIVITY = "user-inactivity", + USER_DISABLED = "user-disabled", +} + +export const messageQueryKey = "m"; +export const signInPageTestKeys = { + passwordInput: "password-input", + usernameInput: "username-input", + rememberMeCheckbox: "remember-me-checkbox", + signInForm: "sign-in-form", + userInactivityAlert: Message.USER_INACTIVITY + "-alert", + userDisabledAlert: Message.USER_DISABLED + "-alert", + afterPasswordResetAlert: Message.AFTER_PASSWORD_RESET + "-alert", + formErrorAlert: "form-error-alert", + resetPasswordAnchor: "reset-password-anchor", + signUpAnchor: "sign-up-anchor", +};
\ No newline at end of file diff --git a/code/app/src/routes/(main)/(public)/sign-in/tests/index.spec.ts b/code/app/src/routes/(main)/(public)/sign-in/tests/index.spec.ts new file mode 100644 index 0000000..ea8c494 --- /dev/null +++ b/code/app/src/routes/(main)/(public)/sign-in/tests/index.spec.ts @@ -0,0 +1,12 @@ +import { test, expect } from "@playwright/test"; +import { signInPageTestKeys } from "../index"; +import { get_test_context } from "$lib/configuration"; +import { get_pw_key_selector } from "$lib/helpers"; + +const context = get_test_context(); + +test("form loads", async ({ page }) => { + page.goto("/sign-in"); + const form = page.locator(get_pw_key_selector(signInPageTestKeys.signInForm)); + expect(form.isVisible()).toBeTruthy(); +}) diff --git a/code/app/src/routes/(main)/(public)/sign-up/+page.svelte b/code/app/src/routes/(main)/(public)/sign-up/+page.svelte new file mode 100644 index 0000000..0dfa41a --- /dev/null +++ b/code/app/src/routes/(main)/(public)/sign-up/+page.svelte @@ -0,0 +1,82 @@ +<script lang="ts"> + import { goto } from "$app/navigation"; + import { create_account } from "$lib/api/user"; + import { Button, Input, Alert } from "$lib/components"; + import LL from "$lib/i18n/i18n-svelte"; + import type { CreateAccountPayload } from "$lib/models/CreateAccountPayload"; + import type { ErrorResult } from "$lib/models/ErrorResult"; + + const formData = { + username: "", + password: "", + } as CreateAccountPayload; + + const errorData = { + text: "", + title: "", + } as ErrorResult; + let loading = false; + $: showErrorAlert = + (errorData?.text.length ?? 0 + errorData?.title.length ?? 0) > 0; + + async function submitFormAsync() { + loading = true; + errorData.text = ""; + errorData.title = ""; + const response = await create_account(formData); + loading = false; + if (response.ok) { + await goto("/home"); + return; + } + errorData.title = response.data?.title ?? $LL.unexpectedError(); + errorData.text = response.data?.text ?? $LL.tryAgainSoon(); + } +</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.signUpPage.createYourNewAccount()} + </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"> + <Alert + title={errorData.title} + message={errorData.text} + type="error" + class="mb-2" + visible={showErrorAlert} + /> + <form class="space-y-6" on:submit|preventDefault={submitFormAsync}> + <Input + label={$LL.emailAddress()} + id="email" + name="email" + autocomplete="email" + required + type="email" + bind:value={formData.username} + /> + + <Input + label={$LL.password()} + id="password" + name="password" + required + type="password" + bind:value={formData.password} + /> + <Button type="submit" text={$LL.submit()} {loading} fullWidth /> + </form> + </div> + </div> +</div> |