Cannot modify user settings via WebUI

[huyle-anh]

Describe the bug
After pressing the edit button, the edit user window doesn't show, and the page hangs, can't switch to a different page.

To Reproduce :

1. Log in BMC WebUI with root user
2. Navigate to Security and Access → User management → Create a user: user1
3. Click edit user button of user1 to edit user settings

Expected behavior :

• At step#3, can edit user settings

Desktop:

• OS: MACOS Ventura - Version 13.7
• Browser: Chrome
• Version: 130.0.6723.116

[huyle-anh]

Debugging: The main cause is that it gets stuck when calling the password dependency, However, the exact reason for this is unknown, it is possible that during the upgrade from Vue2 to Vue3, we missed something, such as some package.json or other components.
Tested: to work now if remove:

     requirePassword() {
       if (this.newUser) return true;
-      if (this.v$.form.password.$dirty) return true;
-      if (this.v$.form.passwordConfirmation.$dirty) return true;
       return false; 

[huyle-anh]

I created a local patch to bypass this issue, see it below. But I don't think it is a wise or proper solution to completely fix the problem.
Any suggestions for this issue will be helpful for me to complete my work well. Thank you!

   },
   watch: {
     user: function (value) {
@@ -298,6 +303,18 @@ export default {
       this.form.status = value.Enabled;
       this.form.privilege = value.privilege;
     },
+    computedForm: {
+      deep: true,
+      handler: function (n, o) {
+        let isDirty = false;
+        if (n.password !== o.password) {
+          isDirty = true;
+        } else if (n.passwordConfirmation !== o.passwordConfirmation) {
+          isDirty = true;
+        }
+        this.isDirty = isDirty;
+      },
+    },
   },
   validations() {
     return {
@@ -324,7 +341,7 @@ export default {
           required: requiredIf(function () {
             return this.requirePassword();
           }),
-          sameAsPassword: sameAs('password'),
+          sameAsPassword: sameAs(this.form.password),
         },
         manualUnlock: {},
       },
@@ -387,8 +404,7 @@ export default {
     },
     requirePassword() {
       if (this.newUser) return true;
-      if (this.v$.form.password.$dirty) return true;
-      if (this.v$.form.passwordConfirmation.$dirty) return true;
+      if (this.isDirty) return true;
       return false;
     },

[huyle-anh]

Does anyone have any information or suggestions about this issue?

[kirankumarb07]

Does anyone have any information or suggestions about this issue?

@suryav9724 Can you please check this issue and provide feedback.

[suryav9724]

@huyle-anh Yes, your code is working fine except for the validation of sameAsPassword. Please use the below code for the validation; it will work.
sameAsPassword: sameAs('password'),

[huyle-anh]

@suryav9724, the code is working fine on Chrome and Safari browsers. But it doesn't work on the Firefox browser. Can you double-check on Firefox browser?

[huyle-anh]

I updated the path to workaround for Firefox/Safari and Chrome browsers.

diff --git a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
index 3b33487..5f839f1 100644
--- a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
+++ b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
@@ -14,7 +14,7 @@
         <b-row v-if="!newUser && manualUnlockPolicy && user.Locked">
           <b-col sm="9">
             <alert :show="true" variant="warning" small>
-              <template v-if="!v$.form.manualUnlock.$dirty">
+              <template v-if="!isDirty.manualUnlock">
                 {{ $t('pageUserManagement.modal.accountLocked') }}
               </template>
               <template v-else>
@@ -30,7 +30,7 @@
             />
             <b-button
               variant="primary"
-              :disabled="v$.form.manualUnlock.$dirty"
+              :disabled="isDirty.manualUnlock"
               data-test-id="userManagement-button-manualUnlock"
               @click="v$.form.manualUnlock.$touch()"
             >
@@ -273,6 +273,14 @@ export default {
         passwordConfirmation: '',
         manualUnlock: false,
       },
+      isDirty: {
+        status: false,
+        username: false,
+        privilege: false,
+        password: false,
+        passwordConfirmation: false,
+        manualUnlock: false,
+      },
       disabled: this.$store.getters['global/username'],
     };
   },
@@ -289,6 +297,16 @@ export default {
     privilegeTypes() {
       return this.$store.getters['userManagement/accountRoles'];
     },
+    computedForm() {
+      return {
+        status: this.form.status,
+        username: this.form.username,
+        privilege: this.form.privilege,
+        password: this.form.password,
+        passwordConfirmation: this.form.passwordConfirmation,
+        manualUnlock: this.form.manualUnlock,
+      };
+    },
   },
   watch: {
     user: function (value) {
@@ -298,6 +316,34 @@ export default {
       this.form.status = value.Enabled;
       this.form.privilege = value.privilege;
     },
+    computedForm: {
+      deep: true,
+      handler: function (n, o) {
+        if (n.status !== o.status) {
+          this.isDirty.status = true;
+        }
+
+        if (n.username !== o.username) {
+          this.isDirty.username = true;
+        }
+
+        if (n.privilege !== o.privilege) {
+          this.isDirty.privilege = true;
+        }
+
+        if (n.password !== o.password) {
+          this.isDirty.password = true;
+        }
+
+        if (n.passwordConfirmation !== o.passwordConfirmation) {
+          this.isDirty.passwordConfirmation = true;
+        }
+
+        if (n.manualUnlock !== o.manualUnlock) {
+          this.isDirty.manualUnlock = true;
+        }
+      },
+    },
   },
   validations() {
     return {
@@ -344,19 +390,20 @@ export default {
       } else {
         if (this.v$.$invalid) return;
         userData.originalUsername = this.originalUsername;
-        if (this.v$.form.status.$dirty) {
+
+        if (this.isDirty.status) {
           userData.status = this.form.status;
         }
-        if (this.v$.form.username.$dirty) {
+        if (this.isDirty.username) {
           userData.username = this.form.username;
         }
-        if (this.v$.form.privilege.$dirty) {
+        if (this.isDirty.privilege) {
           userData.privilege = this.form.privilege;
         }
-        if (this.v$.form.password.$dirty) {
+        if (this.isDirty.password) {
           userData.password = this.form.password;
         }
-        if (this.v$.form.manualUnlock.$dirty) {
+        if (this.isDirty.manualUnlock) {
           // If form manualUnlock control $dirty then
           // set user Locked property to false
           userData.locked = false;
@@ -382,13 +429,21 @@ export default {
       this.form.privilege = null;
       this.form.password = '';
       this.form.passwordConfirmation = '';
+
+      this.isDirty.status = false;
+      this.isDirty.username = false;
+      this.isDirty.privilege = false;
+      this.isDirty.password = false;
+      this.isDirty.passwordConfirmation = false;
+      this.isDirty.manualUnlock = false;
+
       this.v$.$reset();
       this.$emit('hidden');
     },
     requirePassword() {
       if (this.newUser) return true;
-      if (this.v$.form.password.$dirty) return true;
-      if (this.v$.form.passwordConfirmation.$dirty) return true;
+      if (this.isDirty.password) return true;
+      if (this.isDirty.passwordConfirmation) return true;
       return false;
     },
     onOk(bvModalEvt) {

[huyle-anh]

Longtime no see any comment on this!

[mdmillerii]

Have you completed the CLA so we could accept your code submission?

Please submit a patch to Gerrit as described in https://github.com/openbmc/docs/blob/master/CONTRIBUTING.md