From eae82fb23516a7b0b1385f48823143938d00a018 Mon Sep 17 00:00:00 2001
From: Sam Therapy <sam@samtherapy.net>
Date: Tue, 31 Jan 2023 20:53:51 +0100
Subject: [PATCH 1/6] scaffolding for a login page

Signed-off-by: Sam Therapy <sam@samtherapy.net>
---
 .vscode/launch.json                       | 30 ++++++++++++++
 frontend/package.json                     |  3 +-
 frontend/pnpm-lock.yaml                   |  8 ++++
 frontend/src/app.d.ts                     |  4 ++
 frontend/src/lib/LoginForm.svelte         | 49 +++++++++++++++++++++++
 frontend/src/routes/+page.svelte          |  3 ++
 frontend/src/routes/login/+page.svelte    |  5 +++
 frontend/src/routes/register/+page.svelte |  5 +++
 frontend/vite.config.js                   |  6 +++
 9 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 .vscode/launch.json
 create mode 100644 frontend/src/lib/LoginForm.svelte
 create mode 100644 frontend/src/routes/login/+page.svelte
 create mode 100644 frontend/src/routes/register/+page.svelte

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..c2545ff
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,30 @@
+{
+	// Use IntelliSense to learn about possible attributes.
+	// Hover to view descriptions of existing attributes.
+	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Frontend",
+			"request": "launch",
+			"runtimeArgs": ["-F", "frontend", "dev"],
+			"runtimeExecutable": "pnpm",
+			"skipFiles": ["<node_internals>/**"],
+			"type": "node"
+		},
+		{
+			"name": "Backend",
+			"type": "go",
+			"request": "launch",
+			"mode": "auto",
+			"program": "${cwd}/cmd/pomme"
+		}
+	],
+	"compounds": [
+		{
+			"name": "Frontend & Backend",
+			"configurations": ["Frontend", "Backend"],
+			"stopAll": true
+		}
+	]
+}
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index 576c383..ba2da06 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,7 +3,7 @@
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "VITE_BASE_URL=http://localhost:3008 vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
 		"test": "playwright test",
@@ -27,6 +27,7 @@
 		"prettier-plugin-svelte": "^2.8.1",
 		"svelte": "^3.54.0",
 		"svelte-check": "^3.0.0",
+		"svelte-use-form": "^2.5.0",
 		"tslib": "^2.4.1",
 		"typescript": "^4.9.3",
 		"vite": "^4.0.0",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 29ef884..c18f7ad 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -14,6 +14,7 @@ specifiers:
   prettier-plugin-svelte: ^2.8.1
   svelte: ^3.54.0
   svelte-check: ^3.0.0
+  svelte-use-form: ^2.5.0
   tslib: ^2.4.1
   typescript: ^4.9.3
   vite: ^4.0.0
@@ -33,6 +34,7 @@ devDependencies:
   prettier-plugin-svelte: 2.9.0_ajxj753sv7dbwexjherrch25ta
   svelte: 3.55.0
   svelte-check: 3.0.1_svelte@3.55.0
+  svelte-use-form: 2.5.0
   tslib: 2.4.1
   typescript: 4.9.4
   vite: 4.0.3
@@ -1892,6 +1894,12 @@ packages:
       typescript: 4.9.4
     dev: true
 
+  /svelte-use-form/2.5.0:
+    resolution: {integrity: sha512-03elCJk7S1I6rouh/2PdHdlVN8JAthhnkxb/xNHrv4U5s4hp8k2AjTPSzZi7KlThRlZOwgWfCqKm+CR+8JQHlQ==}
+    dependencies:
+      svelte: 3.55.0
+    dev: true
+
   /svelte/3.55.0:
     resolution: {integrity: sha512-uGu2FVMlOuey4JoKHKrpZFkoYyj0VLjJdz47zX5+gVK5odxHM40RVhar9/iK2YFRVxvfg9FkhfVlR0sjeIrOiA==}
     engines: {node: '>= 8'}
diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts
index 26a9569..7b0e958 100644
--- a/frontend/src/app.d.ts
+++ b/frontend/src/app.d.ts
@@ -7,3 +7,7 @@ declare namespace App {
 	// interface PageData {}
 	// interface Platform {}
 }
