check password inputs and mark invalid for "password change" setting

website/client/src/mixins/passwordInputChecks.js

@@ -3,8 +3,8 @@
  *
  * <current-password-input
  *   :show-forget-password="true"
- *   :is-valid="mixinData.passwordIssues.length === 0"
- *   :invalid-issues="mixinData.passwordIssues"
+ *   :is-valid="mixinData.currentPasswordIssues.length === 0"
+ *   :invalid-issues="mixinData.currentPasswordIssues"
  *   @passwordValue="updates.password = $event"
  *   />
  */
@@ -13,13 +13,15 @@ export const PasswordInputChecksMixin = {
   data () {
     return {
       mixinData: {
-        passwordIssues: [],
+        currentPasswordIssues: [],
+        newPasswordIssues: [],
       },
     };
   },
   methods: {
     clearPasswordIssues () {
-      this.mixinData.passwordIssues.length = 0;
+      this.mixinData.currentPasswordIssues.length = 0;
+      this.mixinData.newPasswordIssues.length = 0;
     },
     /**
      * @param {() => Promise<void>} promiseCall
@@ -34,8 +36,10 @@ export const PasswordInputChecksMixin = {
       } catch (axiosError) {
         const message = axiosError.response?.data?.message;
 
-        if (message === this.$t('wrongPassword')) {
-          this.mixinData.passwordIssues.push(message);
+        if ([this.$t('wrongPassword'), this.$t('missingPassword')].includes(message)) {
+          this.mixinData.currentPasswordIssues.push(message);
+        } else if ([this.$t('missingNewPassword'), this.$t('passwordIssueLength'), this.$t('passwordConfirmationMatch')].includes(message)) {
+          this.mixinData.newPasswordIssues.push(message);
         }
       }
     },

website/client/src/pages/settings/settingRows/deleteAccount.vue

@@ -40,8 +40,8 @@
         <current-password-input
           v-if="hasPassword"
           :show-forget-password="true"
-          :is-valid="mixinData.passwordIssues.length === 0"
-          :invalid-issues="mixinData.passwordIssues"
+          :is-valid="mixinData.currentPasswordIssues.length === 0"
+          :invalid-issues="mixinData.currentPasswordIssues"
           @passwordValue="passwordValue = $event"
         />
 

website/client/src/pages/settings/settingRows/passwordSetting.vue

@@ -41,14 +41,21 @@
           v-if="hasPassword"
           :show-forget-password="true"
           custom-label="currentPass"
+          :is-valid="mixinData.currentPasswordIssues.length === 0"
+          :invalid-issues="mixinData.currentPasswordIssues"
+
           @passwordValue="passwordUpdates.password = $event"
         />
         <current-password-input
           custom-label="newPass"
+          :is-valid="mixinData.newPasswordIssues.length === 0"
+          :invalid-issues="mixinData.newPasswordIssues"
           @passwordValue="passwordUpdates.newPassword = $event"
         />
         <current-password-input
           custom-label="confirmPass"
+          :is-valid="mixinData.newPasswordIssues.length === 0"
+          :invalid-issues="mixinData.newPasswordIssues"
           @passwordValue="passwordUpdates.confirmPassword = $event"
         />
 
@@ -117,10 +124,11 @@ import SaveCancelButtons from '../components/saveCancelButtons.vue';
 import { InlineSettingMixin } from '../components/inlineSettingMixin';
 import CurrentPasswordInput from '../components/currentPasswordInput.vue';
 import { mapState } from '@/libs/store';
+import { PasswordInputChecksMixin } from '@/mixins/passwordInputChecks';
 
 export default {
   components: { CurrentPasswordInput, SaveCancelButtons },
-  mixins: [InlineSettingMixin],
+  mixins: [InlineSettingMixin, PasswordInputChecksMixin],
   data () {
     return {
       passwordUpdates: {
@@ -147,27 +155,31 @@ export default {
   },
   methods: {
     async changePassword (updates) {
-      await axios.put('/api/v4/user/auth/update-password', updates);
+      await this.passwordInputCheckMixinTryCall(async () => {
+        await axios.put('/api/v4/user/auth/update-password', updates);
 
-      this.passwordUpdates = {};
-      this.$store.dispatch('snackbars:add', {
-        title: 'Habitica',
-        text: this.$t('passwordSuccess'),
-        type: 'success',
-        timeout: true,
+        this.passwordUpdates = {};
+        this.$store.dispatch('snackbars:add', {
+          title: 'Habitica',
+          text: this.$t('passwordSuccess'),
+          type: 'success',
+          timeout: true,
+        });
       });
     },
 
     async addLocalAuth () {
-      const localAuthData = {
-        password: this.passwordUpdates.newPassword,
-        confirmPassword: this.passwordUpdates.confirmPassword,
-        email: this.user.auth.local.email,
-        username: this.user.auth.local.username,
-      };
+      await this.passwordInputCheckMixinTryCall(async () => {
+        const localAuthData = {
+          password: this.passwordUpdates.newPassword,
+          confirmPassword: this.passwordUpdates.confirmPassword,
+          email: this.user.auth.local.email,
+          username: this.user.auth.local.username,
+        };
 
-      await axios.post('/api/v4/user/auth/local/register', localAuthData);
-      window.location.reload();
+        await axios.post('/api/v4/user/auth/local/register', localAuthData);
+        window.location.reload();
+      });
     },
 
   },

website/client/src/pages/settings/settingRows/resetAccount.vue

@@ -66,8 +66,8 @@
         <div class="input-area">
           <current-password-input
             :show-forget-password="true"
-            :is-valid="mixinData.passwordIssues.length === 0"
-            :invalid-issues="mixinData.passwordIssues"
+            :is-valid="mixinData.currentPasswordIssues.length === 0"
+            :invalid-issues="mixinData.currentPasswordIssues"
             @passwordValue="passwordValue = $event"
           />
           <save-cancel-buttons

website/client/src/pages/settings/settingRows/userEmailSetting.vue

@@ -47,8 +47,8 @@
 
           <current-password-input
             :show-forget-password="true"
-            :is-valid="mixinData.passwordIssues.length === 0"
-            :invalid-issues="mixinData.passwordIssues"
+            :is-valid="mixinData.currentPasswordIssues.length === 0"
+            :invalid-issues="mixinData.currentPasswordIssues"
             @passwordValue="updates.password = $event"
           />