imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix #324 add error message for length < 6

Browse Source
This commit is contained in:
Cindy Chang
2024-08-09 15:26:57 +08:00
parent 6204361b43
commit 17e51ca98a
3 changed files with 29 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/views/AccountManagement/ModalAccountEditCreate.vue
View File

@@ -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">
<img src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
<div class="error-msg-section flex justify-start">
<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,