Merge pull request 'Update dev branch' (#29) from main into dev

Reviewed-on: #29

package.json

@@ -6,7 +6,6 @@
 		"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 .",
@@ -17,42 +16,40 @@
 	"dependencies": {
 		"bits-ui": "^0.20.1",
 		"class-variance-authority": "^0.7.0",
-		"clsx": "^2.1.0",
+		"clsx": "^2.1.1",
 		"formsnap": "^0.5.1",
 		"lucide-svelte": "^0.363.0",
-		"mdsvex": "^0.11.0",
+		"mdsvex": "^0.11.2",
-		"mode-watcher": "^0.3.0",
+		"mode-watcher": "^0.3.1",
 		"svelte-boring-avatars": "^1.2.6",
-		"svelte-sonner": "^0.3.19",
+		"svelte-sonner": "^0.3.28",
-		"tailwind-merge": "^2.2.2",
+		"tailwind-merge": "^2.5.4",
 		"tailwind-variants": "^0.2.1",
-		"vaul-svelte": "^0.3.0"
+		"vaul-svelte": "^0.3.2"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.42.1",
+		"@sveltejs/adapter-node": "^5.2.7",
-		"@sveltejs/adapter-node": "^5.0.1",
+		"@sveltejs/kit": "^2.7.1",
-		"@sveltejs/kit": "^2.5.4",
+		"@sveltejs/vite-plugin-svelte": "^3.1.2",
-		"@sveltejs/vite-plugin-svelte": "^3.0.2",
+		"@tailwindcss/typography": "^0.5.15",
-		"@tailwindcss/typography": "^0.5.10",
+		"@typescript-eslint/eslint-plugin": "^7.18.0",
-		"@typescript-eslint/eslint-plugin": "^7.3.1",
+		"@typescript-eslint/parser": "^7.18.0",
-		"@typescript-eslint/parser": "^7.3.1",
+		"autoprefixer": "^10.4.20",
-		"autoprefixer": "^10.4.19",
+		"boring-avatars": "^1.11.2",
-		"boring-avatars": "^1.10.1",
+		"eslint": "^8.57.1",
-		"eslint": "^8.57.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.35.1",
+		"eslint-plugin-svelte": "^2.44.1",
-		"postcss": "^8.4.38",
+		"postcss": "^8.4.47",
-		"prettier": "^3.2.5",
+		"prettier": "^3.3.3",
-		"prettier-plugin-svelte": "^3.2.2",
+		"prettier-plugin-svelte": "^3.2.7",
-		"prettier-plugin-tailwindcss": "^0.5.12",
+		"prettier-plugin-tailwindcss": "^0.5.14",
-		"svelte": "^4.2.12",
+		"svelte": "^4.2.19",
-		"svelte-check": "^3.6.8",
+		"svelte-check": "^3.8.6",
-		"sveltekit-superforms": "^2.11.0",
+		"sveltekit-superforms": "^2.19.1",
-		"tailwindcss": "^3.4.1",
+		"tailwindcss": "^3.4.14",
-		"tslib": "^2.6.2",
+		"tslib": "^2.8.0",
-		"typescript": "^5.4.3",
+		"typescript": "^5.6.3",
-		"vite": "^5.2.6",
+		"vite": "^5.4.9",
-		"vitest": "^1.4.0",
+		"zod": "^3.23.8"
-		"zod": "^3.22.4"
 	}
 }

src/hooks.client.ts

@@ -0,0 +1,12 @@
+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,
+  };
+};

src/hooks.server.ts

