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 @@
-
-

+
+
- {{ 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,