aboutsummaryrefslogtreecommitdiff
path: root/fe/src/lib/forms/LoginForm.svelte
diff options
context:
space:
mode:
authorZach Berwaldt <zberwaldt@tutamail.com>2024-03-21 11:23:42 -0400
committerZach Berwaldt <zberwaldt@tutamail.com>2024-03-21 11:23:42 -0400
commitfd6f6f169f9ff9a1247228fb34dc9654a9584915 (patch)
tree4241792d4b41bc025807cab001a18a2d355e7ea3 /fe/src/lib/forms/LoginForm.svelte
parent655aeaac60c7dec09276f469904752c7dc58c8c5 (diff)
fix bugs, redo layout, reorg.
Diffstat (limited to 'fe/src/lib/forms/LoginForm.svelte')
-rw-r--r--fe/src/lib/forms/LoginForm.svelte86
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>