add admin login

src/hooks.server.ts

@@ -1,4 +1,25 @@
 import { sequelize } from '$lib/server/database';
+import type { Handle } from '@sveltejs/kit';
+import { env } from '$env/dynamic/public';
+import { hasSession } from '$lib/server/session';
 
 // make sure that the database and tables exist
 await sequelize.sync();
+
+export const handle: Handle = async ({ event, resolve }) => {
+	if (
+		event.url.pathname.startsWith(`${env.PUBLIC_BASE_PATH}/admin`) &&
+		event.url.pathname != `${env.PUBLIC_BASE_PATH}/admin/login`
+	) {
+		if (!hasSession(event.cookies.get('session') || '')) {
+			return new Response(null, {
+				status: 302,
+				headers: {
+					location: `${env.PUBLIC_BASE_PATH}/admin/login`
+				}
+			});
+		}
+	}
+
+	return resolve(event);
+};

src/lib/components/Input/Input.svelte

@@ -31,10 +31,11 @@
 					</span>
 				</label>
 			{/if}
-			<div class="flex items-center">
+			<div class="flex items-center" class:sm:max-w-[16rem]={type !== 'checkbox'}>
 				<input
 					class:checkbox={type === 'checkbox'}
-					class:input,input-bordered,w-[100%],sm:max-w-[16rem]={type !== 'checkbox'}
+					class:input,input-bordered={type !== 'checkbox'}
+					class:w-[100%]={initialType !== 'password' && initialType !== 'checkbox'}
 					class:pr-11={initialType === 'password'}
 					{id}
 					{name}

