mousedown mouseup eye button

src/views/AccountManagement/ModalAccountEditCreate.vue

@@ -58,12 +58,13 @@
                     <input id="input_first_pwd" class="outline-none p-1 w-[352px]" :type="isPwdEyeOn ? 'text' : 'password'"
                         v-model="inputPwd" :readonly="!isEditable" @dblclick="onInputDoubleClick"
                         autocomplete="off" />
-                    <img v-if="isPwdEyeOn" src='@/assets/icon-eye-open.svg' class="absolute right-[8px] cursor-pointer"
+                    <img id='eye_button' v-if="isPwdEyeOn" src='@/assets/icon-eye-open.svg' class="absolute right-[8px] cursor-pointer"
-                        @click="togglePwdEyeBtn" alt=""/>
+                        @mousedown="togglePwdEyeBtn(true)" @mouseup="togglePwdEyeBtn(false)" alt=""/>
-                    <img v-else src='@/assets/icon-eye-hide.svg' class="absolute right-[8px] cursor-pointer" @click="togglePwdEyeBtn" alt="eye"/>
+                    <img v-else src='@/assets/icon-eye-hide.svg' class="absolute right-[8px] cursor-pointer"
+                        @mousedown="togglePwdEyeBtn(true)" @mouseup="togglePwdEyeBtn(false)" alt="eye"/>
                 </div>
             </div>
-            <div v-show="!isSSO" id="confirm_pwd_row" class="input-row w-full grid grid-cols-2 grid-cols-[122px_1fr] gap-x-4
+            <div v-show="false" id="confirm_pwd_row" class="input-row w-full grid grid-cols-2 grid-cols-[122px_1fr] gap-x-4
                 mb-4 flex items-center"> <!-- 2-by-2 的格子，其中左下角是一個dummy格子，其沒有內容 -->
                 <span class="field-label w-[122px] text-sm flex items-center justify-end text-right font-medium mr-4 whitespace-nowrap"
                     :class="{
@@ -146,7 +147,7 @@
 </template>
 
 <script>
-import { defineComponent, computed, ref, watch, } from 'vue';
+import { defineComponent, computed, ref, watch, onMounted, } from 'vue';
 import i18next from "@/i18n/i18n.js";
 import { mapActions, } from 'pinia';
 import { useModalStore } from '@/stores/modal.js';
@@ -168,7 +169,6 @@ export default defineComponent({
         const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
         const isPwdEyeOn = ref(false);
         const isPwdConfirmEyeOn = ref(false);
-        const isPwdMatched = ref(true);
         const isPwdLengthValid = ref(true);
         const isConfirmDisabled = ref(true);
 
@@ -205,17 +205,13 @@ export default defineComponent({
             return modalStore.whichModal === MODAL_CREATE_NEW ? i18next.t('AcctMgmt.CreateNew') : i18next.t('AcctMgmt.AccountEdit');
         });
 
-        const togglePwdEyeBtn = () => {
+        const togglePwdEyeBtn = (toBeOpen) => {
-            isPwdEyeOn.value = !isPwdEyeOn.value;
+            isPwdEyeOn.value = toBeOpen;
         };
         const togglePwdConfirmEyeBtn = () => {
             isPwdConfirmEyeOn.value = !isPwdConfirmEyeOn.value;
         };
 
-        const validateConfirmPwd = () => {
-            isPwdMatched.value = inputPwd.value.length > 0 && inputPwd.value === inputConfirmPwd.value;
-        }
-
         const validatePwdLength = () => {
             isPwdLengthValid.value = inputPwd.value.length >= PWD_VALID_LENGTH;
         }
@@ -226,12 +222,6 @@ export default defineComponent({
         }
 
         const onConfirmBtnClick = async () => {
-            // rule for matching of confirm password
-            validateConfirmPwd();
-            if(!isPwdMatched.value){
-                return;
-            }
-
             // rule for minimum length
             validatePwdLength();
             if(!isPwdLengthValid.value) {
@@ -305,7 +295,6 @@ export default defineComponent({
         watch(
             [inputPwd, inputConfirmPwd, inputUserAccount, inputName],
             ([newPwd, newConfirmPwd, newAccount, newName]) => {
-                isPwdMatched.value = newPwd === newConfirmPwd && newPwd.length;
                 isPwdLengthValid.value = newPwd.length >= PWD_VALID_LENGTH && newConfirmPwd.length >= PWD_VALID_LENGTH;
                 // 只要[確認密碼]或[密碼]欄位有更動，且所有欄位都不是空的，confirm 按鈕就可點選
                 if (newPwd.length > 0 && newConfirmPwd.length > 0 && newAccount.length > 0 && newName.length > 0) {
@@ -316,6 +305,10 @@ export default defineComponent({
             }
         );
 
+        onMounted(() => {
+
+        });
+
         return {
             isConfirmDisabled,
             username,
@@ -325,7 +318,6 @@ export default defineComponent({
             isPwdConfirmEyeOn,
             togglePwdEyeBtn,
             togglePwdConfirmEyeBtn,
-            isPwdMatched,
             isPwdLengthValid,
             inputUserAccount,
             inputName,