20 changed files with 2452 additions and 2845 deletions
--- a/package.json
+++ b/package.json
@ -6,6 +6,7 @@
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
+		"test": "npm run test:integration && npm run test:unit",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
@ -16,40 +17,42 @@
 	"dependencies": {
 		"bits-ui": "^0.20.1",
 		"class-variance-authority": "^0.7.0",
-		"clsx": "^2.1.1",
+		"clsx": "^2.1.0",
 		"formsnap": "^0.5.1",
 		"lucide-svelte": "^0.363.0",
-		"mdsvex": "^0.11.2",
-		"mode-watcher": "^0.3.1",
+		"mdsvex": "^0.11.0",
+		"mode-watcher": "^0.3.0",
 		"svelte-boring-avatars": "^1.2.6",
-		"svelte-sonner": "^0.3.28",
-		"tailwind-merge": "^2.5.4",
+		"svelte-sonner": "^0.3.19",
+		"tailwind-merge": "^2.2.2",
 		"tailwind-variants": "^0.2.1",
-		"vaul-svelte": "^0.3.2"
+		"vaul-svelte": "^0.3.0"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-node": "^5.2.7",
-		"@sveltejs/kit": "^2.7.1",
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
-		"@tailwindcss/typography": "^0.5.15",
-		"@typescript-eslint/eslint-plugin": "^7.18.0",
-		"@typescript-eslint/parser": "^7.18.0",
-		"autoprefixer": "^10.4.20",
-		"boring-avatars": "^1.11.2",
-		"eslint": "^8.57.1",
+		"@playwright/test": "^1.42.1",
+		"@sveltejs/adapter-node": "^5.0.1",
+		"@sveltejs/kit": "^2.5.4",
+		"@sveltejs/vite-plugin-svelte": "^3.0.2",
+		"@tailwindcss/typography": "^0.5.10",
+		"@typescript-eslint/eslint-plugin": "^7.3.1",
+		"@typescript-eslint/parser": "^7.3.1",
+		"autoprefixer": "^10.4.19",
+		"boring-avatars": "^1.10.1",
+		"eslint": "^8.57.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.44.1",
-		"postcss": "^8.4.47",
-		"prettier": "^3.3.3",
-		"prettier-plugin-svelte": "^3.2.7",
-		"prettier-plugin-tailwindcss": "^0.5.14",
-		"svelte": "^4.2.19",
-		"svelte-check": "^3.8.6",
-		"sveltekit-superforms": "^2.19.1",
-		"tailwindcss": "^3.4.14",
-		"tslib": "^2.8.0",
-		"typescript": "^5.6.3",
-		"vite": "^5.4.9",
-		"zod": "^3.23.8"
+		"eslint-plugin-svelte": "^2.35.1",
+		"postcss": "^8.4.38",
+		"prettier": "^3.2.5",
+		"prettier-plugin-svelte": "^3.2.2",
+		"prettier-plugin-tailwindcss": "^0.5.12",
+		"svelte": "^4.2.12",
+		"svelte-check": "^3.6.8",
+		"sveltekit-superforms": "^2.11.0",
+		"tailwindcss": "^3.4.1",
+		"tslib": "^2.6.2",
+		"typescript": "^5.4.3",
+		"vite": "^5.2.6",
+		"vitest": "^1.4.0",
+		"zod": "^3.22.4"
 	}
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/hooks.client.ts
+++ b/src/hooks.client.ts
@ -1,12 +0,0 @@
-import type { HandleClientError } from "@sveltejs/kit";
-
-export const handleError: HandleClientError = ({ error, status }) => {
-  const errorId = crypto.randomUUID();
-
-  console.error(`Client - Error ID: ${errorId} - Status: ${status} - ${error}`);
-
-  return {
-    message: 'Whoops!',
-    errorId,
-  };
-};
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@ -5,11 +5,12 @@ import { API_URL } from '$env/static/private';
 import type { User } from '$lib/types';

 export const handle: Handle = async ({ event, resolve }) => {
+
 	const session = event.cookies.get('session');

 	if (!session) {
 		event.locals.user = undefined;
-		return await resolve(event);
+		return resolve(event);
 	}

 	const res = await fetch(`${API_URL}/player/`, {
@ -21,21 +22,22 @@ export const handle: Handle = async ({ event, resolve }) => {
 	if (!res.ok) {
 		event.locals.user = undefined;
 		event.cookies.delete('session', { path: '/' });
-		return await resolve(event);
+		return resolve(event);
 	}

 	try {
-		const user = await res.json() as User;
+		const user: User = await res.json();
 		event.locals.user = user;
 	} catch (error) {
 		event.locals.user = undefined;
 		event.cookies.delete('session', { path: '/' });
 	}

-	return await resolve(event);
+	return resolve(event);
 };

-export const handleFetch: HandleFetch = ({ request, fetch, event: { cookies } }) => {
+export const handleFetch: HandleFetch = async ({ request, fetch, event: { cookies } }) => {
+
 	const session = cookies.get('session');

 	if (!session) {
@ -51,10 +53,10 @@ export const handleFetch: HandleFetch = ({ request, fetch, event: { cookies } })
 	return fetch(request);
 }

-export const handleError: HandleServerError = ({ error, status }) => {
+export const handleError: HandleServerError = async ({ error, status }) => {
 	const errorId = crypto.randomUUID();

-	console.error(`Server - Error ID: ${errorId} - Status: ${status} - ${error}`);
+	console.error(`Error ID: ${errorId} - Status: ${status} - ${error}`);

 	return {
 		message: 'Whoops!',
--- a/src/index.test.ts
+++ b/src/index.test.ts
@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('sum test', () => {
+	it('adds 1 + 2 to equal 3', () => {
+		expect(1 + 2).toBe(3);
+	});
+});
--- a/src/lib/components/icons/index.ts
+++ b/src/lib/components/icons/index.ts
--- a/src/lib/components/ui/sonner/sonner.svelte
+++ b/src/lib/components/ui/sonner/sonner.svelte
@ -7,7 +7,7 @@

 <Sonner
 	theme={$mode}
-	class="toaster group top-24"
+	class="toaster group"
 	toastOptions={{
 		classes: {
 			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
--- a/src/lib/stores/plausible.ts
+++ b/src/lib/stores/plausible.ts
@ -0,0 +1,17 @@
+import { browser } from '$app/environment';
+import { writable } from 'svelte/store';
+
+const defaultValue = true;
+const initialValue = browser
+	? window.localStorage.getItem('plausible_ignore') === 'true'
+	: defaultValue;
+
+const plausible = writable<boolean>(initialValue);
+
+plausible.subscribe((value) => {
+	if (browser) {
+		window.localStorage.setItem('plausible_ignore', value ? 'true' : 'false');
+	}
+});
+
+export default plausible;
--- a/src/lib/validations/auth.ts
+++ b/src/lib/validations/auth.ts
@ -1,7 +1,5 @@
 import { z } from 'zod';

-const CODE_REGEX = /^[0-9a-f]{4}-[0-9a-f]{4}$/;
-
 export const loginSchema = z.object({
  pseudo: z.string()
    .trim()
@ -53,7 +51,7 @@ export const registerConfirmationSchema = z.object({
    .min(1, { message: 'Confirmation du mot de passe requise' }),
  code: z.string()
    .trim()
-    .regex(CODE_REGEX, { message: 'Code invalide' }),
+    .regex(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/i, { message: 'Code invalide' }),

 }).refine((data) => data.passwd == data.confirm, {
  message: 'Les mots de passe ne correspondent pas',
@ -88,7 +86,7 @@ export const resetPasswordSchema = z.object({
    .min(1, { message: 'Confirmation du mot de passe requise' }),
  code: z.string()
    .trim()
-    .regex(CODE_REGEX, { message: 'Code invalide' }),
+    .regex(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/i, { message: 'Code invalide' }),
 }).refine((data) => data.password == data.confirm, {
  message: 'Les mots de passe ne correspondent pas',
  path: ['confirm']
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@ -18,8 +18,8 @@
 				class="flex w-full flex-1 transform flex-col overflow-y-auto p-4 duration-300 ease-in-out"
 			>
 				<slot />
+				<Toaster position="top-right" />
 			</div>
-			<Toaster position="top-right" />
 		</div>
 	</div>
 </div>
--- a/src/routes/(app)/chapters/[chapterId=id]/+page.svelte
+++ b/src/routes/(app)/chapters/[chapterId=id]/+page.svelte
@ -19,11 +19,11 @@
 		difficultyList?: string;
 	};

-	let name: string = '';
+	let name = '';
 	let themeList: string[] = [];
 	let difficultyList: string[] = [];

-	const difficulties = data.chapter?.puzzles?.reduce((acc: Record<string, string>, puzzle) => {
+	const difficulties = data.chapter?.puzzles?.reduce((acc, puzzle) => {
 		const tag = puzzle.tags?.find((tag) =>
 			['easy', 'medium', 'hard'].includes(tag.name.toLowerCase())
 		);
@ -35,7 +35,7 @@
 		return acc;
 	}, {}) as Record<string, string>;

-	const themes = data.chapter?.puzzles?.reduce((acc: Record<string, string>, puzzle) => {
+	const themes = data.chapter?.puzzles?.reduce((acc, puzzle) => {
 		puzzle.tags?.forEach((tag) => {
 			if (!['easy', 'medium', 'hard'].includes(tag.name.toLowerCase())) {
 				acc[tag.name] = tag.name.toLowerCase();
@ -64,7 +64,7 @@

 	export const snapshot: Snapshot<Filters> = {
 		capture: () => ({
-			name: name,
+			name,
 			themeList: themeList.length ? themeList.join(',') : '',
 			difficultyList: difficultyList.length ? difficultyList.join(',') : ''
 		}),
@ -102,52 +102,48 @@
 			{/if}
 		</div>
 	</header>
-	<div class="flex flex-col gap-2 md:flex-row">
+	<div class="flex flex-col md:flex-row gap-2">
 		<Input bind:value={name} placeholder="Rechercher un puzzle" />
-		{#if Object.keys(themes).length}
-			<Select.Root
-				multiple
-				selected={themeList.map((theme) => ({ label: theme, value: theme }))}
-				onSelectedChange={(v) => {
-					if (v) {
-						themeList = v.map((item) => item.value);
-					} else {
-						themeList = [];
-					}
-				}}
-			>
-				<Select.Trigger class="md:w-[180px]">
-					<Select.Value placeholder="Thème" />
-				</Select.Trigger>
-				<Select.Content>
-					{#each Object.entries(themes) as [key, value]}
-						<Select.Item {value}>{key}</Select.Item>
-					{/each}
-				</Select.Content>
-			</Select.Root>
-		{/if}
-		{#if Object.keys(difficulties).length}
-			<Select.Root
-				multiple
-				selected={difficultyList.map((difficulty) => ({ label: difficulty, value: difficulty }))}
-				onSelectedChange={(v) => {
-					if (v) {
-						difficultyList = v.map((item) => item.value);
-					} else {
-						difficultyList = [];
-					}
-				}}
-			>
-				<Select.Trigger class="md:w-[180px]">
-					<Select.Value placeholder="Difficulté" />
-				</Select.Trigger>
-				<Select.Content>
-					{#each Object.entries(difficulties) as [key, value]}
-						<Select.Item {value}>{key}</Select.Item>
-					{/each}
-				</Select.Content>
-			</Select.Root>
-		{/if}
+		<Select.Root
+			multiple
+			selected={themeList.map((theme) => ({ label: theme, value: theme }))}
+			onSelectedChange={(v) => {
+				if (v) {
+					themeList = v.map((item) => item.value);
+				} else {
+					themeList = [];
+				}
+			}}
+		>
+			<Select.Trigger class="md:w-[180px]">
+				<Select.Value placeholder="Thème" />
+			</Select.Trigger>
+			<Select.Content>
+				{#each Object.entries(themes) as [key, value]}
+					<Select.Item {value}>{key}</Select.Item>
+				{/each}
+			</Select.Content>
+		</Select.Root>
+		<Select.Root
+			multiple
+			selected={difficultyList.map((difficulty) => ({ label: difficulty, value: difficulty }))}
+			onSelectedChange={(v) => {
+				if (v) {
+					difficultyList = v.map((item) => item.value);
+				} else {
+					difficultyList = [];
+				}
+			}}
+		>
+			<Select.Trigger class="md:w-[180px]">
+				<Select.Value placeholder="Difficulté" />
+			</Select.Trigger>
+			<Select.Content>
+				{#each Object.entries(difficulties) as [key, value]}
+					<Select.Item {value}>{key}</Select.Item>
+				{/each}
+			</Select.Content>
+		</Select.Root>
 	</div>
 	<ul class="flex flex-col gap-2">
 		{#if !filteredPuzzles.length}
--- a/src/routes/(app)/settings/+page.svelte
+++ b/src/routes/(app)/settings/+page.svelte
@ -54,7 +54,6 @@
 			<Form.Control let:attrs>
 				<Form.Label>Prénom</Form.Label>
 				<Input {...attrs} bind:value={$formData.firstname} placeholder="Philip" />
-				<Form.Description>Votre prénom de famille ne sera pas visible par les autres utilisateurs.</Form.Description>
 			</Form.Control>
 			<Form.FieldErrors />
 		</Form.Field>
@ -62,7 +61,6 @@
 			<Form.Control let:attrs>
 				<Form.Label>Nom de famille</Form.Label>
 				<Input {...attrs} bind:value={$formData.lastname} placeholder="Barlow" />
-			<Form.Description>Votre nom de famille ne sera pas visible par les autres utilisateurs.</Form.Description>
 			</Form.Control>
 			<Form.FieldErrors />
 		</Form.Field>
@ -71,7 +69,7 @@
 				<Form.Label>Nom d'utilisateur</Form.Label>
 				<Input {...attrs} bind:value={$formData.pseudo} placeholder="Cypherwolf" />
 			</Form.Control>
-			<Form.Description>Votre nom d'utilisateur sera visible par les autres utilisateurs.</Form.Description>
+			<Form.Description>Ce nom sera visible par les autres utilisateurs.</Form.Description>
 			<Form.FieldErrors />
 		</Form.Field>
 	</form>
--- a/src/routes/(auth)/login/+page.server.ts
+++ b/src/routes/(auth)/login/+page.server.ts
@ -21,6 +21,7 @@ export const load: PageServerLoad = async ({ locals: { user } }) => {

 export const actions: Actions = {
 	default: async ({ request, cookies, fetch, url: { searchParams } }) => {
+
 		const form = await superValidate(request, zod(loginSchema));

 		if (!form.valid) {
--- a/src/routes/(auth)/register/+page.server.ts
+++ b/src/routes/(auth)/register/+page.server.ts
@ -25,6 +25,7 @@ export const load: PageServerLoad = async ({ locals: { user } }) => {

 export const actions: Actions = {
 	register: async ({ request }) => {
+
 		const form = await superValidate(request, zod(registerSchema));

 		if (!form.valid) {
@ -67,7 +68,7 @@ export const actions: Actions = {
 				pseudo: form.data.pseudo,
 				email: form.data.email,
 				passwd: form.data.passwd,
-				code: form.data.code,
+				code: parseInt(form.data.code),
 			})
 		});

--- a/src/routes/(auth)/register/+page.svelte
+++ b/src/routes/(auth)/register/+page.svelte
@ -9,7 +9,7 @@
 	import { superForm } from 'sveltekit-superforms/client';

 	import * as Form from '$lib/components/ui/form';
-	import { Input } from '$lib/components/ui/input';
+	import Input from '$lib/components/ui/input/input.svelte';

 	import { registerConfirmationSchema, registerSchema } from '$lib/validations/auth';

@ -155,7 +155,7 @@
 								<Input
 									{...attrs}
 									bind:value={$registerConfirmationFormData.code}
-									placeholder="0a0a-a0a0"
+									placeholder="0000"
 								/>
 							</Form.Control>
 							<Form.FieldErrors />
@ -220,9 +220,9 @@
 			{/if}
 			<ul class="flex justify-between">
 				<li>
-					<a class="text-muted-foreground hover:text-primary" href="/login{$page.url.search}">
-						Se connecter
-					</a>
+					<a class="text-muted-foreground hover:text-primary" href="/login{$page.url.search}"
+						>Se connecter</a
+					>
 				</li>
 			</ul>
 		</div>
--- a/src/routes/(auth)/reset-password/+page.server.ts
+++ b/src/routes/(auth)/reset-password/+page.server.ts
@ -58,7 +58,7 @@ export const actions: Actions = {
 			body: JSON.stringify({
 				email: form.data.email,
 				password: form.data.password,
-				code: form.data.code
+				code: parseInt(form.data.code)
 			})
 		});

--- a/src/routes/(seo)/robots.txt/+server.ts
+++ b/src/routes/(seo)/robots.txt/+server.ts
@ -1,6 +1,7 @@
-import type { RequestHandler } from "./$types";
+import type { RequestHandler } from "@sveltejs/kit";

 export const GET: RequestHandler = async () => {
+
  const entries = [
    'User-agent: *',
    'Disallow: /',
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@ -1,14 +1,15 @@
 <script lang="ts">
-	import { page } from '$app/stores';
+  import { page } from '$app/stores';

-	import { Button } from '$lib/components/ui/button';
+	import Button from '$lib/components/ui/button/button.svelte';
 </script>

 <div class="flex min-h-screen items-center justify-center">
-	<div class="flex flex-col gap-4 text-center">
+	<div class="text-center">
 		<h1 class="text-6xl font-bold text-red-500">Oops!</h1>
-		<p class="text-xl">Apparement tu as navigué en eau trouble...</p>
-		<Button href="/">Retour au port</Button>
-		<span class="text-xs text-muted-foreground">Error ID: {$page.error?.errorId}</span>
+		<p class="mt-4 text-xl">Apparement tu as navigué en eau trouble...</p>
+		<Button class="mt-4" href="/">Retour au port</Button>
+		<p class="mt-4 text-xs text-muted-foreground">{$page.error?.message}</p>
+		<p class="mt-4 text-xs text-muted-foreground">{$page.error?.errorId}</p>
 	</div>
 </div>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -2,6 +2,7 @@
 	import '../app.css';

 	import { Metadata } from '$lib/components';
+
 </script>

 <Metadata />
--- a/tests/index.test.ts
+++ b/tests/index.test.ts
@ -0,0 +1,51 @@
+import { expect, test } from '@playwright/test';
+
+test('index page redirects to login page', async ({ page }) => {
+	await page.goto('/');
+
+	await page.waitForURL('/login');
+
+	await expect(page.url()).toContain('/login');
+});
+
+test('login page has a register link that redirects to the register page', async ({ page }) => {
+	await page.goto('/login');
+
+	const link = await page.$('a[href*="/register"]');
+
+	await link?.click();
+
+	await page.waitForURL('/register');
+
+	await expect(page.url()).toContain('/register');
+});
+
+test('register page has a login link that redirects to the login page', async ({ page }) => {
+	await page.goto('/register');
+
+	const link = await page.$('a[href*="/login"]');
+
+	await link?.click();
+
+	await page.waitForURL('/login');
+
+	await expect(page.url()).toContain('/login');
+});
+
+test('dashboard page redirects to login page if user is not logged in', async ({ page }) => {
+	await page.goto('');
+	await expect(page.url()).toContain('/login');
+});
+
+test('login form accepts valid credentials', async ({ page }) => {
+	await page.context().clearCookies();
+
+	await page.goto('/login');
+
+	await page.fill('input[name="pseudo"]', 'glazk0');
+	await page.fill('input[name="passwd"]', 'Cookies Are #Miam42');
+
+	await Promise.all([page.getByRole('button').click(), page.waitForURL('')]);
+
+	await expect(page.url()).toContain('');
+});