src/lib/components/Toast/ErrorToast.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { IconOutline } from 'svelte-heros-v2';
+	import { fly } from 'svelte/transition';
+	import { onDestroy } from 'svelte';
+
+	export let timeout = 2000;
+	export let show = false;
+
+	export function reset() {
+		progressValue = 1;
+	}
+
+	let progressValue = 100;
+	let intervalClear: ReturnType<typeof setInterval> | undefined;
+
+	function startTimout() {
+		intervalClear = setInterval(() => {
+			if (++progressValue > 100) {
+				clearInterval(intervalClear);
+				show = false;
+				progressValue = 100;
+			}
+		}, timeout / 100);
+	}
+
+	$: if (show) {
+		progressValue = 0;
+		startTimout();
+	}
+
+	onDestroy(() => clearInterval(intervalClear));
+</script>
+
+{#if show && progressValue !== 0}
+	<div
+		in:fly={{ x: 0, duration: 200 }}
+		out:fly={{ x: 400, duration: 400 }}
+		class="toast"
+		on:mouseenter={() => {
+			clearInterval(intervalClear);
+			progressValue = 1;
+		}}
+		on:mouseleave={startTimout}
+		role="alert"
+	>
+		<div class="alert alert-error border-none relative text-gray-900 overflow-hidden">
+			<div class="flex gap-2 z-10">
+				<IconOutline name="exclamation-circle-outline" />
+				<span>Nutzername oder Passwort falsch</span>
+			</div>
+			<progress
+				class="progress progress-error absolute bottom-0 h-[3px] w-full bg-[rgba(0,0,0,0.6)]"
+				value={progressValue}
+				max="100"
+			/>
+		</div>
+	</div>
+{/if}

src/lib/index.ts

@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.

src/lib/server/database.ts

@@ -1,37 +1,53 @@
-import { DataTypes, Sequelize } from 'sequelize';
+import { DataTypes } from 'sequelize';
 import { env } from '$env/dynamic/private';
 import { building, dev } from '$app/environment';
+import * as bcrypt from 'bcrypt';
+import { BeforeCreate, BeforeUpdate, Column, Model, Sequelize, Table } from 'sequelize-typescript';
+
+@Table({ modelName: 'user' })
+export class User extends Model {
+	@Column({ type: DataTypes.STRING, allowNull: false })
+	declare firstname: string;
+	@Column({ type: DataTypes.STRING, allowNull: false })
+	declare lastname: string;
+	@Column({ type: DataTypes.DATE, allowNull: false })
+	declare birthday: Date;
+	@Column({ type: DataTypes.STRING })
+	declare telephone: string;
+	@Column({ type: DataTypes.STRING, allowNull: false })
+	declare username: string;
+	@Column({ type: DataTypes.ENUM('java', 'bedrock', 'cracked'), allowNull: false })
+	declare playertype: 'java' | 'bedrock' | 'cracked';
+	@Column({ type: DataTypes.STRING })
+	declare password: string;
+	@Column({ type: DataTypes.UUIDV4 })
+	declare uuid: string;
+}
+
+@Table({ modelName: 'admin' })
+export class Admin extends Model {
+	@Column({ type: DataTypes.STRING, allowNull: false })
+	declare username: string;
+	@Column({ type: DataTypes.STRING, allowNull: false })
+	declare password: string;
+	@Column({ type: DataTypes.BIGINT, allowNull: false })
+	declare permissions: number;
+
+	@BeforeCreate
+	@BeforeUpdate
+	static hashPassword(instance: Admin) {
+		if (instance.password != null) {
+			instance.username = bcrypt.hashSync(instance.password, 10);
+		}
+	}
+
+	validatePassword(password: string): boolean {
+		return bcrypt.compareSync(password, this.password);
+	}
+}
 
 export const sequelize = new Sequelize(building ? 'sqlite::memory:' : env.DATABASE_URI, {
 	// only log sql queries in dev mode
-	logging: dev ? console.log : false
-});
-
-export const User = sequelize.define('user', {
-	firstname: {
-		type: DataTypes.STRING,
-		allowNull: false
-	},
-	lastname: {
-		type: DataTypes.STRING,
-		allowNull: false
-	},
-	birthday: {
-		type: DataTypes.DATE,
-		allowNull: false
-	},
-	telephone: DataTypes.STRING,
-	username: {
-		type: DataTypes.STRING,
-		allowNull: false
-	},
-	playertype: {
-		type: DataTypes.ENUM('java', 'bedrock', 'cracked'),
-		allowNull: false
-	},
-	password: DataTypes.TEXT,
-	uuid: {
-		type: DataTypes.UUIDV4,
-		allowNull: false
-	}
+	logging: dev ? console.log : false,
+	models: [User, Admin]
 });

src/lib/server/session.ts

@@ -0,0 +1,11 @@
+const sessions: string[] = [];
+
+export function addSession(): string {
+	const session = 'AAA';
+	sessions.push(session);
+	return session;
+}
+
+export function hasSession(session: string): boolean {
+	return sessions.find((v) => v == session) != undefined;
+}

src/routes/+layout.svelte

@@ -80,7 +80,9 @@
 />
 
 <main>
-	<slot />
+	<div class="h-screen w-full">
+		<slot />
+	</div>
 </main>
 <nav>
 	<div

src/routes/admin/+layout.svelte

@@ -0,0 +1,3 @@
+<div class="h-full">
+	<slot />
+</div>

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

@@ -0,0 +1,3 @@
+<div class="flex justify-center items-center w-full h-full">
+	<slot />
+</div>

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import Input from '$lib/components/Input/Input.svelte';
+	import { env } from '$env/dynamic/public';
+	import ErrorToast from '$lib/components/Toast/ErrorToast.svelte';
+	import { goto } from '$app/navigation';
+
+	let passwordValue: string;
+	async function login() {
+		// eslint-disable-next-line no-async-promise-executor
+		loginRequest = new Promise(async (resolve, reject) => {
+			const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/login`, {
+				method: 'POST',
+				body: new FormData(document.forms[0])
+			});
+			if (response.ok) {
+				await goto(`${env.PUBLIC_BASE_PATH}/admin`);
+				resolve();
+			} else if (response.status == 403) {
+				passwordValue = '';
+				showError = true;
+				errorToastElement.reset();
+				resolve();
+			} else {
+				reject(Error(`${response.statusText} (${response.status})`));
+			}
+			loginRequest = null;
+		});
+	}
+
+	let loginRequest: Promise<void> | null = null;
+	let showError = false;
+	let errorToastElement: ErrorToast;
+</script>
+
+<div class="card px-14 py-6 shadow-lg">
+	<h1 class="text-center text-4xl mt-2 mb-4">Craftattack Admin Login</h1>
+	<form class="flex flex-col items-center" on:submit|preventDefault={login}>
+		<div class="flex flex-col justify-center items-center">
+			<div class="grid gap-4">
+				<Input id="username" name="username" type="text" required={true}>
+					<span slot="label">Nutzername</span>
+				</Input>
+				<Input
+					id="password"
+					name="password"
+					type="password"
+					required={true}
+					bind:value={passwordValue}
+				>
+					<span slot="label">Passwort</span>
+				</Input>
+			</div>
+		</div>
+		<div class="grid w-min mt-6">
+			<div class="row-[1] col-[1]">
+				<Input id="submit" type="submit" value="Login" disabled={loginRequest !== null} />
+			</div>
+			{#key loginRequest}
+				{#if loginRequest}
+					{#await loginRequest}
+						<span
+							class="relative top-[calc(50%-12px)] left-[calc(50%-12px)] row-[1] col-[1] loading loading-ring"
+						/>
+					{:catch error}
+						<dialog
+							class="modal"
+							on:close={() => setTimeout(() => (loginRequest = null), 200)}
+							open
+						>
+							<form method="dialog" class="modal-box">
+								<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+								<h3 class="font-bold text-lg">Error</h3>
+								<p class="py-4">{error.message}</p>
+							</form>
+							<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.2)]">
+								<button>close</button>
+							</form>
+						</dialog>
+					{/await}
+				{/if}
+			{/key}
+		</div>
+	</form>
+</div>
+
+<ErrorToast timeout={2000} bind:show={showError} bind:this={errorToastElement} />

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

@@ -0,0 +1,47 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import { Admin } from '$lib/server/database';
+import { env as publicEnv } from '$env/dynamic/public';
+import { env } from '$env/dynamic/private';
+import { addSession } from '$lib/server/session';
+
+export const POST = (async ({ request, cookies }) => {
+	const data = await request.formData();
+	const username = data.get('username') as string | null;
+	const password = data.get('password') as string | null;
+
+	if (username == null || password == null) {
+		return new Response(null, {
+			status: 403
+		});
+	}
+
+	if (
+		env.ADMIN_USER &&
+		env.ADMIN_PASSWORD &&
+		username == env.ADMIN_USER &&
+		password == env.ADMIN_PASSWORD
+	) {
+		cookies.set('session', addSession(), {
+			path: `${publicEnv.PUBLIC_BASE_PATH}/admin`,
+			maxAge: 60 * 60 * 24 * 90,
+			httpOnly: true,
+			secure: true
+		});
+		return new Response();
+	}
+
+	const user = await Admin.findOne({ where: { username: username } });
+	if (user && user.validatePassword(password)) {
+		cookies.set('session', addSession(), {
+			path: `${publicEnv.PUBLIC_BASE_PATH}/admin`,
+			maxAge: 60 * 60 * 24 * 90,
+			httpOnly: true,
+			secure: true
+		});
+		return new Response();
+	} else {
+		return new Response(null, {
+			status: 403
+		});
+	}
+}) satisfies RequestHandler;