blob: eade96d8df8a77bd2fee8f7ee57380d10f1738f9 (
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
|
<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';
export let page;
let username = 'bob',
password = 'pw';
let revealPassword = false;
let url = {
Register: '/register',
'Sign in': '/login'
}[page];
let submit = async () => {
try {
let r = await post(url, { username, password });
if (!r.token) r = await post('/login', { username, password });
$token = r.token;
auth();
} catch (e) {
if (!e.message) e.message = 'Login failed';
failure(e.message);
}
};
$: 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">{page}</h1>
<form class="space-y-5" on:submit|preventDefault={submit}>
<div>
<label for="username" class="font-semibold">Username</label>
<!-- svelte-ignore a11y-autofocus -->
<input
type="text"
required
class="bg-primary p-4 rounded-2xl w-full"
bind:value={username}
autofocus
/>
</div>
<div class="relative">
<label for="password" class="block font-semibold">Password</label>
{#if revealPassword}
<input
type="text"
required
class="block bg-primary p-4 rounded-2xl w-full"
bind:value={password}
/>
{:else}
<input
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 page === 'Register'}
<p class="text-secondary text-sm">
We recommend a long, random password generated with a password manager.
</p>
{:else}
<div class="flex justify-end items-center">
<a href="/forgot" class="underline underline-offset-4 text-black text-sm"
>Forgot Password?</a
>
</div>
{/if}
<button type="submit" class="bg-black text-white w-full rounded-2xl p-4 font-semibold"
>{page}
</button>
</form>
<p class="text-secondary text-center font-medium">
{page === 'Register' ? 'Already have an account?' : "Don't have an account?"}
<a
href={page === 'Register' ? '/login' : '/register'}
class="block md:inline text-black underline underline-offset-4"
>
{page === 'Register' ? 'Sign in' : 'Register'}
</a>
</p>
</div>
</div>
</div>
|
