diff options
author | zberwaldt <17715430+zberwaldt@users.noreply.github.com> | 2024-03-21 11:25:44 -0400 |
---|---|---|
committer | GitHub <noreply@github.com> | 2024-03-21 11:25:44 -0400 |
commit | 7f9a8d74d7c0c66e7bf69892fbf893d45f1bfb82 (patch) | |
tree | 3e2355a4ec3d07df8337bcaf1ab9e500a1827b67 /fe/src/lib/forms/LoginForm.svelte | |
parent | 8cdb9b7f15afc69fe903f2be566bbc8f3605e53f (diff) | |
parent | e370616213d92b66685e0fdb0e76c97e08d0b1b6 (diff) |
Staging
Diffstat (limited to 'fe/src/lib/forms/LoginForm.svelte')
-rw-r--r-- | fe/src/lib/forms/LoginForm.svelte | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/fe/src/lib/forms/LoginForm.svelte b/fe/src/lib/forms/LoginForm.svelte new file mode 100644 index 0000000..88d4479 --- /dev/null +++ b/fe/src/lib/forms/LoginForm.svelte | |||
@@ -0,0 +1,86 @@ | |||
1 | <script lang="ts"> | ||
2 | import { token, user, preferences } from "../../stores/auth"; | ||
3 | import Card from "../Card.svelte"; | ||
4 | import { apiURL } from "../../utils"; | ||
5 | |||
6 | let credentials: CredentialObject = { | ||
7 | username: "", | ||
8 | password: "", | ||
9 | }; | ||
10 | |||
11 | let error: string | null = null; | ||
12 | |||
13 | interface CredentialObject { | ||
14 | username: string; | ||
15 | password: string; | ||
16 | } | ||
17 | |||
18 | function prepareCredentials({ | ||
19 | username, | ||
20 | password, | ||
21 | }: CredentialObject): string { | ||
22 | return btoa(`${username}:${password}`); | ||
23 | } | ||
24 | |||
25 | async function onSubmit(e: Event) { | ||
26 | if (!credentials.username || !credentials.password) { | ||
27 | error = "please enter your username and password"; | ||
28 | return; | ||
29 | } | ||
30 | const auth = prepareCredentials(credentials); | ||
31 | |||
32 | const response = await fetch(apiURL("auth"), { | ||
33 | method: "POST", | ||
34 | headers: { | ||
35 | Authorization: `Basic ${auth}`, | ||
36 | }, | ||
37 | }); | ||
38 | |||
39 | if (response.status === 401) { | ||
40 | error = "Your username or password is wrong"; | ||
41 | return; | ||
42 | } | ||
43 | |||
44 | if (response.ok) { | ||
45 | const { | ||
46 | token: apiToken, | ||
47 | user: userData, | ||
48 | preferences: userPreferences, | ||
49 | } = await response.json(); | ||
50 | user.setUser(userData); | ||
51 | preferences.setPreference(userPreferences); | ||
52 | token.authenticate(apiToken); | ||
53 | } | ||
54 | |||
55 | error = null; | ||
56 | } | ||
57 | </script> | ||
58 | |||
59 | <Card> | ||
60 | <form class="form" on:submit|preventDefault={onSubmit}> | ||
61 | <div class="form input group"> | ||
62 | <label for="username">Username</label> | ||
63 | <input | ||
64 | bind:value={credentials.username} | ||
65 | id="username" | ||
66 | name="username" | ||
67 | type="text" | ||
68 | autocomplete="username" | ||
69 | /> | ||
70 | </div> | ||
71 | <div class="form input group"> | ||
72 | <label for="password">Password</label> | ||
73 | <input | ||
74 | bind:value={credentials.password} | ||
75 | id="password" | ||
76 | name="password" | ||
77 | type="password" | ||
78 | autocomplete="current-password" | ||
79 | /> | ||
80 | </div> | ||
81 | {#if error} | ||
82 | <p class="error">{error}</p> | ||
83 | {/if} | ||
84 | <button type="submit">Log in</button> | ||
85 | </form> | ||
86 | </Card> | ||