fix: Ensure the two password fields match

Also improve the user experience by preventing partial logins and confirming when the password has been successfully changed.

Fixes #1886

src/i18n/en_US.json

@@ -890,6 +890,7 @@
   "Participation without account": "Participation without account",
   "Participations": "Participations",
   "Password": "Password",
+  "Password and confirmation password must be identical.":"Password and confirmation password must be identical.",
   "Password (confirmation)": "Password (confirmation)",
   "Password reset": "Password reset",
   "Past activities": "Passed activities",
@@ -1574,6 +1575,7 @@
   "Your participation still has to be approved by the organisers.": "Your participation still has to be approved by the organisers.",
   "Your participation will be validated once you click the confirmation link into the email, and after the organizer manually validates your participation.": "Your participation will be validated once you click the confirmation link into the email, and after the organizer manually validates your participation.",
   "Your participation will be validated once you click the confirmation link into the email.": "Your participation will be validated once you click the confirmation link into the email.",
+  "Your password has been successfully changed. You now need to logged-in with your new password.":"Your password has been successfully changed. You now need to logged-in with your new password.",
   "Your position was not available.": "Your position was not available.",
   "Your profile will be shown as contact.": "Your profile will be shown as contact.",
   "Your timezone is currently set to {timezone}.": "Your timezone is currently set to {timezone}.",

src/i18n/fr_FR.json

@@ -892,6 +892,7 @@
   "Participation without account": "Participation sans compte",
   "Participations": "Participations",
   "Password": "Mot de passe",
+  "Password and confirmation password must be identical.":"Le mot de passe et le mot de passe de confirmation doivent être identiques.",
   "Password (confirmation)": "Mot de passe (confirmation)",
   "Password reset": "R\u00e9initialisation du mot de passe",
   "Past activities": "Activit\u00e9s pass\u00e9es",
@@ -1573,6 +1574,7 @@
   "Your participation will be validated once you click the confirmation link into the email.": "Votre participation sera valid\u00e9e une fois que vous aurez cliqu\u00e9 sur le lien de confirmation contenu dans le courriel.",
   "Your position was not available.": "Votre position n'\u00e9tait pas disponible.",
   "Your profile will be shown as contact.": "Votre profil sera affich\u00e9 en tant que contact.",
+  "Your password has been successfully changed. You now need to logged-in with your new password.":"Votre mot de passe a bien été changé. Vous devez maintenant vous connecter avec votre nouveau mot de passe.",
   "Your timezone is currently set to {timezone}.": "Votre fuseau horaire est actuellement d\u00e9fini \u00e0 {timezone}.",
   "Your timezone was detected as {timezone}.": "Votre fuseau horaire a \u00e9t\u00e9 d\u00e9tect\u00e9 en tant que {timezone}.",
   "Your timezone {timezone} isn't supported.": "Votre fuseau horaire {timezone} n'est pas support\u00e9.",

src/views/User/PasswordReset.vue

@@ -20,6 +20,7 @@
           minlength="6"
           v-model="credentials.password"
           expanded
+          @input="resetErrors()"
         />
       </o-field>
       <o-field :label="$t('Password (confirmation)')">
@@ -31,18 +32,18 @@
           minlength="6"
           v-model="credentials.passwordConfirmation"
           expanded
+          @input="resetErrors()"
         />
       </o-field>
-      <button class="button is-primary">
-        {{ $t("Reset my password") }}
-      </button>
+      <o-button tag="input" type="submit" class="my-2" variant="primary">{{
+        $t("Reset my password")
+      }}</o-button>
     </form>
   </section>
 </template>
 
 <script lang="ts" setup>
 import { RESET_PASSWORD } from "@/graphql/auth";
-import { saveUserData } from "@/utils/auth";
 import { ILogin } from "@/types/login.model";
 import RouteName from "@/router/name";
 import { reactive, ref, computed } from "vue";
@@ -94,8 +95,13 @@ resetPasswordMutationDone(({ data }) => {
     throw new Error("Data is undefined");
   }
 
-  saveUserData(data.resetPassword);
-  router.push({ name: RouteName.HOME });
+  alert(
+    t(
+      "Your password has been successfully changed. You now need to logged-in with your new password."
+    )
+  );
+
+  router.push({ name: RouteName.LOGIN });
   return;
 });
 
@@ -105,9 +111,20 @@ resetPasswordMutationError((err) => {
   });
 });
 
+const resetErrors = () => {
+  errors.value.splice(0);
+};
+
 const resetAction = (e: Event) => {
   e.preventDefault();
-  errors.value.splice(0);
+  resetErrors();
+
+  if (credentials.password != credentials.passwordConfirmation) {
+    errors.value.push(
+      t("Password and confirmation password must be identical.")
+    );
+    return;
+  }
 
   resetPasswordMutation({
     password: credentials.password,

src/views/User/SendPasswordReset.vue

@@ -42,14 +42,19 @@
       </p>
     </form>
     <div v-else>
-      <o-notification variant="success" :closable="false" title="Success">
+      <o-notification
+        class="my-2"
+        variant="success"
+        :closable="false"
+        title="Success"
+      >
         {{
           t("We just sent an email to {email}", {
             email: emailValue,
           })
         }}
       </o-notification>
-      <o-notification variant="info">
+      <o-notification class="my-2" variant="info">
         {{
           t("Please check your spam folder if you didn't receive the email.")
         }}