diff options
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/kit/src/routes/(main)/(public)/sign-in/+page.svelte | 61 | ||||
| -rw-r--r-- | apps/kit/src/routes/(main)/(public)/sign-in/test.ts | 12 | ||||
| -rw-r--r-- | apps/kit/tests/test.ts | 6 |
3 files changed, 44 insertions, 35 deletions
diff --git a/apps/kit/src/routes/(main)/(public)/sign-in/+page.svelte b/apps/kit/src/routes/(main)/(public)/sign-in/+page.svelte index 07ed0e0..101b49d 100644 --- a/apps/kit/src/routes/(main)/(public)/sign-in/+page.svelte +++ b/apps/kit/src/routes/(main)/(public)/sign-in/+page.svelte @@ -5,6 +5,18 @@ USER_DISABLED = "user-disabled", } export const messageQueryKey = "m"; + export const signInPageTestKeys = { + passwordInput: "password-input", + usernameInput: "username-input", + rememberMeCheckbox: "remember-me-checkbox", + signUpForm: "login-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", + }; </script> <script lang="ts"> @@ -14,6 +26,7 @@ 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"; let loading = false; @@ -25,34 +38,31 @@ persist: true, } as LoginPayload; - let error = { + 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 - ); + history.replaceState(null, "", window.location.origin + window.location.pathname); } }); async function submitFormAsync() { - error = { text: "", title: "" }; + errorData = { text: "", title: "" }; loading = true; data.persist = !data.persist; const loginResponse = await login(data); if (loginResponse.ok) { await goto("/home"); } else { - error.title = loginResponse.data.title; - error.text = loginResponse.data.text; + errorData.title = loginResponse.data.title; + errorData.text = loginResponse.data.text; } loading = false; } @@ -64,18 +74,21 @@ {#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 /> @@ -88,31 +101,19 @@ </h2> <p class="mt-2 text-sm text-gray-600"> {$LL.or().toLowerCase()} - <a href="/sign-up" 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 error.text || error.title} - <div class="rounded-md bg-red-50 p-3 mb-3"> - {#if error.title} - <h3 class="text-sm font-medium text-red-600"> - {error.title} - </h3> - {/if} - {#if error.text} - <div class="mt-2 text-sm text-red-500"> - {error.text} - </div> - {/if} - </div> + {#if showErrorAlert} + <Alert title={errorData.title} message={errorData.text} type="error" _pwKey={signInPageTestKeys.formErrorAlert} /> {/if} - <form class="space-y-6" on:submit|preventDefault={submitFormAsync}> + <form class="space-y-6" use:pwKey={signInPageTestKeys.signUpForm} on:submit|preventDefault={submitFormAsync}> <Input - id="email" - name="email" + id="username" + _pwKey={signInPageTestKeys.usernameInput} + name="username" type="email" label={$LL.emailAddress()} required @@ -124,6 +125,7 @@ name="password" type="password" label={$LL.password()} + _pwKey={signInPageTestKeys.passwordInput} autocomplete="current-password" required bind:value={data.password} @@ -132,12 +134,13 @@ <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"> + <a href="/reset-password" class="link" use:pwKey={signInPageTestKeys.resetPasswordAnchor}> {$LL.signInPage.resetPassword()} </a> </div> diff --git a/apps/kit/src/routes/(main)/(public)/sign-in/test.ts b/apps/kit/src/routes/(main)/(public)/sign-in/test.ts new file mode 100644 index 0000000..27af2ea --- /dev/null +++ b/apps/kit/src/routes/(main)/(public)/sign-in/test.ts @@ -0,0 +1,12 @@ +import { get_test_context } from "$lib/configuration"; +import { get_element_by_pw_key } from "$lib/helpers"; +import { test, expect } from "@playwright/test"; +import { signInPageTestKeys } from "./+page.svelte"; + +const context = get_test_context(); + +test("form loads", async ({ page }) => { + await page.goto("/sign-up"); + const formElement = get_element_by_pw_key(signInPageTestKeys.signUpForm); + expect(formElement).toBeTruthy(); +});
\ No newline at end of file diff --git a/apps/kit/tests/test.ts b/apps/kit/tests/test.ts deleted file mode 100644 index 4e57937..0000000 --- a/apps/kit/tests/test.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { expect, test } from '@playwright/test'; - -test('index page has expected h1', async ({ page }) => { - await page.goto('/'); - expect(await page.textContent('h1')).toBe('Welcome to SvelteKit'); -}); |