check current password valid style in "delete account" and "reset account"

website/client/src/mixins/passwordInputChecks.js

@@ -0,0 +1,43 @@
+/**
+ * Component Example
+ *
+ * <current-password-input
+ *   :show-forget-password="true"
+ *   :is-valid="mixinData.passwordIssues.length === 0"
+ *   :invalid-issues="mixinData.passwordIssues"
+ *   @passwordValue="updates.password = $event"
+ *   />
+ */
+
+export const PasswordInputChecksMixin = {
+  data () {
+    return {
+      mixinData: {
+        passwordIssues: [],
+      },
+    };
+  },
+  methods: {
+    clearPasswordIssues () {
+      this.mixinData.passwordIssues.length = 0;
+    },
+    /**
+     * @param {() => Promise<void>} promiseCall
+     * @returns {Promise<void>}
+     */
+    async passwordInputCheckMixinTryCall (promiseCall) {
+      try {
+        // reset previous issues
+        this.clearPasswordIssues();
+
+        await promiseCall();
+      } catch (axiosError) {
+        const message = axiosError.response?.data?.message;
+
+        if (message === this.$t('wrongPassword')) {
+          this.mixinData.passwordIssues.push(message);
+        }
+      }
+    },
+  },
+};

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

@@ -40,6 +40,8 @@
         <current-password-input
           v-if="hasPassword"
           :show-forget-password="true"
+          :is-valid="mixinData.passwordIssues.length === 0"
+          :invalid-issues="mixinData.passwordIssues"
           @passwordValue="passwordValue = $event"
         />
 
@@ -83,7 +85,7 @@
 
         <div class="input-area">
           <save-cancel-buttons
-            :disable-save="!passwordValue"
+            :disable-save="!enableDelete"
             primary-button-color="btn-danger"
             primary-button-label="deleteAccount"
             @saveClicked="deleteAccount()"
@@ -110,11 +112,12 @@ import { mapState } from '@/libs/store';
 import { InlineSettingMixin } from '../components/inlineSettingMixin';
 import SaveCancelButtons from '../components/saveCancelButtons.vue';
 import CurrentPasswordInput from '../components/currentPasswordInput.vue';
+import { PasswordInputChecksMixin } from '@/mixins/passwordInputChecks';
 
 
 export default {
   components: { CurrentPasswordInput, SaveCancelButtons },
-  mixins: [InlineSettingMixin],
+  mixins: [InlineSettingMixin, PasswordInputChecksMixin],
   data () {
     return {
       passwordValue: '',
@@ -128,17 +131,22 @@ export default {
     hasPassword () {
       return this.user.auth.local.has_password;
     },
+    enableDelete () {
+      return this.hasPassword ? Boolean(this.passwordValue) : this.passwordValue === 'DELETE';
+    },
   },
   methods: {
     async deleteAccount () {
-      await axios.delete('/api/v4/user', {
-        data: {
-          password: this.passwordValue,
-          feedback: this.feedback,
-        },
+      await this.passwordInputCheckMixinTryCall(async () => {
+        await axios.delete('/api/v4/user', {
+          data: {
+            password: this.passwordValue,
+            feedback: this.feedback,
+          },
+        });
+        localStorage.clear();
+        window.location.href = '/static/home';
       });
-      localStorage.clear();
-      window.location.href = '/static/home';
     },
   },
 };

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

@@ -66,6 +66,8 @@
         <div class="input-area">
           <current-password-input
             :show-forget-password="true"
+            :is-valid="mixinData.passwordIssues.length === 0"
+            :invalid-issues="mixinData.passwordIssues"
             @passwordValue="passwordValue = $event"
           />
           <save-cancel-buttons
@@ -102,11 +104,12 @@ import { mapState } from '@/libs/store';
 import { InlineSettingMixin } from '../components/inlineSettingMixin';
 import SaveCancelButtons from '../components/saveCancelButtons.vue';
 import CurrentPasswordInput from '../components/currentPasswordInput.vue';
+import { PasswordInputChecksMixin } from '@/mixins/passwordInputChecks';
 
 
 export default {
   components: { CurrentPasswordInput, SaveCancelButtons },
-  mixins: [InlineSettingMixin],
+  mixins: [InlineSettingMixin, PasswordInputChecksMixin],
   data () {
     return {
       passwordValue: '',
@@ -119,11 +122,13 @@ export default {
   },
   methods: {
     async reset () {
-      await axios.post('/api/v4/user/reset', {
-        password: this.passwordValue,
+      await this.passwordInputCheckMixinTryCall(async () => {
+        await axios.post('/api/v4/user/reset', {
+          password: this.passwordValue,
+        });
+        this.$router.push('/');
+        setTimeout(() => window.location.reload(true), 100);
       });
-      this.$router.push('/');
-      setTimeout(() => window.location.reload(true), 100);
     },
   },
 };

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

@@ -47,8 +47,8 @@
 
           <current-password-input
             :show-forget-password="true"
-            :is-valid="passwordIssues.length === 0"
-            :invalid-issues="passwordIssues"
+            :is-valid="mixinData.passwordIssues.length === 0"
+            :invalid-issues="mixinData.passwordIssues"
             @passwordValue="updates.password = $event"
           />
 
@@ -76,10 +76,11 @@ import { InlineSettingMixin } from '../components/inlineSettingMixin';
 import CurrentPasswordInput from '../components/currentPasswordInput.vue';
 import ValidatedTextInput from '@/components/ui/validatedTextInput.vue';
 import NotificationMixins from '@/mixins/notifications';
+import { PasswordInputChecksMixin } from '@/mixins/passwordInputChecks';
 
 export default {
   components: { ValidatedTextInput, CurrentPasswordInput, SaveCancelButtons },
-  mixins: [InlineSettingMixin, NotificationMixins],
+  mixins: [InlineSettingMixin, NotificationMixins, PasswordInputChecksMixin],
   data () {
     return {
       updates: {
@@ -87,7 +88,6 @@ export default {
         password: '',
       },
       emailChanged: false,
-      passwordIssues: [],
     };
   },
   computed: {
@@ -117,22 +117,12 @@ export default {
       this.updates.newEmail = this.user.auth.local.email;
     },
     async changeEmail () {
-      try {
-        this.passwordIssues.length = 0;
+      await this.passwordInputCheckMixinTryCall(async () => {
         await axios.put('/api/v4/user/auth/update-email', this.updates);
-
-        this.passwordIssues.length = 0;
-
         this.user.auth.local.email = this.updates.newEmail;
         this.text(this.$t('emailSuccess'));
         this.closeModal();
-      } catch (axiosError) {
-        const message = axiosError.response?.data?.message;
-
-        if (message === this.$t('wrongPassword')) {
-          this.passwordIssues.push(message);
-        }
-      }
+      });
     },
   },
 };