From b70f241ab548a571caf32f81e947442d1e2d6c7b Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Wed, 10 Jul 2024 10:39:15 +0800
Subject: [PATCH] save

---
 .../AccountManagement/ModalAccountEditCreate.vue    | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/views/AccountManagement/ModalAccountEditCreate.vue b/src/views/AccountManagement/ModalAccountEditCreate.vue
index 151ae33..6c86611 100644
--- a/src/views/AccountManagement/ModalAccountEditCreate.vue
+++ b/src/views/AccountManagement/ModalAccountEditCreate.vue
@@ -197,7 +197,7 @@ export default defineComponent({
             return modalStore.whichModal === MODAL_CREATE_NEW ? i18next.t('AcctMgmt.CreateNew') : i18next.t('AcctMgmt.AccountEdit');
         });
 
-        const validateInputLengthAndEquality = (inputAccountToTest, inputNameToTest, inputPasswordToTest,  inputConfirmPwdToTest, inputPwdMatchedToTest,
+        const shouldDisalbeConfirmButton = (inputAccountToTest, inputNameToTest, inputPasswordToTest,  inputConfirmPwdToTest, inputPwdMatchedToTest,
         ) => {
             return !inputAccountToTest?.length || !inputNameToTest?.length || !inputPasswordToTest?.length 
                     || !inputConfirmPwdToTest?.length  || !inputPwdMatchedToTest;
@@ -287,11 +287,11 @@ export default defineComponent({
             }
         }
 
-            onMounted(() => {
+        onMounted(() => {
             watch(
                 [inputUserAccount, inputName, inputPwd, inputConfirmPwd, isPwdMatched],
                 ([newAccount, newName, newPwd, newConfirmPwd, newPwdMatched]) => {
-                    if (validateInputLengthAndEquality(newAccount, newName, newPwd, newConfirmPwd, newPwdMatched)) {
+                    if (shouldDisalbeConfirmButton(newAccount, newName, newPwd, newConfirmPwd, newPwdMatched)) {
                         isConfirmDisabled.value = true;
                     } else {
                         isConfirmDisabled.value = false;
@@ -299,6 +299,13 @@ export default defineComponent({
                 },
                 { immediate: true }
             );
+
+            watch(
+                [inputPwd, inputConfirmPwd],
+                ([newPwd, newConfirmPwd]) => {
+                    isPwdMatched.value = newPwd === newConfirmPwd && newPwd.length;
+                }
+            )
         });
 
         return {