fix #324 add error message for length < 6

src/constants/constants.js

@@ -1,5 +1,6 @@
 export const PRIME_VUE_TICKS_LIMIT = 6;
 export const ONCE_RENDER_NUM_OF_DATA = 9;
+export const PWD_VALID_LENGTH = 6;
 
 export const GRID_COLOR = '#64748b';
 

src/i18n/en.json

@@ -38,7 +38,8 @@
         "MsgAccountAdded": "Account added.",
         "MsgAccountEdited": "Saved",
         "MsgAccountDeleteSuccess": "Account deleted.",
-        "AccountNotUnique": "Account has already been registered."
+        "AccountNotUnique": "Account has already been registered.",
+        "PwdLengthNotEnough": "Password must be at least 6 characters."
     },
     "Compare": {
         "timeUsage": "Time Usage",

src/views/AccountManagement/ModalAccountEditCreate.vue

@@ -88,10 +88,17 @@
                     <img v-else src='@/assets/icon-eye-hide.svg' class="absolute right-[8px] cursor-pointer" @click="togglePwdConfirmEyeBtn" alt="eye"/>
                 </div>
                 <div class="dummy-grid h-[24px]"></div> <!-- 透過 dummy-grid 來撐起高度-->
-                <div v-show="!isPwdMatched" class="error-msg-section flex justify-start">
+                <div class="error-msg-section flex justify-start">
-                    <img src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
+                    <img v-show="!isPwdMatched" 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.PwdNotMatch") }}
+                        {{ isPwdMatched ? "" : i18next.t("AcctMgmt.PwdNotMatch") }}
+                    </span>
+                </div>
+                <div class="dummy-grid h-[24px]"></div> <!-- 透過 dummy-grid 來撐起高度-->
+                <div class="error-msg-section flex justify-start">
+                    <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>
@@ -145,7 +152,7 @@ import { useToast } from 'vue-toast-notification';
 import useAcctMgmtStore from '@/stores/acctMgmt';
 import ModalHeader from "./ModalHeader.vue";
 import IconChecked from "@/components/icons/IconChecked.vue";
-import { MODAL_CREATE_NEW, MODAL_ACCT_EDIT, } from '@/constants/constants.js';
+import { MODAL_CREATE_NEW, MODAL_ACCT_EDIT, PWD_VALID_LENGTH } from '@/constants/constants.js';
 
 export default defineComponent({
     setup() {
@@ -159,6 +166,7 @@ export default defineComponent({
         const isPwdEyeOn = ref(false);
         const isPwdConfirmEyeOn = ref(false);
         const isPwdMatched = ref(true);
+        const isPwdLengthValid = ref(true);
         const isConfirmDisabled = ref(true);
 
         const isSetAsAdminChecked = ref(false);
@@ -215,17 +223,29 @@ export default defineComponent({
             isPwdMatched.value = inputPwd.value.length > 0 && inputPwd.value === inputConfirmPwd.value;
         }
 
+        const validatePwdLength = () => {
+            isPwdLengthValid.value = inputPwd.value.length >= PWD_VALID_LENGTH;
+        }
+
         const onInputDoubleClick = () => {
             // 允許編輯模式
             isEditable.value = true;
         }
 
         const onConfirmBtnClick = async () => {
+            // rule for matching of confirm password
             validateConfirmPwd();
             if(!isPwdMatched.value){
                 return;
             }
 
+            // rule for minimum length
+            validatePwdLength();
+            if(!isPwdLengthValid.value) {
+                return;
+            }
+            
+            // rule for account uniqueness
             switch(whichCurrentModal.value) {
                 case MODAL_CREATE_NEW:
                     await checkAccountIsUnique();
@@ -259,7 +279,6 @@ export default defineComponent({
                 default:
                 break;
             }
-
         }
 
         const checkAccountIsUnique = async() => {
@@ -303,6 +322,7 @@ export default defineComponent({
                 [inputPwd, inputConfirmPwd],
                 ([newPwd, newConfirmPwd]) => {
                     isPwdMatched.value = newPwd === newConfirmPwd && newPwd.length;
+                    isPwdLengthValid.value = newPwd.length >= PWD_VALID_LENGTH && newConfirmPwd.length >= PWD_VALID_LENGTH;
                     // 只要[確認密碼]或[密碼]有更動，confirm 按鈕就可點選
                     if ((newPwd || newConfirmPwd) && inputUserAccount.length && inputName.length) {
                         isConfirmDisabled.value = false;
@@ -321,6 +341,7 @@ export default defineComponent({
             togglePwdEyeBtn,
             togglePwdConfirmEyeBtn,
             isPwdMatched,
+            isPwdLengthValid,
             inputUserAccount,
             inputName,
             inputPwd,