@@ -5,12 +5,11 @@ 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 resolve(event);
+		return await resolve(event);
 	}
 
 	const res = await fetch(`${API_URL}/player/`, {
@@ -22,22 +21,21 @@ export const handle: Handle = async ({ event, resolve }) => {
 	if (!res.ok) {
 		event.locals.user = undefined;
 		event.cookies.delete('session', { path: '/' });
-		return resolve(event);
+		return await resolve(event);
 	}
 
 	try {
-		const user: User = await res.json();
+		const user = await res.json() as User;
 		event.locals.user = user;
 	} catch (error) {
 		event.locals.user = undefined;
 		event.cookies.delete('session', { path: '/' });
 	}
 
-	return resolve(event);
+	return await resolve(event);
 };
 
-export const handleFetch: HandleFetch = async ({ request, fetch, event: { cookies } }) => {
+export const handleFetch: HandleFetch = ({ request, fetch, event: { cookies } }) => {
-
 	const session = cookies.get('session');
 
 	if (!session) {
@@ -53,10 +51,10 @@ export const handleFetch: HandleFetch = async ({ request, fetch, event: { cookie
 	return fetch(request);
 }
 
-export const handleError: HandleServerError = async ({ error, status }) => {
+export const handleError: HandleServerError = ({ error, status }) => {
 	const errorId = crypto.randomUUID();
 
-	console.error(`Error ID: ${errorId} - Status: ${status} - ${error}`);
+	console.error(`Server - Error ID: ${errorId} - Status: ${status} - ${error}`);
 
 	return {
 		message: 'Whoops!',

src/index.test.ts

@@ -1,7 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-describe('sum test', () => {
-	it('adds 1 + 2 to equal 3', () => {
-		expect(1 + 2).toBe(3);
-	});
-});

src/lib/components/ui/sonner/sonner.svelte

@@ -7,7 +7,7 @@
 
 <Sonner
 	theme={$mode}
-	class="toaster group"
+	class="toaster group top-24"
 	toastOptions={{
 		classes: {
 			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",

src/lib/stores/plausible.ts

@@ -1,17 +0,0 @@
-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;

src/lib/validations/auth.ts

@@ -1,5 +1,7 @@
 import { z } from 'zod';
 
+const CODE_REGEX = /^[0-9a-f]{4}-[0-9a-f]{4}$/;
+
 export const loginSchema = z.object({
   pseudo: z.string()
     .trim()
@@ -51,7 +53,7 @@ export const registerConfirmationSchema = z.object({
     .min(1, { message: 'Confirmation du mot de passe requise' }),
   code: z.string()
     .trim()
-    .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' }),
+    .regex(CODE_REGEX, { message: 'Code invalide' }),
 
 }).refine((data) => data.passwd == data.confirm, {
   message: 'Les mots de passe ne correspondent pas',
@@ -86,7 +88,7 @@ export const resetPasswordSchema = z.object({
     .min(1, { message: 'Confirmation du mot de passe requise' }),
   code: z.string()
     .trim()
-    .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' }),
+    .regex(CODE_REGEX, { message: 'Code invalide' }),
 }).refine((data) => data.password == data.confirm, {
   message: 'Les mots de passe ne correspondent pas',
   path: ['confirm']

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 />
+			</div>
 			<Toaster position="top-right" />
 		</div>
 	</div>
-	</div>
 </div>

src/routes/(app)/chapters/[chapterId=id]/+page.svelte

@@ -19,11 +19,11 @@
 		difficultyList?: string;
 	};
 
-	let name = '';
+	let name: string = '';
 	let themeList: string[] = [];
 	let difficultyList: string[] = [];
 
-	const difficulties = data.chapter?.puzzles?.reduce((acc, puzzle) => {
+	const difficulties = data.chapter?.puzzles?.reduce((acc: Record<string, string>, 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, puzzle) => {
+	const themes = data.chapter?.puzzles?.reduce((acc: Record<string, string>, 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,8 +102,9 @@
 			{/if}
 		</div>
 	</header>
-	<div class="flex flex-col md:flex-row gap-2">
+	<div class="flex flex-col gap-2 md:flex-row">
 		<Input bind:value={name} placeholder="Rechercher un puzzle" />
+		{#if Object.keys(themes).length}
 			<Select.Root
 				multiple
 				selected={themeList.map((theme) => ({ label: theme, value: theme }))}
@@ -124,6 +125,8 @@
 					{/each}
 				</Select.Content>
 			</Select.Root>
+		{/if}
+		{#if Object.keys(difficulties).length}
 			<Select.Root
 				multiple
 				selected={difficultyList.map((difficulty) => ({ label: difficulty, value: difficulty }))}
@@ -144,6 +147,7 @@
 					{/each}
 				</Select.Content>
 			</Select.Root>
+		{/if}
 	</div>
 	<ul class="flex flex-col gap-2">
 		{#if !filteredPuzzles.length}

src/routes/(app)/settings/+page.svelte

@@ -54,6 +54,7 @@
 			<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>
@@ -61,6 +62,7 @@
 			<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>
@@ -69,7 +71,7 @@
 				<Form.Label>Nom d'utilisateur</Form.Label>
 				<Input {...attrs} bind:value={$formData.pseudo} placeholder="Cypherwolf" />
 			</Form.Control>
-			<Form.Description>Ce nom sera visible par les autres utilisateurs.</Form.Description>
+			<Form.Description>Votre nom d'utilisateur sera visible par les autres utilisateurs.</Form.Description>
 			<Form.FieldErrors />
 		</Form.Field>
 	</form>

src/routes/(auth)/login/+page.server.ts

@@ -21,7 +21,6 @@ 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) {

src/routes/(auth)/register/+page.server.ts

@@ -25,7 +25,6 @@ export const load: PageServerLoad = async ({ locals: { user } }) => {
 
 export const actions: Actions = {
 	register: async ({ request }) => {
-
 		const form = await superValidate(request, zod(registerSchema));
 
 		if (!form.valid) {
@@ -68,7 +67,7 @@ export const actions: Actions = {
 				pseudo: form.data.pseudo,
 				email: form.data.email,
 				passwd: form.data.passwd,
-				code: parseInt(form.data.code),
+				code: form.data.code,
 			})
 		});
 

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/input.svelte';
+	import { Input } from '$lib/components/ui/input';
 
 	import { registerConfirmationSchema, registerSchema } from '$lib/validations/auth';
 
@@ -155,7 +155,7 @@
 								<Input
 									{...attrs}
 									bind:value={$registerConfirmationFormData.code}
-									placeholder="0000"
+									placeholder="0a0a-a0a0"
 								/>
 							</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}"
+					<a class="text-muted-foreground hover:text-primary" href="/login{$page.url.search}">
-						>Se connecter</a
+						Se connecter
-					>
+					</a>
 				</li>
 			</ul>
 		</div>

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: parseInt(form.data.code)
+				code: form.data.code
 			})
 		});
 

src/routes/(seo)/robots.txt/+server.ts

@@ -1,7 +1,6 @@
-import type { RequestHandler } from "@sveltejs/kit";
+import type { RequestHandler } from "./$types";
 
 export const GET: RequestHandler = async () => {
-
   const entries = [
     'User-agent: *',
     'Disallow: /',

src/routes/+error.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 
-	import Button from '$lib/components/ui/button/button.svelte';
+	import { Button } from '$lib/components/ui/button';
 </script>
 
 <div class="flex min-h-screen items-center justify-center">
-	<div class="text-center">
+	<div class="flex flex-col gap-4 text-center">
 		<h1 class="text-6xl font-bold text-red-500">Oops!</h1>
-		<p class="mt-4 text-xl">Apparement tu as navigué en eau trouble...</p>
+		<p class="text-xl">Apparement tu as navigué en eau trouble...</p>
-		<Button class="mt-4" href="/">Retour au port</Button>
+		<Button href="/">Retour au port</Button>
-		<p class="mt-4 text-xs text-muted-foreground">{$page.error?.message}</p>
+		<span class="text-xs text-muted-foreground">Error ID: {$page.error?.errorId}</span>
-		<p class="mt-4 text-xs text-muted-foreground">{$page.error?.errorId}</p>
 	</div>
 </div>

src/routes/+layout.svelte

@@ -2,7 +2,6 @@
 	import '../app.css';
 
 	import { Metadata } from '$lib/components';
-
 </script>
 
 <Metadata />

tests/index.test.ts

@@ -1,51 +0,0 @@
-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('');
-});