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

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

	import { Loader2 } from 'lucide-svelte';
	import { toast } from 'svelte-sonner';
	import { zod } 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: zod(registerSchema),
		delayMs: 500,
		multipleSubmits: 'prevent',
		onResult({ result }) {
			switch (result.type) {
				case 'success':
					toast.message('Demande de confirmation', {
						description: `Un code vous à été ${confirmation ? 'renvoyé' : 'envoyé'}.`
					});
					registerConfirmationFormData.set({
						email: $registerFormData.email,
						firstname: $registerFormData.firstname,
						lastname: $registerFormData.lastname,
						pseudo: $registerFormData.pseudo,
						passwd: '',
						code: ''
					});
					confirmation = true;
					break;
				case 'error':
					confirmation = false;
					break;
			}
		}
	});

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

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

	const {
		form: registerConfirmationFormData,
		enhance: registerConfirmationEnhance,
		delayed: registerConfirmationDelayed
	} = registerConfirmationForm;

	export const snapshot: Snapshot = {
		capture: () => confirmation,
		restore: (value) => (confirmation = value)
	};
</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}
				<h1 class="mx-auto text-xl font-bold">Confirmation</h1>
				<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="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}
							<Loader2 class="mr-2 h-4 w-4 animate-spin" />
						{/if}
						Continuer
					</Form.Button>
				</form>
				<ul class="flex justify-between">
					<li>
						<a class="text-muted-foreground hover:text-primary" href="/login">Se connecter</a>
					</li>
					<li>
						<button
							on:click={() => {
								toast.message('Demande de confirmation', {
									description: 'Un code vous à été renvoyé.'
								});
							}}
							formaction="?/register"
							class="text-muted-foreground hover:text-primary"
						>
							Renvoyer le code
						</button>
					</li>
				</ul>
			{: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}
							<Loader2 className="h-4 w-4 animate-spin" />
						{/if}
						S'inscrire
					</Form.Button>
				</form>
				<ul class="flex justify-between">
					<li>
						<a class="text-muted-foreground hover:text-primary" href="/login">Se connecter</a>
					</li>
				</ul>
			{/if}
		</div>
	</div>
</div>