feat(frontend): Styling

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

frontend/.npmrc

@@ -1 +1,2 @@
 engine-strict=true
+auto-install-peers=true

frontend/src/lib/LoginForm.svelte

@@ -1,11 +1,19 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { useForm, validators, HintGroup, Hint, required } from 'svelte-use-form';
+	import {
+		Button,
+		FluidForm,
+		ToastNotification,
+		TextInput,
+		PasswordInput,
+		ButtonSet
+	} from 'carbon-components-svelte';
 
 	let promise: Promise<void>;
 
-	const form = useForm();
+	// const form = useForm();
 	$: submit = async (event: Event) => {
+		event.preventDefault();
 		// @ts-expect-error FormData makes tsc sad
 		const formData = new URLSearchParams(new FormData(event.target as HTMLFormElement));
 
@@ -24,10 +32,10 @@
 			});
 	};
 
-	export let api_endpoint: string, description: string;
+	export let api_endpoint: string, button: string, description: string;
 </script>
 
-<form use:form on:submit|preventDefault={submit}>
+<!-- <form use:form on:submit|preventDefault={submit} action="/api/{api_endpoint}">
 	<h1>{description}</h1>
 
 	<a href="/">Home</a>
@@ -43,20 +51,36 @@
 		<Hint on="required">Password is mandatory!</Hint>
 	</HintGroup>
 
-	<button disabled={!$form.valid}>Login</button>
-</form>
+	<button disabled={!$form.valid} type="submit" formmethod="post">{button}</button>
+</form> -->
+<h1>{description}</h1>
+<FluidForm on:submit={submit} action="/api/{api_endpoint}">
+	<TextInput type="username" name="username" labelText="Username" placeholder="Username" required />
+	<PasswordInput
+		required
+		type="password"
+		name="password"
+		labelText="Password"
+		placeholder="Password"
+	/>
+	<br />
+	<ButtonSet>
+		<Button type="submit" formmethod="post">{button}</Button>
+		{#if api_endpoint === 'login'}
+			<Button kind="ghost" href="/register">Register</Button>
+		{/if}
+	</ButtonSet>
+	{#await promise}
+		<p />
+	{:then}
+		<p />
+	{:catch error}
+		<ToastNotification title="Error" subtitle={error?.message} timeout={3000} />
+	{/await}
+</FluidForm>
 
-{#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 lang="scss">
+	:global(form) {
+		max-width: 25em;
 	}
 </style>

frontend/src/routes/+layout.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import 'carbon-components-svelte/css/g100.css';
+	import { Button, OverflowMenu, OverflowMenuItem } from 'carbon-components-svelte';
+	import Login from 'carbon-icons-svelte/lib/Login.svelte';
+	import Logout from 'carbon-icons-svelte/lib/Logout.svelte';
+	import Home from 'carbon-icons-svelte/lib/Home.svelte';
+</script>
+
+<nav id="login">
+	<a href="/"><Home /></a>
+	<OverflowMenu size="xl">
+		<OverflowMenuItem href="/login" hasDivider><Login />Login</OverflowMenuItem>
+		<OverflowMenuItem href="/logout"><Logout />Logout</OverflowMenuItem>
+	</OverflowMenu>
+</nav>
+
+<main>
+	<slot />
+</main>
+
+<style lang="scss">
+	nav {
+		// display: none;
+	}
+</style>

frontend/src/routes/+layout.ts

@@ -1 +1 @@
-export const prerender = true;
+export const prerender = true;

frontend/src/routes/+page.svelte

@@ -1,6 +1,4 @@
+<title>Pomme</title>
+
 <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

@@ -2,4 +2,4 @@
 	import LoginForm from '$lib/LoginForm.svelte';
 </script>
 
-<LoginForm api_endpoint="login" description="Login" />
+<LoginForm api_endpoint="login" description="Login!" button="Login" />

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

@@ -13,6 +13,8 @@
 	});
 </script>
 
+<h1>Logging out...</h1>
+<a href="/">Click here if you do not get redirected automatically.</a>
 {#await promise}
 	<p />
 {:then}

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

@@ -2,4 +2,4 @@
 	import LoginForm from '$lib/LoginForm.svelte';
 </script>
 
-<LoginForm api_endpoint="create" description="Register an Account" />
+<LoginForm api_endpoint="create" description="Register an Account" button="Register" />

frontend/svelte.config.js

@@ -1,11 +1,12 @@
 import adapter from '@sveltejs/adapter-static';
+import { optimizeImports } from 'carbon-preprocess-svelte';
 import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	preprocess: [vitePreprocess(), optimizeImports()],
 
 	kit: {
 		adapter: adapter()