duplicate account check

src/components/Header.vue

@@ -10,7 +10,7 @@
         <button id="logout_btn" class="btn btn-sm btn-neutral mr-2" @click.prevent="logOutButton">
           Logout
         </button>
-        <img v-show="false" id="acct_mgmt_button" src="@/assets/icon-head-black.svg" width="32" height="32" 
+        <img id="acct_mgmt_button" src="@/assets/icon-head-black.svg" width="32" height="32" 
           class="cursor-pointer"  @click="onAcctHeadClick"
         />
       </div>

src/i18n/en.json

@@ -36,7 +36,8 @@
         "DeleteFirstClause": "deletion is irreversible !",
         "DeleteSecondClause": "You will delete all data and content on this account.",
         "MsgAccountAdded": "Account added.",
-        "MsgAccountDeleteSuccess": "Account deleted."
+        "MsgAccountDeleteSuccess": "Account deleted.",
+        "AccountNotUnique": "Account has already been registered."
     },
     "Compare": {
         "timeUsage": "Time Usage",

src/stores/acctMgmt.js

@@ -125,9 +125,13 @@ export default defineStore('acctMgmtStore', {
       try{
         const response = await this.$axios.get(apiUserDetail);
         this.currentViewingUser.detail = response.data;
+        if(response.status === 200) {
+          return true;
+        }        
       }
       catch(error) {
         apiError(error, 'Failed to get user detail.');
+        return false;
       };
     },
     /**

src/views/AccountManagement/ModalAccountEdit.vue

@@ -11,9 +11,27 @@
                         {{ i18next.t("AcctMgmt.Account") }}
                     </span>
                 </div>
+                <div class="input-and-error flex flex-col">
                     <input id="input_account_field" 
                         class="w-[454px] rounded p-1 border border-[1px] border-[#64748B] flex items-center h-[40px] outline-none"
-                    v-model="inputUserAccount"/>
+                        v-model="inputUserAccount"
+                        :class="{
+                        'text-[#000000]': isAccountUnique,
+                        'text-[#FF3366]': !isAccountUnique,
+                        'border-[#FF3366]': !isAccountUnique,
+                        }"
+                        @focus="onInputAccountFocus"
+                    />
+                    <div v-show="!isAccountUnique" class="error-wrapper my-2">                    
+                        <div class="error-msg-section flex justify-start">
+                        <img src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
+                        <span class="error-msg-text flex text-[#FF3366] h-[24px]">
+                            {{ i18next.t("AcctMgmt.AccountNotUnique") }}
+                        </span>
+                    </div> 
+                </div>
+                               
+            </div>
             </div>
             <div class="input-row w-full flex py-2 h-[40px] mb-4 items-center
                 justify-between">
@@ -138,6 +156,7 @@ export default defineComponent({
         const isPwdEyeOn = ref(false);
         const isPwdConfirmEyeOn = ref(false);
         const isPwdMatched = ref(true);
+        const isConfirmDisabled = ref(true);
 
         const isSetAsAdminChecked = ref(false);
         const isSetActivedChecked = ref(true);
@@ -157,6 +176,8 @@ export default defineComponent({
         const inputPwd = ref("");
         const inputConfirmPwd = ref("");
 
+        const isAccountUnique = ref(true);
+
         // 自從加入這段 watch 之後，填寫密碼欄位之時，就不會胡亂清空掉 account 或是 full name 蘭為了。
         watch(whichCurrentModal, (newVal) => {
             if (newVal === MODAL_CREATE_NEW) {
@@ -172,9 +193,26 @@ export default defineComponent({
             return modalStore.whichModal === MODAL_CREATE_NEW ? i18next.t('AcctMgmt.CreateNew') : i18next.t('AcctMgmt.AccountEdit');
         });
 
-        const isConfirmDisabled = computed(() => {
+
-            return inputPwd.length && inputConfirmPwd.length;
+        watch(
-        });
+            [inputUserAccount, inputName, inputPwd, inputConfirmPwd, isAccountUnique,
+            isPwdMatched,
+            ],
+                ([newAccount, newName, newPwd, newConfirmPwd, newIsAccountUnique,
+                    newPwdMatched,
+                ]) => {
+                if (!newAccount.length || !newName.length || !newPwd.length 
+                    || !newConfirmPwd.length || !newIsAccountUnique
+                    || !newPwdMatched
+                ) {
+                    isConfirmDisabled.value = true;
+                } else {
+                    isConfirmDisabled.value = false;
+                }
+            },
+            { immediate: true }
+        );
+
 
         const togglePwdEyeBtn = () => {
             isPwdEyeOn.value = !isPwdEyeOn.value;
@@ -184,21 +222,21 @@ export default defineComponent({
         };
 
         const validateConfirmPwd = () => {
-            let validateResult = true;
+            isPwdMatched.value = inputPwd.value.length > 0 && inputPwd.value === inputConfirmPwd.value;
-            isPwdMatched.value = inputPwd.value === inputConfirmPwd.value;
-            return validateResult && isPwdMatched.value;
         }
 
         const onConfirmBtnClick = async () => {
+            validateConfirmPwd();
+            if(!isPwdMatched.value){
+                return;
+            }
             
             switch(whichCurrentModal.value) {
                 case MODAL_CREATE_NEW:
-                        const validateResult = validateConfirmPwd();
+                    await checkAccountIsUnique();
-                        if(!validateResult){
+                    if(!isAccountUnique.value) {
                         return;
                     }
-                            //TODO: 這邊要記得回來加一個判斷帳號是否已經存在的邏輯
-                        checkAccountIsUnique();
                     await acctMgmtStore.createNewAccount({
                         username: inputUserAccount.value,
                         password: inputPwd.value,
@@ -217,9 +255,9 @@ export default defineComponent({
         }
 
         const checkAccountIsUnique = async() => {
-            let isAccountUnique = false;
+            const isAccountAlreadyExistAPISuccess = await acctMgmtStore.getUserDetail(inputUserAccount.value);
-            //TODO: call pinia store to call backend API
+            isAccountUnique.value = !isAccountAlreadyExistAPISuccess;
-            return isAccountUnique;
+            return isAccountUnique.value;
         };
 
         const toggleIsAdmin = () => {
@@ -229,6 +267,12 @@ export default defineComponent({
         const toggleIsActivated = () => {
             isSetActivedChecked.value = !isSetActivedChecked.value;
         }
+        const onInputAccountFocus = () => {
+            if(!isAccountUnique.value) {
+                // 之所以要轉回true，是為了讓使用者可以繼續填寫不被阻擋
+                isAccountUnique.value = true;
+            }
+        }
         return {
             isConfirmDisabled,
             username,
@@ -252,6 +296,8 @@ export default defineComponent({
             whichCurrentModal,
             MODAL_CREATE_NEW,
             modalTitle,
+            isAccountUnique,
+            onInputAccountFocus,
         };
     },
     data() {