UI improvements

src/lib/configuration.ts

@@ -4,6 +4,10 @@ let allowedDomains: string[]
 
 export const config = {
 
+    get enableRegister() {
+        return env.ENABLE_REGISTER === 'true';
+    },
+
     get allowableDomains() {
         if (!allowedDomains) {
             allowedDomains = env.ALLOWABLE_DOMAINS?.split(',') ?? [];

src/routes/login/+page.server.ts

@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
-import type { Actions } from './$types';
+import type { Actions, PageServerLoad } from './$types';
 import { createSession, setSessionTokenCookie } from '../../lib/session/session';
 import { db } from '../../db';
 import { usersTable } from '../../db/schema';
@@ -9,9 +9,16 @@ import { verify } from '@node-rs/argon2';
 import { generateRandomToken } from '$lib/randomToken';
 
 import debug from 'debug';
+import { config } from '$lib/configuration';
 
 let log = debug('login');
 
+export const load: PageServerLoad = () => {
+    return {
+        enableRegister: config.enableRegister
+    }
+}
+
 export const actions = {
     default: async (event) => {
         const formData = await event.request.formData();

src/routes/login/+page.svelte

@@ -1,10 +1,25 @@
-<h1 class="text-3xl">Login</h1>
-<div>
+<script>
+	import Link from '$lib/components/Link.svelte';
+	import Navbar from '$lib/components/Navbar.svelte';
+
+	const { data } = $props();
+</script>
+
+<Navbar title="Login" />
+
+<div class="flex h-screen items-center justify-center">
 	<form class="grid grid-cols-2 gap-1" method="POST">
 		<label for="name" class="justify-self-end">Email address</label>
 		<input type="email" name="email" id="email" class="justify-self-start" required />
 		<label for="password" class="justify-self-end">Password</label>
 		<input type="password" name="password" id="password" class="justify-self-start" required />
-		<button type="submit" class="col-span-2 w-40 justify-self-center bg-slate-200">Log In</button>
+		<button type="submit" class="col-span-2 mt-5 w-40 justify-self-center bg-slate-200 p-2"
+			>Log In</button
+		>
+		{#if data.enableRegister}
+			<span class="col-span-2 mt-3 justify-self-center text-xs">
+				<Link href="/register">Click here to register</Link>, if you do not have an account yet</span
+			>
+		{/if}
 	</form>
 </div>

src/routes/register/+page.server.ts

@@ -31,6 +31,6 @@ export const actions = {
             sendVerificationEmail(email, result.verificationCode);
         }
 
-        redirect(303, '/login');
+        redirect(303, '/register/success');
     }
 } satisfies Actions;

src/routes/register/+page.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
+	import Navbar from '$lib/components/Navbar.svelte';
+
 	let password = $state('');
 	let password_repeat = $state('');
 
 	const { data } = $props();
 </script>
 
-<h1 class="text-3xl">Register a new Account</h1>
+<Navbar title="Register a new Account" />
 <div>
 	<form class="grid grid-cols-2 gap-1" method="POST">
 		<label for="name" class="justify-self-end"

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

@@ -0,0 +1,9 @@
+<script>
+	import Navbar from '$lib/components/Navbar.svelte';
+</script>
+
+<Navbar title="Registration successful" />
+<p class="mx-10">
+	Your account has been registered successfully. An email has been sent to your email address to
+	activate the account. Please follow the instructions in the email to be able to log in.
+</p>

src/routes/verify/[verificationCode]/+page.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
+	import Link from '$lib/components/Link.svelte';
+	import Navbar from '$lib/components/Navbar.svelte';
+
 	const { data } = $props();
 </script>
 
-<h1 class="text-3xl">Verification successful</h1>
+<Navbar title="Verification successful" />
 <div>
-	Congratulations! You've successfully verified your account. <a href="/login">Click here</a> to log
-	in.
+	Congratulations! You've successfully verified your account. <Link href="/login">Click here</Link> to
+	log in.
 </div>