From 49c46f9f727dd59190b9a3980b9a0600167b93fb Mon Sep 17 00:00:00 2001
From: Sam Therapy <sam@samtherapy.net>
Date: Tue, 31 Jan 2023 22:46:45 +0100
Subject: [PATCH] redirect + error print + logout

Signed-off-by: Sam Therapy <sam@samtherapy.net>
---
 frontend/src/lib/LoginForm.svelte         | 23 +++++++++++++++++-----
 frontend/src/routes/+page.svelte          |  3 ++-
 frontend/src/routes/login/+page.svelte    |  4 ++--
 frontend/src/routes/logout/+page.svelte   | 24 +++++++++++++++++++++++
 frontend/src/routes/register/+page.svelte |  4 ++--
 5 files changed, 48 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/routes/logout/+page.svelte

diff --git a/frontend/src/lib/LoginForm.svelte b/frontend/src/lib/LoginForm.svelte
index c6a063c..799bc46 100644
--- a/frontend/src/lib/LoginForm.svelte
+++ b/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) {
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 9883916..350dab7 100644
--- a/frontend/src/routes/+page.svelte
+++ b/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>
\ No newline at end of file
+<a href="/register">Register</a>
+<a href="/logout">Logout</a>
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index 37307f6..190bf70 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/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"/>
\ No newline at end of file
+<LoginForm api_endpoint="login" description="Login" />
diff --git a/frontend/src/routes/logout/+page.svelte b/frontend/src/routes/logout/+page.svelte
new file mode 100644
index 0000000..d9df620
--- /dev/null
+++ b/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}
diff --git a/frontend/src/routes/register/+page.svelte b/frontend/src/routes/register/+page.svelte
index 135c57b..4da5eb7 100644
--- a/frontend/src/routes/register/+page.svelte
+++ b/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"/>
\ No newline at end of file
+<LoginForm api_endpoint="create" description="Register an Account" />