From c27b6bda9c1aacfc8424d01db5f03b785daa93c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o?= <43091603+glazk0@users.noreply.github.com>
Date: Sun, 24 Sep 2023 22:11:01 +0200
Subject: [PATCH] fix: other semantic and possible issue on sign-up

---
 src/routes/sign-in/+page.svelte    | 14 +++++++++++---
 src/routes/sign-up/+page.server.ts |  3 ++-
 src/routes/sign-up/+page.svelte    | 24 +++++++++++++++++++-----
 3 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/routes/sign-in/+page.svelte b/src/routes/sign-in/+page.svelte
index 85eb140..f39017a 100644
--- a/src/routes/sign-in/+page.svelte
+++ b/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}
 
diff --git a/src/routes/sign-up/+page.server.ts b/src/routes/sign-up/+page.server.ts
index 8b33486..f64757b 100644
--- a/src/routes/sign-up/+page.server.ts
+++ b/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 });
 		}
diff --git a/src/routes/sign-up/+page.svelte b/src/routes/sign-up/+page.svelte
index 66ccc46..760cf77 100644
--- a/src/routes/sign-up/+page.svelte
+++ b/src/routes/sign-up/+page.svelte
@@ -10,6 +10,9 @@
 
 	export let data: PageData;
 
+	let submitting = false;
+	let confirmation = false;
+
 	const { form, errors, enhance } = superForm(data.form, {
 		onSubmit() {
 			submitting = true;
@@ -28,9 +31,6 @@
 		}
 	});
 
-	let submitting = false;
-	let confirmation = false;
-
 	export const snapshot: Snapshot = {
 		capture: () => confirmation,
 		restore: (value) => (confirmation = value)
@@ -57,6 +57,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 +69,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 +81,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 +93,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,11 +105,21 @@
 						}}
 					>
 						<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}