fix: other semantic and possible issue on sign-up

This commit is contained in:
Théo 2023-09-24 22:11:01 +02:00
parent 24a626bbeb
commit c27b6bda9c
3 changed files with 32 additions and 9 deletions

View file

@ -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}

View file

@ -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 });
}

View file

@ -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}