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

Reviewed-on: #9

src/lib/components/Sidenav.svelte

@@ -80,32 +80,30 @@
 							}}
 							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({
-										'stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0':
-											!isActive(item.slug)
-									})}
-								/>
-								<span
-									class={cn('hidden lg:block', {
-										'block sm:hidden': isOpen,
-										hidden: !isOpen,
-										'text-highlight-secondary transition-colors duration-150 group-hover:text-primary':
-											!isActive(item.slug)
-									})}
-								>
-									{item.name}
-								</span>
-							</div>
+							<svelte:component
+								this={item.icon}
+								class={cn({
+									'stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0':
+										!isActive(item.slug)
+								})}
+							/>
+							<span
+								class={cn('hidden lg:block', {
+									'block sm:hidden': isOpen,
+									hidden: !isOpen,
+									'text-highlight-secondary transition-colors duration-150 group-hover:text-primary':
+										!isActive(item.slug)
+								})}
+							>
+								{item.name}
+							</span>
 						</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(
-									'hidden text-highlight-secondary transition-colors duration-150 lg:block',
-									{
-										'block sm:hidden': isOpen,
-										hidden: !isOpen
-									}
-								)}
-							>
-								Aide
-							</span>
-						</div>
+						<Help class="stroke-highlight-secondary transition-colors duration-150" />
+						<span
+							class={cn('hidden text-highlight-secondary transition-colors duration-150 lg:block', {
+								'block sm:hidden': isOpen,
+								hidden: !isOpen
+							})}
+						>
+							Aide
+						</span>
 					</span>
 				</li>
 				<li>
@@ -142,24 +135,22 @@
 							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"
-							/>
-							<span
-								class={cn(
-									'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block',
-									{
-										'block sm:hidden': isOpen,
-										hidden: !isOpen
-									}
-								)}
-							>
-								Mail
-							</span>
-						</div>
+						<Mail
+							class="stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0"
+						/>
+						<span
+							class={cn(
+								'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block',
+								{
+									'block sm:hidden': isOpen,
+									hidden: !isOpen
+								}
+							)}
+						>
+							Mail
+						</span>
 					</a>
 				</li>
 				<li>
@@ -168,24 +159,24 @@
 							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"
-							/>
-							<span
-								class={cn(
-									'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block',
-									{
-										'block sm:hidden': isOpen,
-										hidden: !isOpen
-									}
-								)}
-							>
-								Discord
-							</span>
-						</div>
+						<Discord
+							class="fill-highlight-secondary transition-colors duration-150 group-hover:fill-primary-0"
+						/>
+						<span
+							class={cn(
+								'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block',
+								{
+									'block sm:hidden': isOpen,
+									hidden: !isOpen
+								}
+							)}
+						>
+							Discord
+						</span>
 					</a>
 				</li>
 				<li>
@@ -194,24 +185,24 @@
 							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"
-							/>
-							<span
-								class={cn(
-									'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block',
-									{
-										'block sm:hidden': isOpen,
-										hidden: !isOpen
-									}
-								)}
-							>
-								Git
-							</span>
-						</div>
+						<Git
+							class="stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0"
+						/>
+						<span
+							class={cn(
+								'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block',
+								{
+									'block sm:hidden': isOpen,
+									hidden: !isOpen
+								}
+							)}
+						>
+							Git
+						</span>
 					</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 (!username_valid) form.errors.pseudo = ['Ce pseudo est déjà utilisé'];
+			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 });
 		}
 
-		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>