peer-at-code-web/src/routes/(auth)/register/+page.svelte

<script lang="ts">
	import { fade } from 'svelte/transition';
	import type { PageData } from './$types';

	import Loader from 'lucide-svelte/icons/loader-circle';
	import { toast } from 'svelte-sonner';
	import { zodClient } from 'sveltekit-superforms/adapters';
	import { superForm } from 'sveltekit-superforms/client';

	import * as Form from '$lib/components/ui/form';
	import Input from '$lib/components/ui/input/input.svelte';

	import { registerConfirmationSchema, registerSchema } from '$lib/validations/auth';

	export let data: PageData;

	let confirmation = false;

	const registerForm = superForm(data.registerForm, {
		validators: zodClient(registerSchema),
		delayMs: 500,
		multipleSubmits: 'prevent',
		invalidateAll: false,
		onResult({ result }) {
			switch (result.type) {
				case 'success':
					toast.message('Demande de confirmation', {
						description: `Un code vous à été ${confirmation ? 'renvoyé' : 'envoyé'}.`
					});
					registerConfirmationFormData.set({
						...$registerFormData,
						passwd: '',
						confirm: '',
						code: ''
					});
					confirmation = true;
					setTimeout(() => {
						const field = document.querySelector('input[name="passwd"]');
						(field as HTMLInputElement)?.focus();
					}, 100);
					break;
			}
		}
	});

	const {
		form: registerFormData,
		enhance: registerEnhance,
		delayed: registerDelayed
	} = registerForm;

	const registerConfirmationForm = superForm(data.registerConfirmationForm, {
		validators: zodClient(registerConfirmationSchema),
		delayMs: 500,
		multipleSubmits: 'prevent'
	});

	const {
		form: registerConfirmationFormData,
		enhance: registerConfirmationEnhance,
		delayed: registerConfirmationDelayed
	} = registerConfirmationForm;
</script>

<div class="container flex h-screen">
	<div class="flex w-full flex-col items-center justify-center">
		<div class="flex w-full max-w-xs flex-col gap-4">
			{#if confirmation}
				<h2 class="mx-auto text-xl font-bold">Confirmation</h2>
				<form
					class="flex flex-col justify-center gap-2"
					method="POST"
					action="?/confirmation"
					use:registerConfirmationEnhance
				>
					<Form.Field form={registerConfirmationForm} name="email">
						<Form.Control let:attrs>
							<Form.Label>Email</Form.Label>
							<Input
								{...attrs}
								type="email"
								bind:value={$registerConfirmationFormData.email}
								placeholder="philiphzcwbarlow@peerat.dev"
							/>
						</Form.Control>
						<Form.FieldErrors />
					</Form.Field>
					<Form.Field form={registerConfirmationForm} name="firstname">
						<Form.Control let:attrs>
							<Form.Label>Prénom</Form.Label>
							<Input
								{...attrs}
								bind:value={$registerConfirmationFormData.firstname}
								placeholder="Philip"
							/>
						</Form.Control>
						<Form.FieldErrors />
					</Form.Field>
					<Form.Field form={registerConfirmationForm} name="lastname">
						<Form.Control let:attrs>
							<Form.Label>Nom de famille</Form.Label>
							<Input
								{...attrs}
								bind:value={$registerConfirmationFormData.lastname}
								placeholder="Barlow"
							/>
						</Form.Control>
						<Form.FieldErrors />
					</Form.Field>
					<Form.Field form={registerConfirmationForm} name="pseudo">
						<Form.Control let:attrs>
							<Form.Label>Nom d'utilisateur</Form.Label>
							<Input
								{...attrs}
								bind:value={$registerConfirmationFormData.pseudo}
								placeholder="Cypherwolf"
							/>
						</Form.Control>
						<Form.FieldErrors />
					</Form.Field>

					<div
						transition:fade={{
							duration: 300
						}}
					>
						<Form.Field form={registerConfirmationForm} name="passwd">
							<Form.Control let:attrs>
								<Form.Label>Mot de passe</Form.Label>
								<Input
									{...attrs}
									type="password"
									bind:value={$registerConfirmationFormData.passwd}
									placeholder="************"
								/>
							</Form.Control>
							<Form.FieldErrors />
						</Form.Field>
						<Form.Field form={registerConfirmationForm} name="confirm">
							<Form.Control let:attrs>
								<Form.Label>Confirmer le mot de passe</Form.Label>
								<Input
									{...attrs}
									type="password"
									bind:value={$registerConfirmationFormData.confirm}
									placeholder="************"
								/>
							</Form.Control>
							<Form.FieldErrors />
						</Form.Field>
						<Form.Field form={registerConfirmationForm} name="code">
							<Form.Control let:attrs>
								<Form.Label>Code</Form.Label>
								<Input
									{...attrs}
									bind:value={$registerConfirmationFormData.code}
									placeholder="0000"
								/>
							</Form.Control>
							<Form.FieldErrors />
						</Form.Field>
					</div>

					<Form.Button disabled={$registerConfirmationDelayed}>
						{#if $registerConfirmationDelayed}
							<Loader class="mr-2 h-4 w-4 animate-spin" />
						{/if}
						Continuer
					</Form.Button>
				</form>
			{:else}
				<h1 class="mx-auto text-xl font-bold">Inscription</h1>
				<form
					class="flex flex-col justify-center gap-2"
					method="POST"
					action="?/register"
					use:registerEnhance
				>
					<Form.Field form={registerForm} name="email">
						<Form.Control let:attrs>
							<Form.Label>Email</Form.Label>
							<Input
								{...attrs}
								type="email"
								bind:value={$registerFormData.email}
								placeholder="philipzcwbarlow@peerat.dev"
							/>
						</Form.Control>
						<Form.FieldErrors />
					</Form.Field>
					<Form.Field form={registerForm} name="firstname">
						<Form.Control let:attrs>
							<Form.Label>Prénom</Form.Label>
							<Input {...attrs} bind:value={$registerFormData.firstname} placeholder="Philip" />
						</Form.Control>
						<Form.FieldErrors />
					</Form.Field>
					<Form.Field form={registerForm} name="lastname">
						<Form.Control let:attrs>
							<Form.Label>Nom de famille</Form.Label>
							<Input {...attrs} bind:value={$registerFormData.lastname} placeholder="Barlow" />
						</Form.Control>
						<Form.FieldErrors />
					</Form.Field>
					<Form.Field form={registerForm} name="pseudo">
						<Form.Control let:attrs>
							<Form.Label>Nom d'utilisateur</Form.Label>
							<Input {...attrs} bind:value={$registerFormData.pseudo} placeholder="Cypherwolf" />
						</Form.Control>
						<Form.FieldErrors />
					</Form.Field>
					<Form.Button disabled={$registerDelayed}>
						{#if $registerDelayed}
							<Loader className="mr-2 h-4 w-4 animate-spin" />
						{/if}
						S'inscrire
					</Form.Button>
				</form>
			{/if}
			<ul class="flex justify-between">
				<li>
					<a class="text-muted-foreground hover:text-primary" href="/login">Se connecter</a>
				</li>
			</ul>
		</div>
	</div>
</div>