<template>
    <Head>
        <Title>d[any] - Modification 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>
            <ProseH4>Modification de mon mot de passe</ProseH4>
        </div>
        <form @submit.prevent="submit" class="flex flex-1 flex-col justify-center items-stretch">
            <TextInput type="password" label="Ancien mot de passe" name="old-password" autocomplete="current-password" v-model="oldPasswd"/>
            <TextInput type="password" label="Nouveau mot de passe" name="new-password" autocomplete="new-password" v-model="newPasswd" :class="{ 'border-light-red dark:border-dark-red': error }"/>
            <div class="grid grid-cols-2 flex-col font-light border border-light-35 dark:border-dark-35 px-4 py-2 m-4 ms-0 text-sm leading-[18px] lg:text-base order-8 col-span-2 md:col-span-1 md:order-none">
                <span class="col-span-2">Prérequis de sécurité</span>
                <span class="ps-4 flex items-center gap-2" :class="{'text-light-red dark:text-dark-red': !checkedLength}"><Icon v-show="!checkedLength" icon="radix-icons:cross-2" />8 à 128 caractères</span>
                <span class="ps-4 flex items-center gap-2" :class="{'text-light-red dark:text-dark-red': !checkedLower}"><Icon v-show="!checkedLower" icon="radix-icons:cross-2" />Une minuscule</span>
                <span class="ps-4 flex items-center gap-2" :class="{'text-light-red dark:text-dark-red': !checkedUpper}"><Icon v-show="!checkedUpper" icon="radix-icons:cross-2" />Une majuscule</span>
                <span class="ps-4 flex items-center gap-2" :class="{'text-light-red dark:text-dark-red': !checkedDigit}"><Icon v-show="!checkedDigit" icon="radix-icons:cross-2" />Un chiffre</span>
                <span class="ps-4 flex items-center gap-2" :class="{'text-light-red dark:text-dark-red': !checkedSymbol}"><Icon v-show="!checkedSymbol" icon="radix-icons:cross-2" />Un caractère special</span>
            </div>
            <TextInput type="password" label="Repeter le nouveau mot de passe" autocomplete="new-password" v-model="repeatPasswd" :class="{ 'border-light-red dark:border-dark-red': manualError }"/>
            <Button type="submit" class="border border-light-35 dark:border-dark-35 self-center" :loading="status === 'pending'">Mettre à jour mon mot de passe</Button>
        </form>
    </div>
</template>

<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';

definePageMeta({
    layout: 'login',
    guestsGoesTo: '/user/login',
});

const toaster = useToast();
const { user } = useUserSession();
const status = ref<'idle' | 'pending' | 'success' | 'error'>('idle'), manualError = ref(false);
const oldPasswd = ref(''), newPasswd = ref(''), repeatPasswd = ref('');

const checkedLength = computed(() => newPasswd.value.length >= 8 && newPasswd.value.length <= 128);
const checkedLower = computed(() => newPasswd.value.toUpperCase() !== newPasswd.value);
const checkedUpper = computed(() => newPasswd.value.toLowerCase() !== newPasswd.value);
const checkedDigit = computed(() => /[0-9]/.test(newPasswd.value));
const checkedSymbol = computed(() => " !\"#$%&'()*+,-./:;<=>?@[]^_`{|}~".split("").some(e => newPasswd.value.includes(e)));

const equalsPasswd = computed(() => newPasswd.value && repeatPasswd.value && newPasswd.value === repeatPasswd.value);

const error = computed(() => !checkedLength.value || !checkedLower.value || !checkedUpper.value || !checkedDigit.value || !checkedSymbol.value);

async function submit()
{
    if(!equalsPasswd.value)
    {
        manualError.value = true;
        return;
    }

    manualError.value = false;
    status.value = 'pending';
    try {
        const result = await $fetch(`/api/users/${user.value?.id}/change-password`, {
            method: 'post',
            body: {
                oldPassword: oldPasswd.value,
                newPassword: newPasswd.value,
            }
        });

        if(result && result.success)
        {
            status.value = 'success';

            toaster.add({ content: 'Votre mot de passe a été modifié avec succès.', duration: 10000, timer: true, type: 'success' });
            useRouter().push({ name: 'user-profile' });
        }
        else
        {
            status.value = 'error';

            toaster.add({ content: result.error ?? 'Erreur inconnue', duration: 10000, timer: true, type: 'error' });
        }
    } catch(e) {
        status.value = 'error';

        toaster.add({ content: (e as Error).message ?? e, duration: 10000, timer: true, type: 'error' });
    }
}
</script>