initial commit

app/pages/passwordResetRequest.vue

@@ -0,0 +1,105 @@
+<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>