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
68 lines
2.3 KiB
Vue
68 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { Form, Head } from '@inertiajs/vue3';
|
|
import InputError from '@/components/InputError.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 { email } from '@/routes/password';
|
|
|
|
defineOptions({
|
|
layout: {
|
|
title: 'Forgot password',
|
|
description: 'Enter your email and we\'ll send you a link to reset your password',
|
|
},
|
|
});
|
|
|
|
defineProps<{
|
|
status?: string;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Forgot password" />
|
|
|
|
<div
|
|
v-if="status"
|
|
class="mb-2 text-center text-sm font-medium text-green-600"
|
|
>
|
|
{{ status }}
|
|
</div>
|
|
|
|
<div class="space-y-5">
|
|
<Form v-bind="email.form()" v-slot="{ errors, processing }">
|
|
<div class="grid gap-2">
|
|
<Label for="email" class="text-sm font-medium text-[#333]">Email address</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
name="email"
|
|
autocomplete="off"
|
|
autofocus
|
|
placeholder="email@example.com"
|
|
class="h-11 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="pt-2">
|
|
<Button
|
|
class="w-full h-11 bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
|
|
:disabled="processing"
|
|
data-test="email-password-reset-link-button"
|
|
>
|
|
<Spinner v-if="processing" />
|
|
<span v-else>Email password reset link</span>
|
|
</Button>
|
|
</div>
|
|
</Form>
|
|
|
|
<div class="text-center text-sm text-[#607d8b]">
|
|
<span>Or, return to</span>
|
|
<TextLink :href="login()" class="text-[#03a9f4] hover:text-[#0288d1] decoration-transparent hover:decoration-current underline-offset-4">log in</TextLink>
|
|
</div>
|
|
</div>
|
|
</template>
|