Compare commits
2 commits
7bdf176611
...
c27b6bda9c
| Author | SHA1 | Date | |
|---|---|---|---|
|
c27b6bda9c | ||
|
|
24a626bbeb |
4 changed files with 109 additions and 95 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue