blob: 48e8096aa8109294219e84e41565ef5468fbc384 (
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
|
<script>
import { Icon } from '$comp';
export let page;
let revealPassword = false;
</script>
<div class="pt-10">
<a href="/">
<Icon icon="logo" style="mx-auto mb-10" />
</a>
<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">
<div>
<label for="username" class="font-semibold">Username</label>
<input type="text" required class="bg-input p-4 rounded-2xl w-full" />
</div>
<div class="relative">
<label for="password" class="block font-semibold">Password</label>
<input
type={revealPassword ? 'text' : 'password'}
required
class="block bg-input p-4 rounded-2xl w-full"
/>
<button
type="button"
on:click={() => (revealPassword = !revealPassword)}
class="absolute right-5 top-10"
>
<Icon icon="eye" />
</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="" 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>
|
