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/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.")
         }}