..
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 { SignedOut } from "sveltefire";
import { getFirebaseErrorMessage } from "$lib/firebase/errors";
import type { Auth } from "firebase/auth";
import type { FirebaseError } from "firebase/app";
import { authHandler } from "$lib/pagoda/auth";
let errorString: string | null = null;
const authorize = async (auth: Auth, event: SubmitEvent) => {
event.preventDefault();
const response: FirebaseError | null = await authHandler(auth, event);
if (response !== null) {
console.log(response.code, response.message);
errorString = getFirebaseErrorMessage(response.code);
} else {
errorString = null;
}
};
</script>
<SignedOut let:auth>
<div class="login-form text-l uppercase font-bold mb-8">
<form on:submit={(event) => authorize(auth, event)} class="flex flex-col">
<div class="form-group bg-black flex flex-row">
<label for="email" class="text-pagodapurple-shine saira w-1/3"
>Email</label
>
<input
type="email"
name="email"
id="email"
class=" text-pagodapurple-shine w-2/3 text-xs font-normal outline-none bg-black"
placeholder="email"
required
/>
</div>
<div class="form-group bg-black mt-4 flex flex-row">
<label for="password" class="text-pagodapurple-shine saira w-1/3"
>Password</label
>
<input
type="password"
name="password"
id="password"
class=" text-pagodapurple-shine w-2/3 text-xs font-normal outline-none bg-black"
placeholder="password"
required
/>
</div>
<div class="form-group bg-black mt-4 flex flex-row gap-1">
<button
type="submit"
value="Login"
class="bg-pagodapink w-full text-white rounded-bl-xl py-1 px-2 saira uppercase font-bold hover:bg-pagodapurple transition-all ease-in-out duration-300"
>
Login
</button>
<button
type="submit"
value="Register"
class="bg-pagodapurple w-full text-white rounded-br-xl py-1 px-2 saira uppercase font-bold hover:bg-pagodapink transition-all ease-in-out duration-300"
>Register</button
>
</div>
</form>
{#if errorString !== null}
<small class="text-red-400 text-xs mt-4 text-transform: normal-case">
{errorString}
</small>
{/if}
<p class="text-xs mt-4 text-transform: normal-case">
<a
class="text-pagodapurple-shine font-normal underline"
href="/auth/forgot-password">Forgot password?</a
>
</p>
</div>
</SignedOut>
<div class="navigation-header saira text-xl gap-2 flex flex-row">
<div class="bg-pagodagreen rounded-tl-2xl rounded-bl-2xl px-4"></div>
<div>NAVIGATION</div>
<div class="bg-pagodapink flex-grow rounded-tr-2xl"></div>
</div>
<div
class="navigation-nav saira text-l uppercase font-bold border-r-8 border-b-2 ml-8 border-solid border-pagodapink bg-pagodapink rounded-br mb-8"
>
<div
class="nav-item text-right text-pagodagreen group hover:text-pagodagreen-shine bg-black rounded-tr-xl py-1 flex flex-row gap-2 justify-end transition-all ease-in-out hover:gap-4 duration-300"
>
<a href="/">Home</a>
<span class="text-black group-hover:text-pagodapink-shine"> ▎</span>
</div>
<div
class="nav-item text-right text-pagodagreen group hover:text-pagodagreen-shine bg-black py-1 flex flex-row gap-2 justify-end transition-all ease-in-out hover:gap-4 duration-300"
>
<a href="/">Guilds</a>
<span class="text-black group-hover:text-pagodapink-shine"> ▎</span>
</div>
<div
class="nav-item text-right text-pagodagreen group hover:text-pagodagreen-shine bg-black py-1 flex flex-row gap-2 justify-end transition-all ease-in-out hover:gap-4 duration-300"
>
<a href="/">Shrines</a>
<span class="text-black group-hover:text-pagodapink-shine"> ▎</span>
</div>
<div
class="nav-item text-right text-pagodagreen group hover:text-pagodagreen-shine bg-black py-1 flex flex-row gap-2 justify-end transition-all ease-in-out hover:gap-4 duration-300"
>
<a href="/">Marketplace</a>
<span class="text-black group-hover:text-pagodapink-shine"> ▎</span>
</div>
<div
class="nav-item text-right text-pagodagreen group hover:text-pagodagreen-shine bg-black py-1 flex flex-row gap-2 justify-end transition-all ease-in-out hover:gap-4 duration-300"
>
<a href="/">Found a Guild</a>
<span class="text-black group-hover:text-pagodapink-shine"> ▎</span>
</div>
</div>
<!-- User Guild QuickLinks Section -->
<div class="guild-header saira text-xl gap-2 flex flex-row">
<div class="bg-pagodapurple rounded-tl-2xl rounded-bl-2xl px-4"></div>
<div>GUILDS</div>
<div class="bg-pagodagreen flex-grow rounded-tr-2xl rounded-br-2xl"></div>
</div>
<div class="guild-nav saira text-l uppercase font-bold mb-8">
<div
class="nav-item text-right text-pagodagreen group hover:text-pagodagreen-shine bg-black rounded-tr-xl py-1 flex flex-row gap-2 justify-end transition-all ease-in-out hover:gap-4 duration-300"
>
<a href="/">Guild 1</a>
<span class="text-black group-hover:text-pagodapurple-shine"> ▎</span>
</div>
</div>
|
|
