-
Notifications
You must be signed in to change notification settings - Fork 1
/
Login.svelte
101 lines (93 loc) · 2.81 KB
/
Login.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<script lang="ts">
import { Backend, clearToken, type LoginResponse } from "../lib/backend";
import { Button, Label, Input } from "flowbite-svelte";
import Cookies from "js-cookie";
import { onMount } from "svelte";
import { navigate } from "svelte-routing";
import { user } from "../lib/stores/user";
onMount(async () => {
/**
* Deletes the cookie and clears user store attributes upon entering the login page.
* Done here, because the log out button redirects to this page.
*/
clearToken();
Cookies.remove("auth");
$user.loggedIn = false;
$user.username = "";
$user.admin = false;
});
let email: string = "";
let password: string = "";
$: formValid = email.length > 0 && password.length > 0;
/**
* Gets run on pressing "Login" button or form submit (pressing enter)
*/
let result: LoginResponse | null = null;
async function submitForm() {
if (!formValid) return;
console.log("submitted");
try {
// Makes call to /users/login API endpoint, sending username and password in JSON format.
result = await Backend.login({
email,
password,
});
if (result == null) {
// If result is null, log to console. Don't expect this would happen.
console.log("Response is null");
alert("NULL response. This is probably our fault.");
} else if (result["error"] != "") {
// API returned an error. This either means the account doesn't exist, or user entered wrong username / password.
// @todo Display this in a better way than an alert popup.
console.log("Response received. Error: " + result["error"]);
alert(result["error"]);
} else if (result["token"] != "") {
// User entered the correct username and password.
console.log("Response received. Token: " + result["token"]);
Cookies.set("auth", result["token"]);
$user.loggedIn = true;
$user.username = email;
$user.admin = true;
navigate(`/proteins`);
} else {
// User got a result, but both the error and token field are empty. This indicates a bug on our end.
console.log(
"Unexpected edge cage regarding user authentication."
);
alert(
"Unexpected edge cage regarding user authentication. This is probably our fault."
);
}
} catch (e) {
alert([e]);
console.log(e);
}
}
</script>
<svelte:head>
<title>Login</title>
</svelte:head>
<form on:submit|preventDefault={submitForm} class="flex gap-5 flex-col p-5">
<div>
<Label for="email">Email</Label>
<Input
id="email"
style="width: 300px;"
bind:value={email}
placeholder="Enter your email..."
/>
</div>
<div>
<Label for="password">Password</Label>
<Input
type="password"
id="password"
style="width: 300px;"
bind:value={password}
placeholder="Enter your password..."
/>
</div>
<div>
<Button size="lg" type="submit" disabled={!formValid}>Login</Button>
</div>
</form>