diff options
Diffstat (limited to 'fe/src/lib/LoginForm.svelte')
-rw-r--r-- | fe/src/lib/LoginForm.svelte | 64 |
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'> | ||
2 | import { token } from '../stores/auth'; | ||
3 | import Card from './Card.svelte'; | ||
4 | |||
5 | let user = { | ||
6 | username: '', | ||
7 | password: '' | ||
8 | } | ||
9 | |||
10 | let error; | ||
11 | |||
12 | interface CredentialObject { | ||
13 | username: string; | ||
14 | password: string; | ||
15 | } | ||
16 | |||
17 | function prepareCredentials ({ username, password }: CredentialObject): string { | ||
18 | return btoa(`${username}:${password}`); | ||
19 | } | ||
20 | |||
21 | async 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> | ||