Merge pull request 'feat: login page' (#25) from login-page into master

Reviewed-on: https://git.freecumextremist.com/grumbulon/pomme/pulls/25

.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
+		}
+	]
+}

frontend/package.json

@@ -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",

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'}

frontend/src/lib/LoginForm.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { useForm, validators, HintGroup, Hint, required } from 'svelte-use-form';
+
+	let promise: Promise<void>;
+
+	const form = useForm();
+	$: submit = async (event: Event) => {
+		// @ts-expect-error FormData makes tsc sad
+		const formData = new URLSearchParams(new FormData(event.target as HTMLFormElement));
+
+		promise = self
+			.fetch(`/api/${api_endpoint}`, {
+				method: 'post',
+				body: formData
+			})
+			.then(async (response) => {
+				if (response.ok) {
+					goto('/');
+				} else {
+					const res = await response.json();
+					throw new Error(res.message);
+				}
+			});
+	};
+
+	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>
+
+{#await promise}
+	<p>Logging in...</p>
+{:then}
+	<p />
+{:catch error}
+	<p style="color: red">{error}</p>
+{/await}
+
+<style>
+	:global(.touched:invalid) {
+		border-color: red;
+		outline-color: red;
+	}
+</style>

frontend/src/routes/+layout.ts

@@ -1 +1,2 @@
 export const prerender = true;
+export const ssr = false;

frontend/src/routes/+page.svelte

@@ -1,2 +1,6 @@
 <h1>Welcome to pomme!</h1>
 <p>There will be something here one day :)</p>
+
+<a href="/login">Login</a>
+<a href="/register">Register</a>
+<a href="/logout">Logout</a>

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" />

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+
+	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}
+	<p />
+{:then}
+	<p />
+{:catch error}
+	<p style="color: red">{error}</p>
+{/await}

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" />

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'
+		}
 	}
 };