[web] Improve login page

web/src/routes/admin/+layout.svelte

@@ -1,3 +1,17 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+
+	async function onLogout() {
+		const res = await fetch('/logout', { method: 'POST' });
+		if (res.status === 200) {
+			const resData = await res.json();
+			if (resData.success === true) {
+				goto('/login');
+			}
+		}
+	}
+</script>
+
 <header style="font-size: 24px" class="mt-2 d-flex align-items-center justify-content-center">
 	<ul class="nav col-12 col-md-auto justify-content-center">
 		<li><a href="/admin" class="nav-link px-2">Home</a></li>
@@ -7,7 +21,7 @@
 		<li><a href="/admin/scoreboard" class="nav-link px-2">Scoreboards</a></li>
 		<li><a href="/admin/teams" class="nav-link px-2">Teams</a></li>
 		<li><a href="/admin/contests" class="nav-link px-2">Contests</a></li>
-		<li><a href="/logout" class="nav-link px-2" data-sveltekit-preload-data="off">Logout</a></li>
+		<li><button on:click={onLogout} class="nav-link px-2">Logout</button></li>
 	</ul>
 </header>
 <hr />

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

@@ -4,13 +4,16 @@ import { attemptLogin } from '$lib/server/auth';
 export const actions = {
 	login: async ({ cookies, request }) => {
 		const data = await request.formData();
-		const username = data.get('username')?.toString();
-		const password = data.get('password')?.toString();
-		if (!username || !password) {
-			return { success: false };
+		const formUsername = data.get('username');
+		const formPassword = data.get('password');
+		if (formUsername === null || formPassword === null) {
+			return { success: false, message: 'Incomplete form data' };
 		}
-		if ((await attemptLogin(cookies, username, password)) !== true) {
-			return { success: false };
+		if (
+			(await attemptLogin(cookies, formUsername.toString().trim(), formPassword.toString())) !==
+			true
+		) {
+			return { success: false, message: 'Invalid login' };
 		} else {
 			return { success: true };
 		}

web/src/routes/login/+page.svelte

@@ -1,37 +1,73 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
 	import { enhance } from '$app/forms';
 	import { goto } from '$app/navigation';
-	import type { ActionData } from './$types';
-	export let form: ActionData;
+	import type { Actions } from './$types';
+	import { slide, fly } from 'svelte/transition';
 
-	$: if (browser) {
-		if (form && form.success) {
-			goto('/admin/reviews');
+	export let form: Actions;
+
+	let dismissed = false;
+
+	$: if (form) {
+		if (form.success) {
+			goto('/admin');
 		}
+		dismissed = false;
 	}
 </script>
 
-<div class="mt-4 row justify-content-center">
-	<div class="col-4">
-		<h1>Login</h1>
-		<form method="POST" action="?/login" use:enhance>
-			<label for="username_field" class="form-label">Username</label>
-			<input type="text" name="username" class="form-control" id="username_field" />
-
-			<label for="password_field" class="form-label">Password</label>
-			<input type="password" name="password" class="form-control" id="password_field" />
-
-			<div class="mt-2">
+<div transition:fly|global={{ y: -50 }} class="container login-modal bg-body-tertiary">
+	<h1 class="mt-3 text-center">BW Contest Admin</h1>
+	{#if form && !dismissed}
+		<div
+			transition:slide|global
+			class={`mt-4 alert alert-dismissible alert-${form.success ? 'success' : 'danger'}`}
+		>
+			{form.success ? 'Success' : form.message ?? 'Unknown Error'}
+			<button
+				on:click={() => {
+					dismissed = true;
+				}}
+				type="button"
+				class="btn-close"
+				aria-label="Close"
+			/>
+		</div>
+	{/if}
+	<form class="mt-4" action="?/login" method="POST" use:enhance>
+		<div class="form-floating">
+			<input
+				name="username"
+				type="text"
+				class="form-control"
+				id="usernameInput"
+				placeholder="Username"
+			/>
+			<label for="usernameInput">Username</label>
+		</div>
+		<div class="mt-4 form-floating">
+			<input
+				name="password"
+				type="password"
+				class="form-control"
+				id="passwordInput"
+				placeholder="Password"
+			/>
+			<label for="passwordInput">Password</label>
+		</div>
+		<div class="d-flex flex-row mt-4 mb-4 justify-content-end">
 			<button type="submit" class="btn btn-primary">Login</button>
 		</div>
 	</form>
-		<div class="mt-2">
-			{#if form?.success}
-				<div class="alert alert-success" role="alert">Success!</div>
-			{:else if form && !form.success}
-				<div class="alert alert-danger" role="alert">Invalid login</div>
-			{/if}
-		</div>
-	</div>
 </div>
+
+<style>
+	.login-modal {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 300px;
+		border-radius: 10px;
+	}
+</style>

web/src/routes/logout/+page.server.ts

@@ -1,8 +0,0 @@
-import { redirect } from '@sveltejs/kit';
-import type { PageServerLoad } from './$types';
-import { logout } from '$lib/server/auth';
-
-export const load = (async ({ cookies }) => {
-	await logout(cookies);
-	throw redirect(302, '/login');
-}) satisfies PageServerLoad;

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

@@ -1 +0,0 @@
-<h1>Logging Out</h1>

web/src/routes/logout/+server.ts

@@ -0,0 +1,8 @@
+import { logout } from '$lib/server/auth';
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+
+export const POST = (async ({ cookies }) => {
+	await logout(cookies);
+	return json({ success: true });
+}) satisfies RequestHandler;