redirect + error print + logout

Signed-off-by: Sam Therapy <sam@samtherapy.net>

frontend/src/lib/LoginForm.svelte

@@ -1,20 +1,26 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { useForm, validators, HintGroup, Hint, required } from 'svelte-use-form';
 
-	const form = useForm();
+	let promise: Promise<void>;
 
+	const form = useForm();
 	$: submit = async (event: Event) => {
 		// @ts-ignore
 		const formData = new URLSearchParams(new FormData(event.target as HTMLFormElement));
 
-		self
+		promise = self
 			.fetch(`/api/${api_endpoint}`, {
 				method: 'post',
 				body: formData
 			})
-			.then((response) => response.json())
-			.catch((err) => {
-				console.error(err)
+			.then(async (response) => {
+				if (response.ok) {
+					goto('/');
+				} else {
+					const res = await response.json();
+					throw new Error(res.message);
+				}
 			});
 	};
 
@@ -40,6 +46,13 @@
 	<button disabled={!$form.valid}>Login</button>
 </form>
 
+{#await promise}
+	<p>Logging in...</p>
+{:then}
+	<p />
+{:catch error}
+	<p style="color: red">{error}</p>
+{/await}
 
 <style>
 	:global(.touched:invalid) {

frontend/src/routes/+page.svelte

@@ -2,4 +2,5 @@
 <p>There will be something here one day :)</p>
 
 <a href="/login">Login</a>
-<a href="/register">Register</a>
+<a href="/register">Register</a>
+<a href="/logout">Logout</a>

frontend/src/routes/login/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import LoginForm from "$lib/LoginForm.svelte";
+	import LoginForm from '$lib/LoginForm.svelte';
 </script>
 
-<LoginForm api_endpoint="login" description="Login"/>
+<LoginForm api_endpoint="login" description="Login" />

frontend/src/routes/logout/+page.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+
+	let promise = self
+		.fetch(`/api/logout`, {
+			method: 'post'
+		})
+		.then(async (response) => {
+			if (response.ok) {
+				goto('/');
+			} else {
+				const res = await response.json();
+				throw new Error(res.message);
+			}
+		});
+</script>
+
+{#await promise}
+	<p />
+{:then}
+	<p />
+{:catch error}
+	<p style="color: red">{error}</p>
+{/await}

frontend/src/routes/register/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import LoginForm from "$lib/LoginForm.svelte";
+	import LoginForm from '$lib/LoginForm.svelte';
 </script>
 
-<LoginForm api_endpoint="create" description="Register an Account"/>
+<LoginForm api_endpoint="create" description="Register an Account" />