From 247a4dbef8f5990eb3cd514aa68b596c004fae9a Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Mon, 26 Aug 2024 11:50:13 +0800
Subject: [PATCH 1/3] mousedown mouseup eye button

---
 .../ModalAccountEditCreate.vue                | 32 +++++++------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/views/AccountManagement/ModalAccountEditCreate.vue b/src/views/AccountManagement/ModalAccountEditCreate.vue
index 119848b..fe97800 100644
--- a/src/views/AccountManagement/ModalAccountEditCreate.vue
+++ b/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"
-                        @click="togglePwdEyeBtn" alt=""/>
-                    <img v-else src='@/assets/icon-eye-hide.svg' class="absolute right-[8px] cursor-pointer" @click="togglePwdEyeBtn" alt="eye"/>
+                    <img id='eye_button' v-if="isPwdEyeOn" src='@/assets/icon-eye-open.svg' class="absolute right-[8px] cursor-pointer"
+                        @mousedown="togglePwdEyeBtn(true)" @mouseup="togglePwdEyeBtn(false)" alt=""/>
+                    <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 = () => {
-            isPwdEyeOn.value = !isPwdEyeOn.value;
+        const togglePwdEyeBtn = (toBeOpen) => {
+            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,

From 97e01c93fdb96baa94b41dc7276edc8f0bd5fb6d Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Mon, 26 Aug 2024 13:40:33 +0800
Subject: [PATCH 2/3] new version of password edit. Reset button added

---
 src/i18n/en.json                              |  1 +
 .../ModalAccountEditCreate.vue                | 99 ++++++++++++-------
 2 files changed, 65 insertions(+), 35 deletions(-)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index 38df966..ea9a824 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -29,6 +29,7 @@
         "Detail": "Detail",
         "Edit": "Edit",
         "Delete": "Delete",
+        "Reset": "Reset",
         "AccountEdit": "Account Edit",
         "AccountInformation": "Account Information",
         "Password": "Password",
diff --git a/src/views/AccountManagement/ModalAccountEditCreate.vue b/src/views/AccountManagement/ModalAccountEditCreate.vue
index fe97800..8b0964a 100644
--- a/src/views/AccountManagement/ModalAccountEditCreate.vue
+++ b/src/views/AccountManagement/ModalAccountEditCreate.vue
@@ -47,26 +47,53 @@
                     autocomplete="off"
                     />
             </div>
-            <div v-show="!isSSO" class="input-row w-full flex py-2 h-[40px] mb-4 items-center
+            <div v-show="!isSSO" class="input-row w-full flex py-2 mb-4 items-center
                 justify-between">
-                <div class="field-label text-sm flex items-center font-medium  justify-end">
-                    <span class="align-right-span flex w-[122px] justify-end">
-                        {{ i18next.t("AcctMgmt.Password") }}
-                    </span>
-                </div>
-                <div class="w-[454px] rounded border-[1px] border-[#64748B] flex items-center h-[40px] relative">
-                    <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 id='eye_button' v-if="isPwdEyeOn" src='@/assets/icon-eye-open.svg' class="absolute right-[8px] cursor-pointer"
-                        @mousedown="togglePwdEyeBtn(true)" @mouseup="togglePwdEyeBtn(false)" alt=""/>
-                    <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 class="field-label text-sm flex items-start font-medium  justify-end"
+                        :class="{
+                            'h-[100px]': whichCurrentModal !== MODAL_CREATE_NEW,
+                        }"
+                    >
+                        <span class="align-right-span flex h-full w-[122px] justify-end text-top">
+                            {{ i18next.t("AcctMgmt.Password") }}
+                        </span>
+                    </div>
+                    <div class="reset-btn-and-input-pwd-and-error flex flex-col"
+                        :class="{'h-[100px]': whichCurrentModal !== MODAL_CREATE_NEW,}"
+                    >
+                        <div v-if="whichCurrentModal !== MODAL_CREATE_NEW" class="flex account-edit-section justify-start w-[454px]">
+                            <button class="flex w-[85px] h-[40px] reset-btn rounded-full border-[1px] border-[#666666] cursor-pointer
+                                items-center justify-center hover:text-[#0099FF] hover:border-[#0099FF] mb-[20px]"
+                                @click="onResetPwdButtonClick"
+                            >
+                                {{ i18next.t("AcctMgmt.Reset") }}
+                            </button>
+                        </div>
+                        <div v-if="whichCurrentModal === MODAL_CREATE_NEW || isResetPwdSectionShow"
+                            class="w-[454px] flex flex-col input-and-error-msg">
+                            <div class="input-and-eye flex items-center w-full h-[40px] relative border-[1px] rounded"
+                                :class="{'border-[#FF3366]': !isPwdLengthValid, 'border-[#64748B]': isPwdLengthValid,}"
+                            >
+                                 <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" :class="{'color-[#FF3366]': !isPwdLengthValid, 'color-[#64748B]': isPwdLengthValid,}"/>
+                                <img id='eye_button' v-if="isPwdEyeOn" src='@/assets/icon-eye-open.svg' class="absolute right-[8px] cursor-pointer"
+                                    @mousedown="togglePwdEyeBtn(true)" @mouseup="togglePwdEyeBtn(false)" alt=""/>
+                                <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 class="error-msg-section flex justify-start mt-4">
+                                <img v-show="!isPwdLengthValid" src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
+                                <span class="error-msg-text flex text-[#FF3366] h-[24px]">
+                                    {{ isPwdLengthValid ? "" : i18next.t("AcctMgmt.PwdLengthNotEnough") }}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
             </div>
             <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"
+                <span v-show="false" class="field-label w-[122px] text-sm flex items-center justify-end text-right font-medium mr-4 whitespace-nowrap"
                     :class="{
                         'text-[#000000]': isPwdMatched,
                         'text-[#FF3366]': !isPwdMatched,
@@ -74,13 +101,13 @@
                     {{ i18next.t("AcctMgmt.ConfirmPassword") }}
                 </span>
             
-                <div class="input-and-toggle-btn w-[454px] flex flex-row rounded border border-[1px] relative items-center
+                <div v-show="false" class="input-and-toggle-btn w-[454px] flex flex-row rounded border border-[1px] relative items-center
                     h-[40px] mb-4"
                     :class="{
                         'border-[#000000]': isPwdMatched,
                         'border-[#FF3366]': !isPwdMatched,
                     }">
-                    <input id="input_second_pwd" class="outline-none p-1 w-[352px]" :type="isPwdConfirmEyeOn ? 'text' : 'password'"
+                    <input v-show="false" id="input_second_pwd" class="outline-none p-1 w-[352px]" :type="isPwdConfirmEyeOn ? 'text' : 'password'"
                         v-model="inputConfirmPwd" :readonly="!isEditable" @dblclick="onInputDoubleClick"
                         :class="{
                         'text-[#000000]': isPwdMatched,
@@ -125,14 +152,14 @@
             </div>
         </main>
         <footer class="flex row footer justify-end pr-[32px] pb-8">            
-            <button class="cancel-btn rounded rounded-full w-[92px] h-10 px-2.5 py-6 border border-[1px] border-[#64748B]
+            <button class="cancel-btn rounded-full w-[92px] h-10 px-2.5 py-6 border border-[1px] border-[#64748B]
                 flex justify-center items-center text-[#4E5969] font-medium
                 hover:bg-[#64748B] hover:border-[#CBD5E1] hover:text-[#FFFFFF]"
                 @click="onCancelBtnClick"
             >
                 {{ i18next.t("Global.Cancel") }}
             </button>
-            <button class="confirm-btn rounded rounded-full w-[92px] h-10 px-2.5 py-6
+            <button class="confirm-btn rounded-full w-[92px] h-10 px-2.5 py-6
                 flex justify-center items-center text-[#ffffff] font-medium  ml-[16px]"
                 @click="onConfirmBtnClick" :disabled="isConfirmDisabled"
                 :class="{
@@ -168,9 +195,9 @@ export default defineComponent({
 
         const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
         const isPwdEyeOn = ref(false);
-        const isPwdConfirmEyeOn = ref(false);
+        const isConfirmDisabled = ref(false);
         const isPwdLengthValid = ref(true);
-        const isConfirmDisabled = ref(true);
+        const isResetPwdSectionShow = ref(false);
 
         const isSetAsAdminChecked = ref(false);
         const isSetActivedChecked = ref(true);
@@ -184,10 +211,7 @@ export default defineComponent({
         const inputUserAccount = ref(whichCurrentModal.value === MODAL_CREATE_NEW ? '' : currentViewingUser.value.username);
         const inputName = ref(whichCurrentModal.value === MODAL_CREATE_NEW ? '' : currentViewingUser.value.name);
         const inputPwd = ref("");
-        const inputConfirmPwd = ref("");
-
         const isAccountUnique = ref(true);
-
         const isEditable = ref(true);
 
         // 自從加入這段 watch 之後，填寫密碼欄位之時，就不會胡亂清空掉 account 或是 full name 欄位了。
@@ -208,9 +232,6 @@ export default defineComponent({
         const togglePwdEyeBtn = (toBeOpen) => {
             isPwdEyeOn.value = toBeOpen;
         };
-        const togglePwdConfirmEyeBtn = () => {
-            isPwdConfirmEyeOn.value = !isPwdConfirmEyeOn.value;
-        };
 
         const validatePwdLength = () => {
             isPwdLengthValid.value = inputPwd.value.length >= PWD_VALID_LENGTH;
@@ -269,6 +290,10 @@ export default defineComponent({
         }
 
         const checkAccountIsUnique = async() => {
+            // 如果使用者沒有更動過欄位，那就不用調用任何後端的API
+            if(inputUserAccount.value === username.value) {
+                return true;
+            }
             const isAccountAlreadyExistAPISuccess = await acctMgmtStore.getUserDetail(inputUserAccount.value);
             isAccountUnique.value = !isAccountAlreadyExistAPISuccess;
             return isAccountUnique.value;
@@ -292,12 +317,17 @@ export default defineComponent({
             }
         }
 
+        const onResetPwdButtonClick = () => {
+            isResetPwdSectionShow.value = !isResetPwdSectionShow.value;
+            // 必須清空密碼欄位輸入的字串
+            inputPwd.value = '';
+        }
+
         watch(
-            [inputPwd, inputConfirmPwd, inputUserAccount, inputName],
-            ([newPwd, newConfirmPwd, newAccount, newName]) => {
-                isPwdLengthValid.value = newPwd.length >= PWD_VALID_LENGTH && newConfirmPwd.length >= PWD_VALID_LENGTH;
+            [inputPwd, inputUserAccount, inputName],
+            ([newPwd, newAccount, newName]) => { 
                 // 只要[確認密碼]或[密碼]欄位有更動，且所有欄位都不是空的，confirm 按鈕就可點選
-                if (newPwd.length > 0 && newConfirmPwd.length > 0 && newAccount.length > 0 && newName.length > 0) {
+                if (newPwd.length > 0 && newAccount.length > 0 && newName.length > 0) {
                     isConfirmDisabled.value = false;
                 } else {
                     isConfirmDisabled.value = true;
@@ -315,19 +345,18 @@ export default defineComponent({
             name,
             isSSO,
             isPwdEyeOn,
-            isPwdConfirmEyeOn,
             togglePwdEyeBtn,
-            togglePwdConfirmEyeBtn,
             isPwdLengthValid,
             inputUserAccount,
             inputName,
             inputPwd,
-            inputConfirmPwd,
             onConfirmBtnClick,
             onInputDoubleClick,
             onInputNameFocus,
+            onResetPwdButtonClick,
             isSetAsAdminChecked,
             isSetActivedChecked,
+            isResetPwdSectionShow,
             toggleIsAdmin,
             toggleIsActivated,
             whichCurrentModal,

From ff8179404b9762b079648c1275f986d2b5833e12 Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Mon, 26 Aug 2024 13:53:49 +0800
Subject: [PATCH 3/3] consider the situation when reset section is not open.
 consider the situation when password is not sent to backend

---
 .../ModalAccountEditCreate.vue                | 33 ++++++++++++-------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/views/AccountManagement/ModalAccountEditCreate.vue b/src/views/AccountManagement/ModalAccountEditCreate.vue
index 8b0964a..237cd67 100644
--- a/src/views/AccountManagement/ModalAccountEditCreate.vue
+++ b/src/views/AccountManagement/ModalAccountEditCreate.vue
@@ -234,7 +234,7 @@ export default defineComponent({
         };
 
         const validatePwdLength = () => {
-            isPwdLengthValid.value = inputPwd.value.length >= PWD_VALID_LENGTH;
+            isPwdLengthValid.value = !isResetPwdSectionShow.value || inputPwd.value.length >= PWD_VALID_LENGTH;
         }
 
         const onInputDoubleClick = () => {
@@ -274,13 +274,23 @@ export default defineComponent({
                         return;
                     }   
                     // 要注意的是舊的username跟新的username可以是不同的
-                    await acctMgmtStore.editAccount(
-                        currentViewingUser.value.username, {
-                        newUsername: inputUserAccount.value,
-                        password: inputPwd.value,
-                        name: inputName.value === undefined ? '' : inputName.value,
-                        is_active: true,
-                    });
+                    // 區分有無傳入密碼的情況
+                    if(isResetPwdSectionShow.value) {
+                        await acctMgmtStore.editAccount(
+                            currentViewingUser.value.username, {
+                            newUsername: inputUserAccount.value,
+                            password: inputPwd.value,
+                            name: inputName.value === undefined ? '' : inputName.value,
+                            is_active: true,
+                        });
+                    } else {
+                        await acctMgmtStore.editAccount(
+                            currentViewingUser.value.username, {
+                            newUsername: inputUserAccount.value,
+                            name: inputName.value === undefined ? '' : inputName.value,
+                            is_active: true,
+                        });
+                    }                    
                     await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
                     isEditable.value = false;
                     break;
@@ -327,11 +337,12 @@ export default defineComponent({
             [inputPwd, inputUserAccount, inputName],
             ([newPwd, newAccount, newName]) => { 
                 // 只要[確認密碼]或[密碼]欄位有更動，且所有欄位都不是空的，confirm 按鈕就可點選
-                if (newPwd.length > 0 && newAccount.length > 0 && newName.length > 0) {
+                if(newAccount.length > 0 && newName.length > 0) {
                     isConfirmDisabled.value = false;
-                } else {
-                    isConfirmDisabled.value = true;
                 }
+                if(isResetPwdSectionShow.value && newPwd.length < PWD_VALID_LENGTH) {
+                    isConfirmDisabled.value = true;
+                }               
             }
         );