scaffolding for a login page

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

.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

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

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/app.d.ts

@@ -7,3 +7,7 @@ declare namespace App {
 	// interface PageData {}
 	// interface Platform {}
 }
+
+interface ImportMetaEnv {
+	VITE_BASE_URL: string;
+}

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>

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>

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