124 lines
3.3 KiB
Svelte
124 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { enhance } from '$app/forms';
|
|
import type { PageProps } from './$types';
|
|
import { telFormatter } from '$lib/shared.svelte';
|
|
|
|
onMount(() => {
|
|
if (document.cookie.includes('jwt=')) {
|
|
window.location.href = '/account';
|
|
}
|
|
document.getElementById('phone')?.addEventListener('input', function (this: HTMLInputElement) {
|
|
this.value = telFormatter(this.value);
|
|
});
|
|
});
|
|
|
|
// 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="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>
|
|
<div class="mt-4 text-sm font-semibold">
|
|
Full name <span class="text-red-500">*</span>
|
|
<input
|
|
type="text"
|
|
name="fullName"
|
|
id="fullName"
|
|
placeholder="Full name"
|
|
class="input-field w-full font-normal"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="mt-4 text-sm font-semibold">
|
|
Email <span class="text-red-500">*</span>
|
|
<input
|
|
type="text"
|
|
name="email"
|
|
id="email"
|
|
placeholder="Email"
|
|
class="input-field w-full font-normal"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="mt-4 text-sm font-semibold">
|
|
Phone (optional)
|
|
<input
|
|
type="tel"
|
|
name="phone"
|
|
id="phone"
|
|
placeholder="Phone"
|
|
class="w-full rounded font-normal"
|
|
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
|
|
/>
|
|
</div>
|
|
<div class="relative mt-4 text-sm font-semibold">
|
|
<label for="companyCode"> Company code (optional) </label>
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
name="companyCode"
|
|
id="companyCode"
|
|
placeholder="Company code"
|
|
class="input-field w-full pr-10 font-normal"
|
|
/>
|
|
<a
|
|
type="button"
|
|
href="/info#company-codes"
|
|
class="hyperlink-color tooltip absolute inset-y-0 right-2 flex items-center"
|
|
>
|
|
<span class="material-symbols-outlined">info</span><span
|
|
class="tooltip-text font-sans text-sm font-normal">About company codes</span
|
|
>
|
|
</a>
|
|
</div>
|
|
</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>
|