1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
<script context="module" lang="ts">
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",
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">
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";
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.signUpForm} 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>
|
