Merge pull request 'fix: errors & semantic' (#9) from dev into main

Reviewed-on: #9

src/lib/components/Sidenav.svelte

@@ -80,14 +80,13 @@
 							}}
 							href={item.slug}
 							class={cn(
-								'flex justify-center rounded-md px-3 py-3 text-sm transition-colors duration-150 lg:justify-start',
+								'flex items-center justify-center gap-2 rounded-md px-3 py-3 text-sm transition-colors duration-150 lg:justify-start',
 								{
 									'bg-primary-700': isActive(item.slug),
 									'group hover:bg-primary-700': !isActive(item.slug)
 								}
 							)}
 						>
-							<div class="flex items-center gap-2">
 							<svelte:component
 								this={item.icon}
 								class={cn({
@@ -105,7 +104,6 @@
 							>
 								{item.name}
 							</span>
-							</div>
 						</a>
 					</li>
 				{/each}
@@ -118,22 +116,17 @@
 			<ul class="flex flex-col gap-4">
 				<li>
 					<span
-						class="group pointer-events-none flex justify-center rounded-md px-3 py-3 text-sm opacity-50 transition-colors duration-150 lg:justify-start"
+						class="group pointer-events-none flex items-center justify-center gap-2 rounded-md px-3 py-3 text-sm opacity-50 transition-colors duration-150 lg:justify-start"
 					>
-						<div class="flex items-center gap-2">
 						<Help class="stroke-highlight-secondary transition-colors duration-150" />
 						<span
-								class={cn(
+							class={cn('hidden text-highlight-secondary transition-colors duration-150 lg:block', {
-									'hidden text-highlight-secondary transition-colors duration-150 lg:block',
-									{
 								'block sm:hidden': isOpen,
 								hidden: !isOpen
-									}
+							})}
-								)}
 						>
 							Aide
 						</span>
-						</div>
 					</span>
 				</li>
 				<li>
@@ -142,9 +135,8 @@
 							isOpen = false;
 						}}
 						href="mailto:cyberbottle@peerat.dev"
-						class="group flex justify-center rounded-md px-3 py-3 text-sm transition-colors duration-150 hover:bg-primary-700 lg:justify-start"
+						class="group flex items-center justify-center gap-2 rounded-md px-3 py-3 text-sm transition-colors duration-150 hover:bg-primary-700 lg:justify-start"
 					>
-						<div class="flex items-center gap-2">
 						<Mail
 							class="stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0"
 						/>
@@ -159,7 +151,6 @@
 						>
 							Mail
 						</span>
-						</div>
 					</a>
 				</li>
 				<li>
@@ -168,9 +159,10 @@
 							isOpen = false;
 						}}
 						href="//discord.gg/72vuHcwUkE"
-						class="group flex justify-center rounded-md px-3 py-3 text-sm transition-colors duration-150 hover:bg-primary-700 lg:justify-start"
+						target="_blank"
+						rel="noopener"
+						class="group flex items-center justify-center gap-2 rounded-md px-3 py-3 text-sm transition-colors duration-150 hover:bg-primary-700 lg:justify-start"
 					>
-						<div class="flex items-center gap-2">
 						<Discord
 							class="fill-highlight-secondary transition-colors duration-150 group-hover:fill-primary-0"
 						/>
@@ -185,7 +177,6 @@
 						>
 							Discord
 						</span>
-						</div>
 					</a>
 				</li>
 				<li>
@@ -194,9 +185,10 @@
 							isOpen = false;
 						}}
 						href="//git.peerat.dev"
-						class="group flex justify-center rounded-md px-3 py-3 text-sm transition-colors duration-150 hover:bg-primary-700 lg:justify-start"
+						target="_blank"
+						rel="noopener"
+						class="group flex items-center justify-center gap-2 rounded-md px-3 py-3 text-sm transition-colors duration-150 hover:bg-primary-700 lg:justify-start"
 					>
-						<div class="flex items-center gap-2">
 						<Git
 							class="stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0"
 						/>
@@ -211,7 +203,6 @@
 						>
 							Git
 						</span>
-						</div>
 					</a>
 				</li>
 			</ul>

src/routes/+layout.svelte

@@ -3,6 +3,8 @@
 
 	import { page } from '$app/stores';
 
+	import Toaster from '$lib/components/Toaster.svelte';
+
 	$: origin = $page.url.origin;
 	$: domain = $page.url.hostname;
 </script>
@@ -38,4 +40,6 @@
 	<script defer data-domain={domain} src="https://plosibl.peerat.dev/js/script.js"></script>
 </svelte:head>
 
+<Toaster />
+
 <slot />

src/routes/dashboard/+layout.svelte

@@ -11,7 +11,6 @@
 		<Sidenav bind:isOpen />
 		<div class="flex flex-1 flex-col">
 			<Navbar bind:isOpen />
-			<Toaster />
 			<div
 				class="flex w-full flex-1 transform flex-col overflow-y-scroll p-4 duration-300 ease-in-out sm:p-8"
 			>

src/routes/sign-in/+page.svelte

@@ -9,6 +9,8 @@
 
 	export let data: PageData;
 
+	let submitting = false;
+
 	const { form, errors, enhance } = superForm(data.form, {
 		onSubmit() {
 			submitting = true;
@@ -17,8 +19,6 @@
 			submitting = false;
 		}
 	});
-
-	let submitting = false;
 </script>
 
 <div class="flex h-screen w-full">
@@ -27,7 +27,14 @@
 			<h1 class="mx-auto text-xl font-bold">Connexion</h1>
 			<form class="flex flex-col justify-center gap-2" method="POST" use:enhance>
 				<label for="pseudo"> Nom d'utilisateur </label>
