57 lines
1.4 KiB
Vue
57 lines
1.4 KiB
Vue
<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> |