initial commit

app/pages/passwordReset.vue

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