+
+interface ImportMetaEnv {
+	VITE_BASE_URL: string;
+}
diff --git a/frontend/src/lib/LoginForm.svelte b/frontend/src/lib/LoginForm.svelte
new file mode 100644
index 0000000..c6a063c
--- /dev/null
+++ b/frontend/src/lib/LoginForm.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { useForm, validators, HintGroup, Hint, required } from 'svelte-use-form';
+
+	const form = useForm();
+
+	$: submit = async (event: Event) => {
+		// @ts-ignore
+		const formData = new URLSearchParams(new FormData(event.target as HTMLFormElement));
+
+		self
+			.fetch(`/api/${api_endpoint}`, {
+				method: 'post',
+				body: formData
+			})
+			.then((response) => response.json())
+			.catch((err) => {
+				console.error(err)
+			});
+	};
+
+	export let api_endpoint: string, description: string;
+</script>
+
+<form use:form on:submit|preventDefault={submit}>
+	<h1>{description}</h1>
+
+	<a href="/">Home</a>
+	<br /> <br />
+
+	<input type="username" name="username" use:validators={[required]} />
+	<HintGroup for="username">
+		<Hint on="required">Username is mandatory!</Hint>
+	</HintGroup>
+
+	<input type="password" name="password" use:validators={[required]} />
+	<HintGroup for="password">
+		<Hint on="required">Password is mandatory!</Hint>
+	</HintGroup>
+
+	<button disabled={!$form.valid}>Login</button>
+</form>
+
+
+<style>
+	:global(.touched:invalid) {
+		border-color: red;
+		outline-color: red;
+	}
+</style>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index a45d162..9883916 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,2 +1,5 @@
 <h1>Welcome to pomme!</h1>
 <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
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
new file mode 100644
index 0000000..37307f6
--- /dev/null
+++ b/frontend/src/routes/login/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import LoginForm from "$lib/LoginForm.svelte";
+</script>
+
+<LoginForm api_endpoint="login" description="Login"/>
\ No newline at end of file
diff --git a/frontend/src/routes/register/+page.svelte b/frontend/src/routes/register/+page.svelte
new file mode 100644
index 0000000..135c57b
--- /dev/null
+++ b/frontend/src/routes/register/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import LoginForm from "$lib/LoginForm.svelte";
+</script>
+
+<LoginForm api_endpoint="create" description="Register an Account"/>
\ No newline at end of file
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 652979f..5b06e8a 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -5,6 +5,12 @@ const config = {
 	plugins: [sveltekit()],
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}']
+	},
+	server: {
+		proxy: {
+			'/api': 'http://localhost:3008',
+			'/swagger': 'http://localhost:3008'
+		}
 	}
 };
 

From 445560d3762507aafc0463a4ce223bd90528c89e Mon Sep 17 00:00:00 2001
From: Sam Therapy <sam@samtherapy.net>
Date: Tue, 31 Jan 2023 20:58:51 +0100
Subject: [PATCH 2/6] get rid of not needed environment variable

Signed-off-by: Sam Therapy <sam@samtherapy.net>
---
 frontend/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/package.json b/frontend/package.json
index ba2da06..6ccb8a1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,7 +3,7 @@
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
-		"dev": "VITE_BASE_URL=http://localhost:3008 vite dev",
+		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
 		"test": "playwright test",

From 20cf03818d41acabb525b01045ac03a19752c313 Mon Sep 17 00:00:00 2001
From: Sam Therapy <sam@samtherapy.net>
Date: Tue, 31 Jan 2023 21:07:57 +0100
Subject: [PATCH 3/6] not  needed either

Signed-off-by: Sam Therapy <sam@samtherapy.net>
---
 frontend/src/app.d.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts
index 7b0e958..26a9569 100644
--- a/frontend/src/app.d.ts
+++ b/frontend/src/app.d.ts
@@ -7,7 +7,3 @@ declare namespace App {
 	// interface PageData {}
 	// interface Platform {}
 }
-
-interface ImportMetaEnv {
-	VITE_BASE_URL: string;
-}

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 4/6] 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" />

From 5328d3f4edaed4118bc0ca936a707651ecad5851 Mon Sep 17 00:00:00 2001
From: Sam Therapy <sam@samtherapy.net>
Date: Tue, 31 Jan 2023 23:00:53 +0100
Subject: [PATCH 5/6] fix build + fix lint

Signed-off-by: Sam Therapy <sam@samtherapy.net>
---
 frontend/src/lib/LoginForm.svelte       |  2 +-
 frontend/src/routes/logout/+page.svelte | 22 ++++++++++------------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/LoginForm.svelte b/frontend/src/lib/LoginForm.svelte
index 799bc46..6fb6f81 100644
--- a/frontend/src/lib/LoginForm.svelte
+++ b/frontend/src/lib/LoginForm.svelte
@@ -6,7 +6,7 @@
 
 	const form = useForm();
 	$: submit = async (event: Event) => {
-		// @ts-ignore
+		// @ts-expect-error FormData makes tsc sad
 		const formData = new URLSearchParams(new FormData(event.target as HTMLFormElement));
 
 		promise = self
diff --git a/frontend/src/routes/logout/+page.svelte b/frontend/src/routes/logout/+page.svelte
index d9df620..6b39660 100644
--- a/frontend/src/routes/logout/+page.svelte
+++ b/frontend/src/routes/logout/+page.svelte
@@ -1,18 +1,16 @@
 <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);
-			}
-		});
+	let promise = 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}

From 1a97dc9172caab716cc958566974cca034f848c6 Mon Sep 17 00:00:00 2001
From: Sam Therapy <sam@samtherapy.net>
Date: Wed, 1 Feb 2023 20:29:29 +0100
Subject: [PATCH 6/6] disable server-side rendering

Signed-off-by: Sam Therapy <sam@samtherapy.net>
---
 frontend/src/routes/+layout.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/routes/+layout.ts b/frontend/src/routes/+layout.ts
index 189f71e..ceccaaf 100644
--- a/frontend/src/routes/+layout.ts
+++ b/frontend/src/routes/+layout.ts
@@ -1 +1,2 @@
 export const prerender = true;
+export const ssr = false;