blob: de8863145e1e1ca96b4dbba3e6d10721d2ef8411 (
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
|
<script>
import { enhance } from '$app/forms';
import { Icon } from '$comp';
import { focus } from '$lib/utils';
import { redirect } from '$lib/store';
import { t } from '$lib/translations';
export let form;
export let pageID;
let username,
password,
email,
twofa = '';
let revealPassword = false;
let action = {
register: '/register',
signIn: '/login'
}[pageID];
</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>
{#if form?.error}
Login failed
{/if}
<form class="space-y-5" {action} method="POST" use:enhance>
{#if $redirect}
<input type="hidden" name="redirect" value={$redirect} />
{/if}
<div>
<label for="username" class="font-semibold">{$t('login.username')}</label>
<input
name="username"
type="text"
required
class="bg-primary"
bind:value={username}
use:focus
autocapitalize="none"
/>
</div>
<div class="relative">
<label for="password" class="block font-semibold">{$t('login.password')}</label>
{#if revealPassword}
<input
name="password"
type="text"
required
class="bg-primary"
bind:value={password}
autocapitalize="none"
/>
{:else}
<input
name="password"
type="password"
required
class="bg-primary"
bind:value={password}
autocapitalize="none"
/>
{/if}
<button
type="button"
on:click={() => (revealPassword = !revealPassword)}
class="absolute right-5 top-10"
>
<Icon icon={revealPassword ? 'eye' : 'eye-off'} />
</button>
</div>
{#if pageID === 'signIn'}
<div>
<label for="token" class="font-semibold"
>{$t('login.token')}
<span class="text-secondary">({$t('login.optional')})</span></label
>
<input name="token" type="text" class="bg-primary" bind:value={twofa} />
</div>
{/if}
{#if pageID === 'register'}
<p class="text-secondary text-sm">
{$t('login.passwordRecommendation')}
</p>
{:else}
<!-- TODO -->
<!-- <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 hover:opacity-80"
>{$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 hover:opacity-80"
>
{pageID === 'register' ? $t('login.signIn') : $t('login.register')}
</a>
</p>
</div>
</div>
</div>
|
