<template>
  <form @submit.prevent="handleFormSubmit">
    <InputPassword
    name="password"
    label=""
    :placeholder="$t('profile.pwd_challenge_input_label')"
    v-model="password"
    >
    <p>{{ password }}</p>
      <template #message>
        <p v-if="errors.passwordEmpty" class="error">{{ $t('ui.errorPwdEmpty') }}</p>
        <p v-if="errors.wrongPassword" class="error">{{ $t('ui.errorWrongPwd') }}</p>
      </template>
    </InputPassword>
    <ButtonBase
      :disabled="password === '' || awaiting"
      :loading="awaiting"
    >
      {{ $t('loginFormBtn') }}
    </ButtonBase>
  </form>
</template> 
<script setup lang="ts">
const authStore=useAuthStore()
const password = ref('');
const errors = ref({
  "passwordEmpty":false,
  "wrongPassword":false
  })
const awaiting = ref(false);
const handleFormSubmit = async() => {
  awaiting.value = true
  errors.value.wrongPassword = false;
  errors.value.passwordEmpty = false;

  if (!password.value){
    errors.value.passwordEmpty = true;
    awaiting.value = false;
    return false
  }

  // Envoie de la requette à l'endpoint JWT et récupération d'un token de connexion
  const success = await authStore.pwdChallenge(password.value)
  if (success) {
    awaiting.value = false
  }
  else{
    errors.value.wrongPassword = true;
    awaiting.value = false
  }
}

</script>

<style lang="scss" scoped>

</style>