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
95 lines
3.5 KiB
Vue
95 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { Form, Head } from '@inertiajs/vue3';
|
|
import { ref } from 'vue';
|
|
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 { update } from '@/routes/password';
|
|
|
|
defineOptions({
|
|
layout: {
|
|
title: 'Reset password',
|
|
description: 'Enter your new password below',
|
|
},
|
|
});
|
|
|
|
const props = defineProps<{
|
|
token: string;
|
|
email: string;
|
|
}>();
|
|
|
|
const inputEmail = ref(props.email);
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Reset password" />
|
|
|
|
<Form
|
|
v-bind="update.form()"
|
|
:transform="(data) => ({ ...data, token, email })"
|
|
:reset-on-success="['password', 'password_confirmation']"
|
|
v-slot="{ errors, processing }"
|
|
>
|
|
<div class="grid gap-5">
|
|
<div class="grid gap-2">
|
|
<Label for="email" class="text-sm font-medium text-[#333]">Email</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
name="email"
|
|
autocomplete="email"
|
|
v-model="inputEmail"
|
|
class="h-11 bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] cursor-not-allowed"
|
|
readonly
|
|
/>
|
|
<InputError :message="errors.email" class="mt-2" />
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label for="password" class="text-sm font-medium text-[#333]">Password</Label>
|
|
<PasswordInput
|
|
id="password"
|
|
name="password"
|
|
autocomplete="new-password"
|
|
autofocus
|
|
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"
|
|
name="password_confirmation"
|
|
autocomplete="new-password"
|
|
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"
|
|
:disabled="processing"
|
|
data-test="reset-password-button"
|
|
>
|
|
<Spinner v-if="processing" />
|
|
<span v-else>Reset password</span>
|
|
</Button>
|
|
</div>
|
|
|
|
<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>
|
|
</Form>
|
|
</template>
|