diff options
author | Zach Berwaldt <zberwaldt@tutamail.com> | 2024-03-21 11:23:42 -0400 |
---|---|---|
committer | Zach Berwaldt <zberwaldt@tutamail.com> | 2024-03-21 11:23:42 -0400 |
commit | fd6f6f169f9ff9a1247228fb34dc9654a9584915 (patch) | |
tree | 4241792d4b41bc025807cab001a18a2d355e7ea3 /fe/src/lib/forms/LoginForm.svelte | |
parent | 655aeaac60c7dec09276f469904752c7dc58c8c5 (diff) |
fix bugs, redo layout, reorg.
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> | ||