45 lines
1.7 KiB
Vue
45 lines
1.7 KiB
Vue
<template>
|
|
<Head>
|
|
<Title>d[any] - Reinitialisation de mon mot de passe</Title>
|
|
</Head>
|
|
<div class="flex flex-1 flex-col justify-center items-center">
|
|
<div class="flex gap-8 items-center">
|
|
<span class="border border-transparent hover:border-light-35 dark:hover:border-dark-35 p-1 cursor-pointer" @click="() => $router.go(-1)"><Icon icon="radix-icons:arrow-left" class="text-light-50 dark:text-dark-50 w-6 h-6"/></span>
|
|
<h4 class="text-xl font-bold">Reinitialisation de mon mot de passe</h4>
|
|
</div>
|
|
<form @submit.prevent="() => submit()" class="flex flex-1 flex-col justify-center items-stretch">
|
|
<TextInput type="text" label="Utilisateur ou email" autocomplete="username" v-model="email"/>
|
|
<Button class="border border-light-35 dark:border-dark-35 self-center" :loading="status === 'pending'">Envoyer un email</Button>
|
|
</form>
|
|
<div v-if="status === 'success'" class="border border-light-green dark:border-dark-green bg-light-greenBack dark:bg-dark-greenBack text-wrap mt-4 py-2 px-4 max-w-96">
|
|
Un mail vous a été envoyé si un compte existe pour cet identifiant.
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Icon } from '@iconify/vue/dist/iconify.js';
|
|
|
|
definePageMeta({
|
|
layout: 'login',
|
|
usersGoesTo: '/user/profile',
|
|
});
|
|
|
|
const email = ref(''), status = ref<'idle' | 'pending' | 'success' | 'error'>('idle');
|
|
|
|
async function submit()
|
|
{
|
|
status.value = 'pending';
|
|
try {
|
|
await $fetch(`/api/auth/request-reset`, {
|
|
body: { profile: email.value },
|
|
method: 'post',
|
|
});
|
|
status.value = 'success';
|
|
}
|
|
catch(e)
|
|
{
|
|
status.value = 'error';
|
|
}
|
|
}
|
|
</script> |