diff --git a/src/constants/constants.js b/src/constants/constants.js index 87a5231..18a347a 100644 --- a/src/constants/constants.js +++ b/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'; diff --git a/src/i18n/en.json b/src/i18n/en.json index 7e04fba..0f64522 100644 --- a/src/i18n/en.json +++ b/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", diff --git a/src/views/AccountManagement/ModalAccountEditCreate.vue b/src/views/AccountManagement/ModalAccountEditCreate.vue index 9b21b91..ef461bb 100644 --- a/src/views/AccountManagement/ModalAccountEditCreate.vue +++ b/src/views/AccountManagement/ModalAccountEditCreate.vue @@ -88,10 +88,17 @@ eye
-
- ! +
+ ! - {{ i18next.t("AcctMgmt.PwdNotMatch") }} + {{ isPwdMatched ? "" : i18next.t("AcctMgmt.PwdNotMatch") }} + +
+
+
+ ! + + {{ isPwdLengthValid ? "" : i18next.t("AcctMgmt.PwdLengthNotEnough") }}
@@ -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,