86 lines
2.2 KiB
Svelte
86 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { enhance } from '$app/forms';
|
|
import type { PageProps } from './$types';
|
|
|
|
onMount(() => {
|
|
if (document.cookie.includes('jwt=')) {
|
|
window.location.href = '/account';
|
|
}
|
|
});
|
|
|
|
// receive form data from server
|
|
let { data, form }: PageProps = $props();
|
|
</script>
|
|
|
|
<div class="signin-container place-items-center pt-8">
|
|
<div class="elevated separator-borders bg content rounded-md p-8">
|
|
<h1 class="text-weight-semibold mb-4 text-center">Register</h1>
|
|
<p>Create your account. Its free and only takes a minute!</p>
|
|
<form method="POST" class="arrange-vertically" use:enhance>
|
|
<div class="mt-4 text-sm font-semibold">
|
|
Username <span class="text-red-500">*</span>
|
|
<input
|
|
type="text"
|
|
name="username"
|
|
id="username"
|
|
placeholder="Username"
|
|
class="input-field w-full font-normal"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="mt-4 text-sm font-semibold">
|
|
Email (optional)
|
|
<input
|
|
type="text"
|
|
name="email"
|
|
id="email"
|
|
placeholder="Email"
|
|
class="input-field w-full font-normal"
|
|
/>
|
|
</div>
|
|
<div class="mt-4 text-sm font-semibold">
|
|
Full name (optional)
|
|
<input
|
|
type="text"
|
|
name="fullName"
|
|
id="fullName"
|
|
placeholder="Full name"
|
|
class="input-field w-full font-normal"
|
|
/>
|
|
</div>
|
|
<div class="relative mt-4 text-sm font-semibold">
|
|
Password <span class="text-red-500">*</span>
|
|
<input
|
|
type="password"
|
|
class="input-field w-full font-normal"
|
|
placeholder="Password"
|
|
name="password"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="relative mt-4 text-sm font-semibold">
|
|
Confirm password <span class="text-red-500">*</span>
|
|
<input
|
|
type="password"
|
|
class="input-field w-full font-normal"
|
|
placeholder="Password"
|
|
name="confirmPassword"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{#if form?.errorMessage}
|
|
<div class="my-2 text-red-500">{form.errorMessage}</div>
|
|
{/if}
|
|
|
|
<button
|
|
class="primary-bg-color mt-8 w-full rounded px-2 py-2"
|
|
type="submit"
|
|
formaction="?/register">Create account</button
|
|
>
|
|
<a href="/signin" class="low-emphasis-text-button mt-2">I already have an account.</a>
|
|
</form>
|
|
</div>
|
|
</div>
|