<template>
  <h1>{{$t('pwdReset.title')}}</h1>

      <form @submit.prevent="handleSubmit">

      <InputPassword
        name="password"
        placeholder=""
        :label="$t('pwdReset.pwdLabel1')"
        v-model="password"
        @input="check()"
      >
        <template #message>
          <p v-if="pwErrors.isEmpty" class="error">{{ $t('pwdInput.errorPwdEmpty') }}</p>
          <p v-if="pwErrors.isntValid" class="error">{{ $t('pwdInput.errorPwdIsntValid') }}</p>
        </template>
      </InputPassword>
      <PasswordChecker/>
      <InputPassword
        name="passwordVerif"
        placeholder=""
        :label="$t('pwdReset.pwdLabel2')"
        v-model="passwordVerif"
        >
        <template #message>
          <p v-if="pwErrors.doesNotMatch" class="error">{{ $t('pwdInput.pwdsDoesNotMatch') }}</p>
          <p v-if="pwErrors.verifyEmpty" class="error">{{ $t('pwdInput.pwdConfirmEmpty') }}</p>
        </template>
      </InputPassword>

      <ButtonBase
      :loading="loading"
      :disabled="loading || success === true">
        {{ $t('pwdReset.formBtn') }}
      </ButtonBase>
    </form>
<div v-if="success">
  <p>{{ $t('pwdReset.successMessage') }}</p>
  <NuxtLink :to="localePath('login')">{{ $t('pwdReset.loginLink') }}</NuxtLink>
</div>
<div v-else-if="success===false" class="error">
  <p>{{ $t('pwdReset.errorMessage') }}</p>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  public: true,
})

const route = useRoute()
const localePath=useLocalePath()
const token = ref(route.query.token)
const authStore = useAuthStore()


//** pwdReset up management **/
const passwordToolBox = usePasswordToolBoxStore()

// password relative functions
const check = () => {
  passwordToolBox.updatePassword(password.value)
}

const password=ref('')
const passwordVerif=ref('')

const pwErrors = ref({
    isEmpty: false as boolean,
    verifyEmpty: false as boolean,
    isntValid: false as boolean,
    doesNotMatch:false as boolean,
})
const loading = ref(false as boolean)
const success = ref(null as null|boolean);

// form relative functions
const handleSubmit = async() => {
  loading.value = true
  //réinitialisation des erreurs 
  pwErrors.value.isEmpty = false;
  pwErrors.value.verifyEmpty = false;
  pwErrors.value.isntValid = false;
  pwErrors.value.doesNotMatch = false;
  // Check errors
  pwErrors.value.isEmpty = ( password.value == "" );
  pwErrors.value.verifyEmpty = ( passwordVerif.value == "" );
  pwErrors.value.isntValid = !passwordToolBox.isPasswordValid();
  pwErrors.value.doesNotMatch = ( password.value != passwordVerif.value );

  if ( !pwErrors.value.isEmpty &&
    !pwErrors.value.verifyEmpty &&
    !pwErrors.value.isntValid &&
    !pwErrors.value.doesNotMatch) {
    success.value = await authStore.pwdReset(password.value, token.value)
  }
  loading.value = false
  password.value = ""
  passwordVerif.value = ""
}
</script>

<style scoped lang="scss">

form {
  display: flex;
  flex-direction: column;
  padding: 1em;
  margin: 0;
}

.error{
  & > p{
    font-weight: bold;
    color: rgb(185, 0, 0);
  }
}
</style>