blob: d83ed21d16d021bb80003f4366961b85cad35027 (
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
|
<script>
import { Icon } from '$comp';
import { post, failure } from '$lib/utils';
import { user, token } from '$lib/store';
import { auth } from '$lib/socket';
import { goto } from '$app/navigation';
import { t } from '$lib/translations';
export let pageID;
let username = 'bob',
password = 'pw',
email = '[email protected]';
let revealPassword = false;
let action = {
register: '/register',
signIn: '/login'
}[pageID];
$: if ($user) goto(`/${username}/receive`);
</script>
<div class="pt-10">
<div class="w-[243px] mx-auto mb-10">
<a href="/">
<Icon icon="logo" />
</a>
</div>
<div class="flex justify-center items-center">
<div class="shadow-xl rounded-3xl p-10 pb-12 space-y-5 w-full mx-5 md:mx-0 md:w-[400px]">
<h1 class="text-2xl font-bold text-center">{$t('login.' + pageID)}</h1>
<form class="space-y-5" {action} method="POST">
{#if pageID === 'register'}
<div>
<label for="email" class="font-semibold">{$t('login.email')}</label>
<!-- svelte-ignore a11y-autofocus -->
<input
name="email"
type="email"
required
class="bg-primary p-4 rounded-2xl w-full"
bind:value={email}
autofocus
/>
</div>
{/if}
<div>
<label for="username" class="font-semibold">{$t('login.username')}</label>
<!-- svelte-ignore a11y-autofocus -->
<input
name="username"
type="text"
required
class="bg-primary p-4 rounded-2xl w-full"
bind:value={username}
autofocus={pageID === 'signIn'}
/>
</div>
<div class="relative">
<label for="password" class="block font-semibold">{$t('login.password')}</label>
{#if revealPassword}
<input
name="password"
type="text"
required
class="block bg-primary p-4 rounded-2xl w-full"
bind:value={password}
/>
{:else}
<input
name="password"
type="password"
required
class="block bg-primary p-4 rounded-2xl w-full"
bind:value={password}
/>
{/if}
<button
type="button"
on:click={() => (revealPassword = !revealPassword)}
class="absolute right-5 top-10"
>
<Icon icon={revealPassword ? 'eye' : 'eye-off'} />
</button>
</div>
{#if pageID === 'register'}
<p class="text-secondary text-sm">
{$t('login.passwordRecommendation')}
</p>
{:else}
<div class="flex justify-end items-center">
<a href="/forgot" class="underline underline-offset-4 text-black text-sm"
>{$t('login.forgotUserOrPassword')}</a
>
</div>
{/if}
<button type="submit" class="bg-black text-white w-full rounded-2xl p-4 font-semibold"
>{$t('login.' + pageID)}
</button>
</form>
<p class="text-secondary text-center font-medium">
{pageID === 'register' ? $t('login.haveAccount') : $t('login.noAccount')}
<a
href={pageID === 'register' ? '/login' : '/register'}
class="block md:inline text-black underline underline-offset-4"
>
{pageID === 'register' ? $t('login.signIn') : $t('login.register')}
</a>
</p>
</div>
</div>
</div>
|
