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

<script lang="ts">
	import { page } from '$app/state';
	import type { PageProps } from './$types';

	import { fade } from 'svelte/transition';

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

	import * as Form from '$lib/components/ui/form';
	import { Input } from '$lib/components/ui/input';

	import { formConfirmationSchema, formSchema } from './schema';

	let { data }: PageProps = $props();

	const links = [{ href: `/login${page.url.search}`, name: 'Se connecter' }];

	let confirmation = $state(false);

	const form = superForm(data.form, {
		validators: zodClient(formSchema),
		delayMs: 500,
		invalidateAll: false,
		onResult: ({ result }) => {
			switch (result.type) {
				case 'success':
					toast.message('Demande de confirmation', {
						description: `Un code vous à été ${confirmation ? 'renvoyé' : 'envoyé'}.`
					});
					formConfirmationData.set({
						...$formData,
						passwd: '',
						confirm: '',
						code: ''
					});
					confirmation = true;
					break;
			}
		}
	});

	const { form: formData, enhance: formEnhance, delayed: formDelayed } = form;

	const formConfirmation = superForm(data.formConfirmation, {
		validators: zodClient(formConfirmationSchema),
		delayMs: 500
	});

	let {
		form: formConfirmationData,
		enhance: formConfirmationEnhance,
		delayed: formConfirmationDelayed
	} = formConfirmation;
</script>

{#if !confirmation}
	<h2 class="mx-auto text-xl font-bold">Inscription</h2>

	<form method="POST" use:formEnhance action="?/register">
		<Form.Field {form} name="email">
			<Form.Control>
				{#snippet children({ props })}
					<Form.Label>Email</Form.Label>
					<Input
						type="email"
						{...props}
						bind:value={$formData.email}
						placeholder="philipzcwbarlow@peerat.dev"
					/>
				{/snippet}
			</Form.Control>
			<Form.FieldErrors />
		</Form.Field>
		<Form.Field {form} name="firstname">
			<Form.Control>
				{#snippet children({ props })}
					<Form.Label>Prénom</Form.Label>
					<Input {...props} bind:value={$formData.firstname} placeholder="Philip" />
				{/snippet}
			</Form.Control>
			<Form.FieldErrors />
		</Form.Field>
		<Form.Field {form} name="lastname">
			<Form.Control>
				{#snippet children({ props })}
					<Form.Label>Nom</Form.Label>
					<Input {...props} bind:value={$formData.lastname} placeholder="Barlow" />
				{/snippet}
			</Form.Control>
			<Form.FieldErrors />
		</Form.Field>
		<Form.Field {form} name="pseudo">
			<Form.Control>
				{#snippet children({ props })}
					<Form.Label>Nom d'utilisateur</Form.Label>
					<Input {...props} bind:value={$formData.pseudo} placeholder="Cypherwolf" />
				{/snippet}
			</Form.Control>
			<Form.Description>C'est le nom qui sera affiché publiquement.</Form.Description>
			<Form.FieldErrors />
		</Form.Field>
		<Form.Button disabled={$formDelayed}>
			{#if $formDelayed}
				<Loader class="mr-2 size-4 animate-spin" />
			{/if}
			Continuer
		</Form.Button>
	</form>
{:else}
	<h2 class="mx-auto text-xl font-bold">Confirmation de l'inscription</h2>

	<form method="POST" use:formConfirmationEnhance action="?/confirmation">
		<Form.Field form={formConfirmation} name="email">
			<Form.Control>
				{#snippet children({ props })}
					<Form.Label>Email</Form.Label>
					<Input
						type="email"
						{...props}
						bind:value={$formConfirmationData.email}
						placeholder="philipzcwbarlow@peerat.dev"
					/>
				{/snippet}
			</Form.Control>
			<Form.FieldErrors />
		</Form.Field>
		<Form.Field form={formConfirmation} name="firstname">
			<Form.Control>
				{#snippet children({ props })}
					<Form.Label>Prénom</Form.Label>
					<Input {...props} bind:value={$formConfirmationData.firstname} placeholder="Philip" />
				{/snippet}
			</Form.Control>
			<Form.Description>Il ne sera pas affiché publiquement.</Form.Description>
			<Form.FieldErrors />
		</Form.Field>
		<Form.Field form={formConfirmation} name="lastname">
			<Form.Control>
				{#snippet children({ props })}
					<Form.Label>Nom</Form.Label>
					<Input {...props} bind:value={$formConfirmationData.lastname} placeholder="Barlow" />
				{/snippet}
			</Form.Control>
			<Form.Description>Il ne sera pas affiché publiquement.</Form.Description>
			<Form.FieldErrors />
		</Form.Field>
		<Form.Field form={formConfirmation} name="pseudo">
			<Form.Control>
				{#snippet children({ props })}
					<Form.Label>Nom d'utilisateur</Form.Label>
					<Input {...props} bind:value={$formConfirmationData.pseudo} placeholder="Cypherwolf" />
				{/snippet}
			</Form.Control>
			<Form.Description>C'est le nom qui sera affiché publiquement.</Form.Description>
			<Form.FieldErrors />
		</Form.Field>

		<div
			transition:fade={{
				duration: 300
			}}
		>
			<Form.Field form={formConfirmation} name="passwd">
				<Form.Control>
					{#snippet children({ props })}
						<Form.Label>Mot de passe</Form.Label>
						<Input
							type="password"
							{...props}
							bind:value={$formConfirmationData.passwd}
							placeholder="*********"
						/>
					{/snippet}
				</Form.Control>
				<Form.FieldErrors />
			</Form.Field>
			<Form.Field form={formConfirmation} name="confirm">
				<Form.Control>
					{#snippet children({ props })}
						<Form.Label>Confirmation du mot de passe</Form.Label>
						<Input
							type="password"
							{...props}
							bind:value={$formConfirmationData.confirm}
							placeholder="*********"
						/>
					{/snippet}
				</Form.Control>
				<Form.FieldErrors />
			</Form.Field>
			<Form.Field form={formConfirmation} name="code">
				<Form.Control>
					{#snippet children({ props })}
						<Form.Label>Code de confirmation</Form.Label>
						<Input {...props} bind:value={$formConfirmationData.code} placeholder="00fa-00fa" />
					{/snippet}
				</Form.Control>
				<Form.FieldErrors />
			</Form.Field>
		</div>

		<Form.Button disabled={$formConfirmationDelayed}>
			{#if $formConfirmationDelayed}
				<Loader class="mr-2 size-4 animate-spin" />
			{/if}
			Confirmer
		</Form.Button>
	</form>
{/if}

<ul class="flex justify-between">
	{#snippet link({ href, name }: { href: string; name: string })}
		<li>
			<a class="font-medium text-muted-foreground hover:text-primary" {href}>
				{name}
			</a>
		</li>
	{/snippet}
	{#each links as { href, name }}
		{@render link({ href, name })}
	{/each}
</ul>