duplicate account check
This commit is contained in:
Cindy Chang
@@ -10,7 +10,7 @@
|
||||
<button id="logout_btn" class="btn btn-sm btn-neutral mr-2" @click.prevent="logOutButton">
|
||||
Logout
|
||||
</button>
|
||||
<img v-show="false" id="acct_mgmt_button" src="@/assets/icon-head-black.svg" width="32" height="32"
|
||||
<img id="acct_mgmt_button" src="@/assets/icon-head-black.svg" width="32" height="32"
|
||||
class="cursor-pointer" @click="onAcctHeadClick"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -36,7 +36,8 @@
|
||||
"DeleteFirstClause": "deletion is irreversible !",
|
||||
"DeleteSecondClause": "You will delete all data and content on this account.",
|
||||
"MsgAccountAdded": "Account added.",
|
||||
"MsgAccountDeleteSuccess": "Account deleted."
|
||||
"MsgAccountDeleteSuccess": "Account deleted.",
|
||||
"AccountNotUnique": "Account has already been registered."
|
||||
},
|
||||
"Compare": {
|
||||
"timeUsage": "Time Usage",
|
||||
|
||||
@@ -125,9 +125,13 @@ export default defineStore('acctMgmtStore', {
|
||||
try{
|
||||
const response = await this.$axios.get(apiUserDetail);
|
||||
this.currentViewingUser.detail = response.data;
|
||||
if(response.status === 200) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
catch(error) {
|
||||
apiError(error, 'Failed to get user detail.');
|
||||
return false;
|
||||
};
|
||||
},
|
||||
/**
|
||||
|
||||
@@ -11,9 +11,27 @@
|
||||
{{ i18next.t("AcctMgmt.Account") }}
|
||||
</span>
|
||||
</div>
|
||||
<input id="input_account_field"
|
||||
class="w-[454px] rounded p-1 border border-[1px] border-[#64748B] flex items-center h-[40px] outline-none"
|
||||
v-model="inputUserAccount"/>
|
||||
<div class="input-and-error flex flex-col">
|
||||
<input id="input_account_field"
|
||||
class="w-[454px] rounded p-1 border border-[1px] border-[#64748B] flex items-center h-[40px] outline-none"
|
||||
v-model="inputUserAccount"
|
||||
:class="{
|
||||
'text-[#000000]': isAccountUnique,
|
||||
'text-[#FF3366]': !isAccountUnique,
|
||||
'border-[#FF3366]': !isAccountUnique,
|
||||
}"
|
||||
@focus="onInputAccountFocus"
|
||||
/>
|
||||
<div v-show="!isAccountUnique" class="error-wrapper my-2">
|
||||
<div class="error-msg-section flex justify-start">
|
||||
<img 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.AccountNotUnique") }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-row w-full flex py-2 h-[40px] mb-4 items-center
|
||||
justify-between">
|
||||
@@ -138,6 +156,7 @@ export default defineComponent({
|
||||
const isPwdEyeOn = ref(false);
|
||||
const isPwdConfirmEyeOn = ref(false);
|
||||
const isPwdMatched = ref(true);
|
||||
const isConfirmDisabled = ref(true);
|
||||
|
||||
const isSetAsAdminChecked = ref(false);
|
||||
const isSetActivedChecked = ref(true);
|
||||
@@ -157,6 +176,8 @@ export default defineComponent({
|
||||
const inputPwd = ref("");
|
||||
const inputConfirmPwd = ref("");
|
||||
|
||||
const isAccountUnique = ref(true);
|
||||
|
||||
// 自從加入這段 watch 之後，填寫密碼欄位之時，就不會胡亂清空掉 account 或是 full name 蘭為了。
|
||||
watch(whichCurrentModal, (newVal) => {
|
||||
if (newVal === MODAL_CREATE_NEW) {
|
||||
@@ -172,9 +193,26 @@ export default defineComponent({
|
||||
return modalStore.whichModal === MODAL_CREATE_NEW ? i18next.t('AcctMgmt.CreateNew') : i18next.t('AcctMgmt.AccountEdit');
|
||||
});
|
||||
|
||||
const isConfirmDisabled = computed(() => {
|
||||
return inputPwd.length && inputConfirmPwd.length;
|
||||
});
|
||||
|
||||
watch(
|
||||
[inputUserAccount, inputName, inputPwd, inputConfirmPwd, isAccountUnique,
|
||||
isPwdMatched,
|
||||
],
|
||||
([newAccount, newName, newPwd, newConfirmPwd, newIsAccountUnique,
|
||||
newPwdMatched,
|
||||
]) => {
|
||||
if (!newAccount.length || !newName.length || !newPwd.length
|
||||
|| !newConfirmPwd.length || !newIsAccountUnique
|
||||
|| !newPwdMatched
|
||||
) {
|
||||
isConfirmDisabled.value = true;
|
||||
} else {
|
||||
isConfirmDisabled.value = false;
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
|
||||
const togglePwdEyeBtn = () => {
|
||||
isPwdEyeOn.value = !isPwdEyeOn.value;
|
||||
@@ -184,31 +222,31 @@ export default defineComponent({
|
||||
};
|
||||
|
||||
const validateConfirmPwd = () => {
|
||||
let validateResult = true;
|
||||
isPwdMatched.value = inputPwd.value === inputConfirmPwd.value;
|
||||
return validateResult && isPwdMatched.value;
|
||||
isPwdMatched.value = inputPwd.value.length > 0 && inputPwd.value === inputConfirmPwd.value;
|
||||
}
|
||||
|
||||
const onConfirmBtnClick = async () => {
|
||||
validateConfirmPwd();
|
||||
if(!isPwdMatched.value){
|
||||
return;
|
||||
}
|
||||
|
||||
switch(whichCurrentModal.value) {
|
||||
case MODAL_CREATE_NEW:
|
||||
const validateResult = validateConfirmPwd();
|
||||
if(!validateResult){
|
||||
return;
|
||||
}
|
||||
//TODO: 這邊要記得回來加一個判斷帳號是否已經存在的邏輯
|
||||
checkAccountIsUnique();
|
||||
await acctMgmtStore.createNewAccount({
|
||||
username: inputUserAccount.value,
|
||||
password: inputPwd.value,
|
||||
name: inputName.value,
|
||||
is_admin: isSetAsAdminChecked.value,
|
||||
is_active: isSetActivedChecked.value,
|
||||
});
|
||||
await toast.success(i18next.t("AcctMgmt.MsgAccountAdded"));
|
||||
await modalStore.closeModal();
|
||||
await router.push('/account/account-admin');
|
||||
await checkAccountIsUnique();
|
||||
if(!isAccountUnique.value) {
|
||||
return;
|
||||
}
|
||||
await acctMgmtStore.createNewAccount({
|
||||
username: inputUserAccount.value,
|
||||
password: inputPwd.value,
|
||||
name: inputName.value,
|
||||
is_admin: isSetAsAdminChecked.value,
|
||||
is_active: isSetActivedChecked.value,
|
||||
});
|
||||
await toast.success(i18next.t("AcctMgmt.MsgAccountAdded"));
|
||||
await modalStore.closeModal();
|
||||
await router.push('/account/account-admin');
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
@@ -217,9 +255,9 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
const checkAccountIsUnique = async() => {
|
||||
let isAccountUnique = false;
|
||||
//TODO: call pinia store to call backend API
|
||||
return isAccountUnique;
|
||||
const isAccountAlreadyExistAPISuccess = await acctMgmtStore.getUserDetail(inputUserAccount.value);
|
||||
isAccountUnique.value = !isAccountAlreadyExistAPISuccess;
|
||||
return isAccountUnique.value;
|
||||
};
|
||||
|
||||
const toggleIsAdmin = () => {
|
||||
@@ -229,6 +267,12 @@ export default defineComponent({
|
||||
const toggleIsActivated = () => {
|
||||
isSetActivedChecked.value = !isSetActivedChecked.value;
|
||||
}
|
||||
const onInputAccountFocus = () => {
|
||||
if(!isAccountUnique.value) {
|
||||
// 之所以要轉回true，是為了讓使用者可以繼續填寫不被阻擋
|
||||
isAccountUnique.value = true;
|
||||
}
|
||||
}
|
||||
return {
|
||||
isConfirmDisabled,
|
||||
username,
|
||||
@@ -252,6 +296,8 @@ export default defineComponent({
|
||||
whichCurrentModal,
|
||||
MODAL_CREATE_NEW,
|
||||
modalTitle,
|
||||
isAccountUnique,
|
||||
onInputAccountFocus,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
|
||||
Reference in New Issue
Block a user