105 lines
2.9 KiB
Vue
105 lines
2.9 KiB
Vue
<template>
|
|
<h1>{{$t('pwdResetRequest.title')}}</h1>
|
|
<form @submit.prevent="handleFormSubmit()">
|
|
<InputEmail
|
|
v-model="email"
|
|
name="email"
|
|
:label="$t('signupLabelEmail')"
|
|
placeholder=""
|
|
:class="emailStatus"
|
|
|
|
>
|
|
<template #message>
|
|
<p v-if="emailErrors.isEmpty" class="error">{{ $t('signupErrorEmailEmpty') }}</p>
|
|
<p v-else-if="emailErrors.isntValid" class="error">{{ $t('signupErrorEmailIsntValid') }}</p>
|
|
<p v-else-if="emailValid" class="success">{{ $t('signupEmailIsValid') }}</p>
|
|
</template>
|
|
</InputEmail>
|
|
|
|
<ButtonBase
|
|
:disabled="!emailValid || awaiting"
|
|
:loading="awaiting">
|
|
{{ $t('pwdResetRequest.formBtn') }}
|
|
</ButtonBase>
|
|
|
|
<div class="error" v-if="formErrors.submitFailed">
|
|
<p>{{ $t('pwdResetRequest.pb') }}</p>
|
|
<p>{{ $t('pwdResetRequest.message') }} {{formErrors.message}}</p>
|
|
</div>
|
|
<div class="success" v-if="success">
|
|
<p>{{ $t('pwdResetRequest.successMessage') }}</p>
|
|
<p>{{ $t('pwdResetRequest.linkValidity') }}</p>
|
|
<p>{{ $t('pwdResetRequest.seeU') }}</p>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
public: true
|
|
})
|
|
const { locale } = useI18n()
|
|
const authStore = useAuthStore()
|
|
const email = ref("")
|
|
const awaiting = ref(false)
|
|
const emailErrors = ref({
|
|
isEmpty: false as boolean,
|
|
isntValid: false as boolean,
|
|
})
|
|
const formErrors = ref({
|
|
submitFailed: false as boolean,
|
|
message: null as string | null,
|
|
})
|
|
const success = ref(false)
|
|
|
|
const emailValid = computed(() => isValidEmail(email.value))
|
|
const emailStatus = computed(() => {
|
|
return emailValid.value ? "mail-is-valid" : "mail-is-invalid"
|
|
})
|
|
|
|
function isValidEmail(value: string):boolean {
|
|
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
|
|
}
|
|
|
|
const handleFormSubmit = async() => {
|
|
//* Errors reinitialisation...
|
|
awaiting.value = true
|
|
emailErrors.value.isEmpty = false;
|
|
emailErrors.value.isntValid = false;
|
|
formErrors.value.submitFailed = false;
|
|
formErrors.value.message = '';
|
|
success.value = false;
|
|
|
|
//* Now come the verifications
|
|
emailErrors.value.isEmpty = (email.value == '')
|
|
emailErrors.value.isntValid = ( !isValidEmail(email.value) );
|
|
|
|
if (emailErrors.value.isEmpty || emailErrors.value.isntValid){
|
|
return false;
|
|
}
|
|
const response = await authStore.pwdResetResquest(email.value, locale.value);
|
|
//* If we have a message, it means we have an error...
|
|
|
|
if (response == true){
|
|
success.value = true;
|
|
email.value = "";
|
|
awaiting.value = false;
|
|
}
|
|
else {
|
|
formErrors.value.submitFailed = true;
|
|
formErrors.value.message = authStore.error;
|
|
awaiting.value = false;
|
|
success.value = false;
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 1em;
|
|
margin: 0;
|
|
}
|
|
</style> |