<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 hover:dark: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';

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>