aboutsummaryrefslogtreecommitdiff
path: root/fe/src/lib/LoginForm.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'fe/src/lib/LoginForm.svelte')
-rw-r--r--fe/src/lib/LoginForm.svelte64
1 files changed, 64 insertions, 0 deletions
diff --git a/fe/src/lib/LoginForm.svelte b/fe/src/lib/LoginForm.svelte
new file mode 100644
index 0000000..22c0faf
--- /dev/null
+++ b/fe/src/lib/LoginForm.svelte
@@ -0,0 +1,64 @@
1<script lang='ts'>
2import { token } from '../stores/auth';
3import Card from './Card.svelte';
4
5let user = {
6 username: '',
7 password: ''
8}
9
10let error;
11
12interface CredentialObject {
13 username: string;
14 password: string;
15}
16
17function prepareCredentials ({ username, password }: CredentialObject): string {
18 return btoa(`${username}:${password}`);
19}
20
21async function onSubmit (e) {
22 if (!user.username || !user.password) {
23 error = 'please enter your username and password';
24 return;
25 }
26 const auth = prepareCredentials(user);
27
28 const response = await fetch('http://localhost:8080/api/v1/auth', {
29 method: 'POST',
30 headers: {
31 'Authorization': `Basic ${auth}`,
32 },
33 });
34
35 if (response.status === 401) {
36 error = "Your username or password is wrong";
37 return;
38 }
39
40 if (response.ok) {
41 const { token: apiToken } = await response.json();
42 token.authenticate(apiToken);
43 }
44
45 error = null;
46}
47</script>
48
49<Card>
50 <form class="form" on:submit|preventDefault={onSubmit}>
51 <div class='form input group'>
52 <label for="username">Username</label>
53 <input bind:value={user.username} id="username" name='username' type="text" autocomplete="username" />
54 </div>
55 <div class='form input group'>
56 <label for="password">Password</label>
57 <input bind:value={user.password} id="password" name='password' type="password" autocomplete="current-password"/>
58 </div>
59 {#if error}
60 <p class="error">{error}</p>
61 {/if}
62 <button type="submit">Log in</button>
63 </form>
64</Card>