63 lines
1.8 KiB
Svelte
63 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import type { PageData } from './$types';
|
|
|
|
import { Loader2 } from 'lucide-svelte';
|
|
import { superForm } from 'sveltekit-superforms/client';
|
|
|
|
import Button from '$lib/components/ui/Button.svelte';
|
|
import Input from '$lib/components/ui/Input.svelte';
|
|
|
|
export let data: PageData;
|
|
|
|
const { form, errors, enhance } = superForm(data.form, {
|
|
onSubmit() {
|
|
submitting = true;
|
|
},
|
|
onResult() {
|
|
submitting = false;
|
|
}
|
|
});
|
|
|
|
let submitting = false;
|
|
</script>
|
|
|
|
<div class="flex h-screen w-full">
|
|
<div class="flex w-full flex-col items-center justify-center">
|
|
<div class="flex w-full max-w-xs flex-col gap-4">
|
|
<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} />
|
|
{#if $errors.pseudo}<span class="text-sm text-red-500">{$errors.pseudo}</span>{/if}
|
|
|
|
<label for="passwd"> Mot de passe </label>
|
|
<Input
|
|
name="passwd"
|
|
placeholder="************"
|
|
type="password"
|
|
required
|
|
bind:value={$form.passwd}
|
|
/>
|
|
{#if $errors.passwd}<span class="text-sm text-red-500">{$errors.passwd}</span>{/if}
|
|
|
|
<Button class="mt-2" variant="brand" disabled={submitting}>
|
|
{#if submitting}
|
|
<Loader2 class="mr-2 h-4 w-4 animate-spin" />
|
|
{/if}
|
|
Se connecter
|
|
</Button>
|
|
|
|
<ul class="flex justify-between">
|
|
<li>
|
|
<a class="text-highlight-secondary hover:text-brand" href="/sign-up"> S'inscrire </a>
|
|
</li>
|
|
<li>
|
|
<a class="text-highlight-secondary hover:text-brand" href="/forgot-password">
|
|
Mot de passe oublié
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|