646164c85d
Prompt: use 'https://app.clockify.me/signup' design to make login and register buttons link to acutal login and register pages on the project. We don't need "Continue with X" social buttons, only method of authentiction for now will be email/password Stats: Context: 88,970 tokens Time: 37m 48s
112 lines
4.3 KiB
Vue
112 lines
4.3 KiB
Vue
<script setup lang="ts">
|
|
import { Form, Head } from '@inertiajs/vue3';
|
|
import InputError from '@/components/InputError.vue';
|
|
import PasswordInput from '@/components/PasswordInput.vue';
|
|
import TextLink from '@/components/TextLink.vue';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Spinner } from '@/components/ui/spinner';
|
|
import { login } from '@/routes';
|
|
import { store } from '@/routes/register';
|
|
|
|
defineOptions({
|
|
layout: {
|
|
title: 'Create an account',
|
|
description: 'Enter your details below to create your account',
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Register" />
|
|
|
|
<Form
|
|
v-bind="store.form()"
|
|
:reset-on-success="['password', 'password_confirmation']"
|
|
v-slot="{ errors, processing }"
|
|
class="flex flex-col gap-5"
|
|
>
|
|
<div class="grid gap-5">
|
|
<div class="grid gap-2">
|
|
<Label for="name" class="text-sm font-medium text-[#333]">Name</Label>
|
|
<Input
|
|
id="name"
|
|
type="text"
|
|
required
|
|
autofocus
|
|
tabindex="1"
|
|
autocomplete="name"
|
|
name="name"
|
|
placeholder="Full name"
|
|
class="h-11 bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
|
|
/>
|
|
<InputError :message="errors.name" />
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label for="email" class="text-sm font-medium text-[#333]">Email address</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
required
|
|
tabindex="2"
|
|
autocomplete="email"
|
|
name="email"
|
|
placeholder="email@example.com"
|
|
class="bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
|
|
/>
|
|
<InputError :message="errors.email" />
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label for="password" class="text-sm font-medium text-[#333]">Password</Label>
|
|
<PasswordInput
|
|
id="password"
|
|
required
|
|
tabindex="3"
|
|
autocomplete="new-password"
|
|
name="password"
|
|
placeholder="Password"
|
|
class="bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
|
|
/>
|
|
<InputError :message="errors.password" />
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label for="password_confirmation" class="text-sm font-medium text-[#333]">Confirm password</Label>
|
|
<PasswordInput
|
|
id="password_confirmation"
|
|
required
|
|
tabindex="4"
|
|
autocomplete="new-password"
|
|
name="password_confirmation"
|
|
placeholder="Confirm password"
|
|
class="bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
|
|
/>
|
|
<InputError :message="errors.password_confirmation" />
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
class="h-11 w-full bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
|
|
tabindex="5"
|
|
:disabled="processing"
|
|
data-test="register-user-button"
|
|
>
|
|
<Spinner v-if="processing" />
|
|
<span v-else>Create account</span>
|
|
</Button>
|
|
</div>
|
|
|
|
<div class="text-center text-sm text-[#607d8b]">
|
|
Already have an account?
|
|
<TextLink
|
|
:href="login()"
|
|
class="text-[#03a9f4] hover:text-[#0288d1] decoration-transparent hover:decoration-current underline-offset-4"
|
|
tabindex="6"
|
|
>Log in</TextLink>
|
|
</div>
|
|
</Form>
|
|
</template>
|