88 lines
4.8 KiB
Vue
88 lines
4.8 KiB
Vue
<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>
|
|
<h4 class="text-center flex-1 text-xl font-bold">Modification de mon mot de passe</h4>
|
|
</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';
|
|
import { Toaster } from '#shared/components.util';
|
|
|
|
definePageMeta({
|
|
layout: 'login',
|
|
guestsGoesTo: '/user/login',
|
|
});
|
|
|
|
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> |