-				<Input name="pseudo" placeholder="Barlow" type="text" required bind:value={$form.pseudo} />
+				<Input
+					name="pseudo"
+					placeholder="Barlow"
+					type="text"
+					required
+					bind:value={$form.pseudo}
+					aria-invalid={$errors.pseudo ? 'true' : undefined}
+				/>
 				{#if $errors.pseudo}<span class="text-sm text-red-500">{$errors.pseudo}</span>{/if}
 
 				<label for="passwd"> Mot de passe </label>
@@ -37,6 +44,7 @@
 					type="password"
 					required
 					bind:value={$form.passwd}
+					aria-invalid={$errors.passwd ? 'true' : undefined}
 				/>
 				{#if $errors.passwd}<span class="text-sm text-red-500">{$errors.passwd}</span>{/if}
 

src/routes/sign-up/+page.server.ts

@@ -84,9 +84,10 @@ export const actions = {
 		}
 
 		if (res.status === 400) {
-			const { email_valid } = await res.json();
+			const { email_valid, username_valid } = await res.json();
 
 			if (!email_valid) form.errors.email = ['Un compte avec cette adresse email existe déjà'];
+			if (!username_valid) form.errors.pseudo = ['Ce pseudo est déjà utilisé'];
 
 			return fail(400, { form });
 		}
@@ -133,13 +134,13 @@ export const actions = {
 		if (res.status === 400) {
 			const { email_valid, username_valid } = await res.json();
 
-			if (!email_valid) form.errors.email = ['Un compte avec cette adresse email existe déjà'];
+			if (email_valid) form.errors.email = ['Un compte avec cette adresse email existe déjà'];
-			if (!username_valid) form.errors.pseudo = ['Ce pseudo est déjà utilisé'];
+			if (username_valid) form.errors.pseudo = ['Ce pseudo est déjà utilisé'];
 
 			return fail(400, { form });
 		}
 
-		form.errors.code = [`Une erreur s'est produite (${res.status} ${res.statusText})`];
+		form.errors.code = [`Le code envoyé est invalide.`];
 
 		return fail(400, {
 			form

src/routes/sign-up/+page.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 	import { superForm } from 'sveltekit-superforms/client';
+	import { Loader2 } from 'lucide-svelte';
 
 	import type { PageData, Snapshot } from './$types';
 
 	import Button from '$lib/components/ui/Button.svelte';
 	import Input from '$lib/components/ui/Input.svelte';
-	import { Loader2 } from 'lucide-svelte';
+	import { addToast } from '$lib/components/Toaster.svelte';
 
 	export let data: PageData;
 
+	let submitting = false;
+	let confirmation = false;
+
 	const { form, errors, enhance } = superForm(data.form, {
 		onSubmit() {
 			submitting = true;
@@ -17,6 +21,12 @@
 		onResult({ result }) {
 			switch (result.type) {
 				case 'success':
+					addToast({
+						data: {
+							title: 'Demande de confirmation',
+							description: `Un code vous à été ${confirmation ? 'renvoyé' : 'envoyé'}.`
+						}
+					});
 					confirmation = true;
 					break;
 				case 'error':
@@ -28,9 +38,6 @@
 		}
 	});
 
-	let submitting = false;
-	let confirmation = false;
-
 	export const snapshot: Snapshot = {
 		capture: () => confirmation,
 		restore: (value) => (confirmation = value)
@@ -57,6 +64,7 @@
 					placeholder="philipzcwbarlow@peerat.dev"
 					autocomplete="off"
 					required
+					aria-invalid={$errors.email ? 'true' : undefined}
 				/>
 				{#if $errors.email}<span class="text-sm text-red-500">{$errors.email}</span>{/if}
 
@@ -68,6 +76,7 @@
 					placeholder="Philip"
 					autocomplete="off"
 					required
+					aria-invalid={$errors.firstname ? 'true' : undefined}
 				/>
 				{#if $errors.firstname}<span class="text-sm text-red-500">{$errors.firstname}</span>{/if}
 
@@ -79,6 +88,7 @@
 					placeholder="Barlow"
 					autocomplete="off"
 					required
+					aria-invalid={$errors.lastname ? 'true' : undefined}
 				/>
 				{#if $errors.lastname}<span class="text-sm text-red-500">{$errors.lastname}</span>{/if}
 
@@ -90,6 +100,7 @@
 					placeholder="Cypher Wolf"
 					autocomplete="off"
 					required
+					aria-invalid={$errors.pseudo ? 'true' : undefined}
 				/>
 				{#if $errors.pseudo}<span class="text-sm text-red-500">{$errors.pseudo}</span>{/if}
 
@@ -101,18 +112,28 @@
 						}}
 					>
 						<label for="passwd"> Mot de passe </label>
-						<Input name="passwd" placeholder="************" type="password" />
+						<Input
+							name="passwd"
+							placeholder="************"
+							type="password"
+							aria-invalid={$errors.passwd ? 'true' : undefined}
+						/>
 						{#if $errors.passwd}<span class="text-sm text-red-500">{$errors.passwd}</span>{/if}
 
 						<label for="code"> Code </label>
-						<Input name="code" placeholder="1234" type="text" />
+						<Input
+							name="code"
+							placeholder="1234"
+							type="text"
+							aria-invalid={$errors.code ? 'true' : undefined}
+						/>
 						{#if $errors.code}<span class="text-sm text-red-500">{$errors.code}</span>{/if}
 					</div>
 				{/if}
 
-				<Button class="mt-2" variant="brand" disabled={submitting}>
+				<Button class="mt-2 flex items-center gap-2" variant="brand" disabled={submitting}>
 					{#if submitting}
-						<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+						<Loader2 className="h-4 w-4 animate-spin" />
 					{/if}
 					{confirmation ? "S'inscrire" : 'Continuer'}
 				</Button>