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