blob: 9e2f6e749a31c25ac79f97f3f26707cdcf0d2139 (
plain) (
blame)
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
|
<script lang="ts">
import { goto } from "$app/navigation";
import { login } from "$lib/api/user";
import LL from "$lib/i18n/i18n-svelte";
import type { ErrorResult } from "$lib/models/ErrorResult";
import type { LoginPayload } from "$lib/models/LoginPayload";
const data = {
username: "",
password: "",
} as LoginPayload;
let error = {
text: "",
title: "",
} as ErrorResult;
async function submitFormAsync() {
error = { text: "", title: "" };
const loginResponse = await login(data);
if (loginResponse.ok) {
await goto("/home");
} else {
error.title = loginResponse.data.title;
error.text = loginResponse.data.text;
}
}
</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.login.loginToYourAccount()}
</h2>
<p class="mt-2 text-center text-sm text-gray-600">
{$LL.common.or()}
<a
href="/signup"
class="font-medium text-indigo-600 hover:text-indigo-500"
>{$LL.login.createANewAccount()}</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-800">
{error.title}
</h3>
{/if}
{#if error.text}
<div class="mt-2 text-sm text-red-700">
{error.text}
</div>
{/if}
</div>
{/if}
<form class="space-y-6" on:submit|preventDefault={submitFormAsync}>
<div>
<label
for="email"
class="block text-sm font-medium text-gray-700"
>{$LL.common.emailAddress()}</label
>
<div class="mt-1">
<input
id="email"
name="email"
type="email"
autocomplete="email"
required
value={data.username}
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
</div>
<div>
<label
for="password"
class="block text-sm font-medium text-gray-700"
>{$LL.login.password()}</label
>
<div class="mt-1">
<input
id="password"
name="password"
type="password"
autocomplete="current-password"
required
value={data.password}
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input
id="remember-me"
name="remember-me"
type="checkbox"
class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
/>
<label
for="remember-me"
class="ml-2 block text-sm text-gray-900"
>{$LL.login.notMyComputer()}</label
>
</div>
<div class="text-sm">
<a
href="/reset"
class="font-medium text-indigo-600 hover:text-indigo-500"
>{$LL.login.forgotPassword()}</a
>
</div>
</div>
<div>
<button
type="submit"
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
{$LL.common.logIn()}
</button>
</div>
</form>
</div>
</div>
</div>
|
