102 lines
3.6 KiB
Svelte
102 lines
3.6 KiB
Svelte
<script lang="ts">
|
|
import { resolve } from '$app/paths';
|
|
import { registerSchema } from '$lib/auth/schemas';
|
|
import PageMeta from '$lib/components/seo/page-meta.svelte';
|
|
import { Button } from '$lib/components/ui/button/index.js';
|
|
import * as Card from '$lib/components/ui/card/index.js';
|
|
import * as Field from '$lib/components/ui/field/index.js';
|
|
import { Input } from '$lib/components/ui/input/index.js';
|
|
import { m } from '$lib/paraglide/messages';
|
|
import { register } from '$lib/remotes/auth.remote';
|
|
import { extractErrorMessage } from '$lib/utils';
|
|
import { toast } from 'svelte-sonner';
|
|
|
|
const id = $props.id();
|
|
</script>
|
|
|
|
<PageMeta title={m.seo_title_auth_sign_up()} description={m.seo_desc_auth_sign_up()} noIndex />
|
|
{#if register.result?.email}
|
|
<Card.Root>
|
|
<Card.Header class="text-center">
|
|
<Card.Title class="text-xl">{m.check_your_email()}</Card.Title>
|
|
<Card.Description class="text-balance"
|
|
>{m.verification_sent({ email: register.result.email })}</Card.Description
|
|
>
|
|
</Card.Header>
|
|
<Card.Footer>
|
|
<Button href={resolve('/auth/sign-in')} variant="outline" class="w-full"
|
|
>{m.back_to_login()}</Button
|
|
>
|
|
</Card.Footer>
|
|
</Card.Root>
|
|
{:else}
|
|
<Card.Root>
|
|
<Card.Header class="text-center">
|
|
<Card.Title class="text-xl">{m.sign_up_title()}</Card.Title>
|
|
<Card.Description class="text-balance">{m.sign_up_description()}</Card.Description>
|
|
</Card.Header>
|
|
<Card.Content>
|
|
<form
|
|
oninput={() => register.validate()}
|
|
{...register.preflight(registerSchema).enhance(async ({ submit }) => {
|
|
try {
|
|
await submit();
|
|
} catch (error) {
|
|
console.error(error);
|
|
toast.error(extractErrorMessage(error) ?? m.errors_generic());
|
|
}
|
|
})}
|
|
>
|
|
<Field.Group>
|
|
<Field.Field>
|
|
<Field.Label for="username-{id}">{m.username()}</Field.Label>
|
|
<Input
|
|
id="username-{id}"
|
|
placeholder={m.username_placeholder()}
|
|
{...register.fields.username.as('text')}
|
|
required
|
|
/>
|
|
{#each register.fields.username.issues() as issue, i (`${issue}-${i}`)}
|
|
<Field.Error>{issue.message}</Field.Error>
|
|
{/each}
|
|
</Field.Field>
|
|
<Field.Field>
|
|
<Field.Label for="email-{id}">{m.email()}</Field.Label>
|
|
<Input
|
|
id="email-{id}"
|
|
placeholder={m.email_placeholder()}
|
|
{...register.fields.email.as('email')}
|
|
required
|
|
/>
|
|
{#each register.fields.email.issues() as issue, i (`${issue}-${i}`)}
|
|
<Field.Error>{issue.message}</Field.Error>
|
|
{/each}
|
|
</Field.Field>
|
|
<Field.Field>
|
|
<Field.Label for="password-{id}">{m.password()}</Field.Label>
|
|
<Input id="password-{id}" {...register.fields._password.as('password')} required />
|
|
{#each register.fields._password.issues() as issue, i (`${issue}-${i}`)}
|
|
<Field.Error>{issue.message}</Field.Error>
|
|
{/each}
|
|
</Field.Field>
|
|
<Field.Field>
|
|
<Field.Label for="confirm-{id}">{m.confirm_password()}</Field.Label>
|
|
<Input id="confirm-{id}" {...register.fields._confirm.as('password')} required />
|
|
{#each register.fields._confirm.issues() as issue, i (`${issue}-${i}`)}
|
|
<Field.Error>{issue.message}</Field.Error>
|
|
{/each}
|
|
<Field.Description>{m.password_hint()}</Field.Description>
|
|
</Field.Field>
|
|
<Field.Field>
|
|
<Button type="submit" disabled={!!register.pending}>{m.create_account()}</Button>
|
|
<Field.Description class="text-center">
|
|
{m.already_have_account()}
|
|
<a href={resolve('/auth/sign-in')} class="link">{m.login()}</a>
|
|
</Field.Description>
|
|
</Field.Field>
|
|
</Field.Group>
|
|
</form>
|
|
</Card.Content>
|
|
</Card.Root>
|
|
{/if}
|