teoldalad/routes/dashboard/register/+page.svelte
2024-03-13 00:30:45 +01:00

62 lines
No EOL
2 KiB
Svelte

<script lang="ts">
import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
import TextInput from '$lib/components/dashboard/elements/TextInput.svelte';
import Panel from '$lib/components/dashboard/auth/Panel.svelte';
import Checkbox from '$lib/components/dashboard/elements/Checkbox.svelte';
import constraints from '$lib/constraints.js';
export let data;
</script>
<svelte:head>
<title>YourSitee</title>
</svelte:head>
<Panel
title="Join thousands of people already using YourSitee"
links={[
{ url: 'login', text: 'Login' },
// { url: 'login/recovery', text: 'Forgot password?' },
]}
button="Register">
<InputGroup title="Username" required={true}>
<TextInput
name="username"
required
placeholder="Pick a cool username"
minlength={constraints.username.min}
maxlength={constraints.username.max}
value={data.username ?? ''} />
</InputGroup>
<InputGroup title="Email address" required={true}>
<TextInput
name="email"
required
type="email"
placeholder="Provide your email"
minlength={constraints.email.min}
maxlength={constraints.email.max}
value={data.email ?? ''} />
</InputGroup>
<InputGroup title="Password" required={true}>
<TextInput
name="password"
required
placeholder="Password"
type="password"
minlength={constraints.password.min}
maxlength={constraints.password.max} />
<TextInput
name="password-confirm"
required
placeholder="Password again"
type="password"
minlength={constraints.password.min}
maxlength={constraints.password.max} />
</InputGroup>
<Checkbox name="accept" required>
By checking this box, I acknowledge that I have read and agree to abide by the <a href="/terms" target="_blank"
>Terms of Service</a>
and the <a href="/privacy" target="_blank">Privacy Policy</a>.</Checkbox>
</Panel>