feature: create POST api done.

src/views/AccountManagement/ModalAccountEdit.vue

@@ -13,7 +13,7 @@
                 </div>
                 <input id="input_account_field" 
                     class="w-[454px] rounded p-1 border border-[1px] border-[#64748B] flex items-center h-[40px] outline-none"
-                    :value="username"/>
+                    v-model="inputUserAccount"/>
             </div>
             <div class="input-row w-full flex py-2 h-[40px] mb-4 items-center
                 justify-between">
@@ -23,7 +23,7 @@
                     </span>
                 </div>
                 <input class="w-[454px] rounded p-1 border border-[1px] border-[#64748B] flex items-center h-[40px] outline-none"
-                    :value="name"/>
+                    v-model="inputName"/>
             </div>
             <div v-show="!isSSO" class="input-row w-full flex py-2 h-[40px] mb-4 items-center
                 justify-between">
@@ -115,7 +115,7 @@
 </template>
 
 <script>
-import { defineComponent, computed, ref, } from 'vue';
+import { defineComponent, computed, ref, watch, } from 'vue';
 import i18next from "@/i18n/i18n.js";
 import { mapActions, } from 'pinia';
 import { useModalStore } from '@/stores/modal.js';
@@ -133,8 +133,7 @@ export default defineComponent({
         const isPwdEyeOn = ref(false);
         const isPwdConfirmEyeOn = ref(false);
         const isPwdMatched = ref(true);
-        const inputPwd = ref("");
-        const inputConfirmPwd = ref("");
+
         const isSetAsAdminChecked = ref(false);
         const isSetActivedChecked = ref(true);
 
@@ -148,6 +147,22 @@ export default defineComponent({
         const username = computed(() => acctMgmtStore.currentViewingUser.username);
         const name = computed(() => acctMgmtStore.currentViewingUser.name);
 
+        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("");
+
+        // 自從加入這段 watch 之後，填寫密碼欄位之時，就不會胡亂清空掉 account 或是 full name 蘭為了。
+        watch(whichCurrentModal, (newVal) => {
+            if (newVal === MODAL_CREATE_NEW) {
+                inputUserAccount.value = '';
+                inputName.value = '';
+            } else {
+                inputUserAccount.value = currentViewingUser.value.username;
+                inputName.value = currentViewingUser.value.name;
+            }
+        });
+
         const modalTitle = computed(() => {
             return modalStore.whichModal === MODAL_CREATE_NEW ? i18next.t('AcctMgmt.CreateNew') : i18next.t('AcctMgmt.AccountEdit');
         });
@@ -164,14 +179,41 @@ export default defineComponent({
         };
 
         const validateConfirmPwd = () => {
+            let validateResult = true;
             isPwdMatched.value = inputPwd.value === inputConfirmPwd.value;
-            console.log('isPwdMatched.value',isPwdMatched.value );
+            return validateResult && isPwdMatched.value;
         }
 
         const onConfirmBtnClick = () => {
-            validateConfirmPwd();
+            const validateResult = validateConfirmPwd();
+            if(!validateResult){
+                return;
+            }
+                //TODO: 這邊要記得回來加一個判斷帳號是否已經存在的邏輯
+            checkAccountIsUnique();
+            console.log('input content to feed in',
+                inputUserAccount.value,
+                inputPwd.value,
+                inputName.value,
+                isSetAsAdminChecked.value,
+                isSetActivedChecked.value,
+                );
+            acctMgmtStore.createNewAccount({
+                username: inputUserAccount.value,
+                password: inputPwd.value,
+                name: inputName.value,
+                is_admin: isSetAsAdminChecked.value,
+                is_active: isSetActivedChecked.value,
+            });
+
         }
 
+        const checkAccountIsUnique = async() => {
+            let isAccountUnique = false;
+            //TODO: call pinia store to call backend API
+            return isAccountUnique;
+        };
+
         const toggleIsAdmin = () => {
             isSetAsAdminChecked.value = !isSetAsAdminChecked.value;
         }
@@ -190,6 +232,8 @@ export default defineComponent({
             togglePwdEyeBtn,
             togglePwdConfirmEyeBtn,
             isPwdMatched,
+            inputUserAccount,
+            inputName,
             inputPwd,
             inputConfirmPwd,
             onConfirmBtnClick,