118 lines
3.0 KiB
Vue
118 lines
3.0 KiB
Vue
<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> |