Merge pull request 'feat(frontend): Styling' (#34) from frontend-styling into master

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

frontend/.npmrc

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

frontend/package.json

@@ -14,24 +14,27 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.28.1",
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/adapter-static": "^1.0.0",
-		"@sveltejs/kit": "^1.0.0",
-		"@typescript-eslint/eslint-plugin": "^5.45.0",
-		"@typescript-eslint/parser": "^5.45.0",
-		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte3": "^4.0.0",
-		"prettier": "^2.8.0",
-		"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",
-		"vitest": "^0.28.0"
+		"@playwright/test": "1.30.0",
+		"@sveltejs/adapter-auto": "2.0.0",
+		"@sveltejs/adapter-static": "2.0.1",
+		"@sveltejs/kit": "1.7.2",
+		"@typescript-eslint/eslint-plugin": "5.52.0",
+		"@typescript-eslint/parser": "5.52.0",
+		"carbon-components-svelte": "0.73.1",
+		"carbon-icons-svelte": "11.4.0",
+		"carbon-preprocess-svelte": "0.9.1",
+		"eslint": "8.34.0",
+		"eslint-config-prettier": "8.6.0",
+		"eslint-plugin-svelte3": "4.0.0",
+		"prettier": "2.8.4",
+		"prettier-plugin-svelte": "2.9.0",
+		"sass": "1.58.3",
+		"svelte": "3.55.1",
+		"svelte-check": "3.0.3",
+		"tslib": "2.5.0",
+		"typescript": "4.9.5",
+		"vite": "4.1.3",
+		"vitest": "0.28.5"
 	},
 	"type": "module"
 }

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,19 @@
+<script lang="ts">
+	import 'carbon-components-svelte/css/g100.css';
+	import { 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">
+	<OverflowMenu size="xl">
+		<OverflowMenuItem href="/"><Home />Home</OverflowMenuItem>
+		<OverflowMenuItem href="/login" hasDivider><Login />Login</OverflowMenuItem>
+		<OverflowMenuItem href="/logout"><Logout />Logout</OverflowMenuItem>
+	</OverflowMenu>
+</nav>
+
+<main>
+	<slot />
+</main>

frontend/src/routes/+layout.ts

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

frontend/src/routes/+page.svelte

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

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()

frontend/vite.config.ts

@@ -1,8 +1,8 @@
+import { optimizeCss } from 'carbon-preprocess-svelte';
 import { sveltekit } from '@sveltejs/kit/vite';
 
-/** @type {import('vite').UserConfig} */
-const config = {
-	plugins: [sveltekit()],
+const config: import('vite').UserConfig = {
+	plugins: [sveltekit(), process.env.NODE_ENV === 'production' && optimizeCss()],
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}']
 	},
@@ -11,6 +11,9 @@ const config = {
 			'/api': 'http://localhost:3008',
 			'/swagger': 'http://localhost:3008'
 		}
+	},
+	build: {
+		sourcemap: true
 	}
 };