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

fixed: #319 put watch of all input fieds function inside "onMounted" function

Browse Source
This commit is contained in:
Cindy
2024-07-10 10:18:30 +08:00
parent 58cfd3f31f
commit 423499b77c
2 changed files with 45 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/test.local.txt
View File

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

@@ -197,25 +197,29 @@ export default defineComponent({
return modalStore.whichModal === MODAL_CREATE_NEW ? i18next.t('AcctMgmt.CreateNew') : i18next.t('AcctMgmt.AccountEdit');
});
watch(
[inputUserAccount, inputName, inputPwd, inputConfirmPwd, isAccountUnique,
isPwdMatched,
],
([newAccount, newName, newPwd, newConfirmPwd, newIsAccountUnique,
newPwdMatched,
]) => {
const validateInputLengthAndEquality = (inputAccountToTest, inputNameToTest, inputPasswordToTest, inputConfirmPwdToTest, inputPwdMatchedToTest,
) => {
console.log('inputAccountToTest?.length', inputAccountToTest?.length);
return !inputAccountToTest?.length || !inputNameToTest?.length || !inputPasswordToTest?.length
|| !inputConfirmPwdToTest?.length || !inputPwdMatchedToTest;
}
// watch( TODO:暫時註解
// [inputUserAccount, inputName, inputPwd, inputConfirmPwd,
// isPwdMatched,
// ],
// async ([newAccount, newName, newPwd, newConfirmPwd,
// newPwdMatched,
// ]) => {
if (!newAccount?.length || !newName?.length || !newPwd?.length
|| !newConfirmPwd?.length || !newIsAccountUnique
|| !newPwdMatched
) {
isConfirmDisabled.value = true;
} else {
isConfirmDisabled.value = false;
}
},
{ immediate: true }
);
// if (validateInputLengthAndEquality(newAccount, newName, newPwd, newConfirmPwd, newPwdMatched)) {
// isConfirmDisabled.value = true;
// } else {
// isConfirmDisabled.value = false;
// }
// },
// { immediate: true }
// );
const togglePwdEyeBtn = () => {
@@ -293,14 +297,18 @@ export default defineComponent({
isSetActivedChecked.value = !isSetActivedChecked.value;
}
}
const onInputAccountFocus = () => {
if(!isAccountUnique.value) {
// 之所以要轉回true，是為了讓使用者可以繼續填寫不被阻擋
isAccountUnique.value = true;
}
if(isConfirmDisabled.value){
isConfirmDisabled.value = false;
}
const onInputAccountFocus = async() => {
// if(!isAccountUnique.value) {
// // 之所以要轉回true，是為了讓使用者可以繼續填寫不被阻擋
// isAccountUnique.value = true;
// }
// if(isConfirmDisabled.value){
// // 所有欄位都要填寫，confirm按鈕才可點選
// if(validateInputLengthAndEquality(inputUserAccount.value, inputName.value, inputPwd.value, inputConfirmPwd.value, isPwdMatched.value)
// ){
// isConfirmDisabled.value = false;
// }
// }
}
const onInputNameFocus = () => {
@@ -310,9 +318,17 @@ export default defineComponent({
}
onMounted(() => {
console.log('TODO:', username.value, name.value, isAdmin.value);
console.log('username', username, name, );
console.log('userData TODO:', loginStore.userData);
watch(
[inputUserAccount, inputName, inputPwd, inputConfirmPwd, isPwdMatched],
([newAccount, newName, newPwd, newConfirmPwd, newPwdMatched]) => {
if (validateInputLengthAndEquality(newAccount, newName, newPwd, newConfirmPwd, newPwdMatched)) {
isConfirmDisabled.value = true;
} else {
isConfirmDisabled.value = false;
}
},
{ immediate: true }
);
});
return {