golscontrol-frontend-v1/src/pages/Auth/ForgotPassword.vue
Moisés de Jesús Cortés Castellanos b6c8a347cd
ADD: Plantilla Holos (#1)
2024-12-13 16:15:01 -06:00

62 lines
1.6 KiB
Vue

<script setup>
import { useForm } from '@Services/Api';
import { useRouter } from 'vue-router';
import Input from '@Holos/Form/InputWithIcon.vue'
import PrimaryButton from '@Holos/Button/Primary.vue'
/** Definidores */
const router = useRouter()
/** Propiedades */
defineProps({
status: String,
});
const form = useForm({
email: '',
});
/** Métodos */
const submit = () => {
form.post(route('password.email'));
};
</script>
<template>
<div class="mb-4 text-sm text-justify">
{{ $t('auth.forgotPassword.description') }}
</div>
<div v-if="status" class="mb-4 font-medium text-sm text-green-600">
{{ status }}
</div>
<form @submit.prevent="submit">
<Input
icon="mail"
id="email"
type="email"
v-model="form.email"
:onError="form.errors.email"
:placeholder="$t('email.title')"
/>
<div class="flex flex-col gap-2 items-center justify-end mt-4">
<PrimaryButton
class="!w-full"
:class="{ 'opacity-25': form.processing }"
type="submit"
:disabled="form.processing"
>
{{ $t('auth.forgotPassword.sendLink') }}
</PrimaryButton>
<PrimaryButton
class="!w-full"
type="button"
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing"
@click="router.push($view({ name: 'index' }))"
>
{{ $t('auth.login') }}
</PrimaryButton>
</div>
</form>
</template>