<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>

