56 lines
2.0 KiB
Vue
56 lines
2.0 KiB
Vue
|
<script lang="ts" setup>
|
|||
|
|
import {useAccountStore} from "~/store/account";
|
|||
|
|
import type {ApiError} from "~/composables/fetch-api";
|
|||
|
|
import {useNotificationStore} from "~/store/notification";
|
|||
|
|
|
|||
|
|
definePageMeta({
|
|||
|
|
layout: 'main-header'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const email = ref();
|
|||
|
|
const newPassword = ref();
|
|||
|
|
const confirmationPassword = ref();
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
if (!useRoute().query.token) {
|
|||
|
|
navigateTo("/");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function resetPassword() {
|
|||
|
|
const token = useRoute().query.token;
|
|||
|
|
useAccountStore().resetPassword(token, email.value, newPassword.value, confirmationPassword.value)
|
|||
|
|
.then(() => {
|
|||
|
|
useNotificationStore().pushNotification("success", {message: "Votre mot de passe a bien été ré-initialisé."});
|
|||
|
|
navigateTo("/login");
|
|||
|
|
})
|
|||
|
|
.catch((apiError: ApiError) => {
|
|||
|
|
let details;
|
|||
|
|
if (apiError.fieldErrors) {
|
|||
|
|
details = apiError.fieldErrors.map(error => `${error.fields!.join(", ")} ${error.detail}`);
|
|||
|
|
}
|
|||
|
|
useNotificationStore().pushNotification("warn", {message: apiError.message, details});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<section>
|
|||
|
|
<h1>Ré-initialisé mon mot de passe</h1>
|
|||
|
|
<form class="form" @submit.prevent="resetPassword">
|
|||
|
|
<label for="email">Mon e-mail</label>
|
|||
|
|
<input id="email" v-model="email" type="email" autocomplete="username" required>
|
|||
|
|
<p class="form__help">Votre mot de passe doit fait au moins 8 caractères, et être composé d’au moins une
|
|||
|
|
majuscule, une minuscule, un chiffre de 0 à 9, et un caractère spécial parmi @?!#$&;,:</p>
|
|||
|
|
<label for="newPassword">Nouveau mot de passe</label>
|
|||
|
|
<input id="newPassword" v-model="newPassword" type="password" required>
|
|||
|
|
<label for="confirmationPassword">Confirmation du mot de passe</label>
|
|||
|
|
<input id="confirmationPassword" v-model="confirmationPassword" type="password" required>
|
|||
|
|
<div class="button-container">
|
|||
|
|
<button class="button orange" type="submit">Enregistrer</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</section>
|
|||
|
|
</template>
|
|||
|
|
|