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

Merge branch 'acct_mgmt'

Browse Source
This commit is contained in:
Cindy Chang
2024-08-26 13:54:13 +08:00
parent 26295d5b55 ff8179404b
commit f938eae2fc
2 changed files with 94 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/i18n/en.json
View File

@@ -29,6 +29,7 @@
"Detail": "Detail",
"Edit": "Edit",
"Delete": "Delete",
"Reset": "Reset",
"AccountEdit": "Account Edit",
"AccountInformation": "Account Information",
"Password": "Password",

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

@@ -47,25 +47,53 @@
autocomplete="off"
/>
</div>
<div v-show="!isSSO" class="input-row w-full flex py-2 h-[40px] mb-4 items-center
<div v-show="!isSSO" class="input-row w-full flex py-2 mb-4 items-center
justify-between">
<div class="field-label text-sm flex items-center font-medium justify-end">
<span class="align-right-span flex w-[122px] justify-end">
{{ i18next.t("AcctMgmt.Password") }}
</span>
</div>
<div class="w-[454px] rounded border-[1px] border-[#64748B] flex items-center h-[40px] relative">
<input id="input_first_pwd" class="outline-none p-1 w-[352px]" :type="isPwdEyeOn ? 'text' : 'password'"
v-model="inputPwd" :readonly="!isEditable" @dblclick="onInputDoubleClick"
autocomplete="off" />
<img v-if="isPwdEyeOn" src='@/assets/icon-eye-open.svg' class="absolute right-[8px] cursor-pointer"
@click="togglePwdEyeBtn" alt=""/>
<img v-else src='@/assets/icon-eye-hide.svg' class="absolute right-[8px] cursor-pointer" @click="togglePwdEyeBtn" alt="eye"/>
</div>
<div class="field-label text-sm flex items-start font-medium justify-end"
:class="{
'h-[100px]': whichCurrentModal !== MODAL_CREATE_NEW,
}"
>
<span class="align-right-span flex h-full w-[122px] justify-end text-top">
{{ i18next.t("AcctMgmt.Password") }}
</span>
</div>
<div class="reset-btn-and-input-pwd-and-error flex flex-col"
:class="{'h-[100px]': whichCurrentModal !== MODAL_CREATE_NEW,}"
>
<div v-if="whichCurrentModal !== MODAL_CREATE_NEW" class="flex account-edit-section justify-start w-[454px]">
<button class="flex w-[85px] h-[40px] reset-btn rounded-full border-[1px] border-[#666666] cursor-pointer
items-center justify-center hover:text-[#0099FF] hover:border-[#0099FF] mb-[20px]"
@click="onResetPwdButtonClick"
>
{{ i18next.t("AcctMgmt.Reset") }}
</button>
</div>
<div v-if="whichCurrentModal === MODAL_CREATE_NEW || isResetPwdSectionShow"
class="w-[454px] flex flex-col input-and-error-msg">
<div class="input-and-eye flex items-center w-full h-[40px] relative border-[1px] rounded"
:class="{'border-[#FF3366]': !isPwdLengthValid, 'border-[#64748B]': isPwdLengthValid,}"
>
<input id="input_first_pwd" class="outline-none p-1 w-[352px]" :type="isPwdEyeOn ? 'text' : 'password'"
v-model="inputPwd" :readonly="!isEditable" @dblclick="onInputDoubleClick"
autocomplete="off" :class="{'color-[#FF3366]': !isPwdLengthValid, 'color-[#64748B]': isPwdLengthValid,}"/>
<img id='eye_button' v-if="isPwdEyeOn" src='@/assets/icon-eye-open.svg' class="absolute right-[8px] cursor-pointer"
@mousedown="togglePwdEyeBtn(true)" @mouseup="togglePwdEyeBtn(false)" alt=""/>
<img v-else src='@/assets/icon-eye-hide.svg' class="absolute right-[8px] cursor-pointer"
@mousedown="togglePwdEyeBtn(true)" @mouseup="togglePwdEyeBtn(false)" alt="eye"/>
</div>
<div class="error-msg-section flex justify-start mt-4">
<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>
</div>
</div>
<div v-show="!isSSO" id="confirm_pwd_row" class="input-row w-full grid grid-cols-2 grid-cols-[122px_1fr] gap-x-4
<div v-show="false" id="confirm_pwd_row" class="input-row w-full grid grid-cols-2 grid-cols-[122px_1fr] gap-x-4
mb-4 flex items-center"> <!-- 2-by-2 的格子，其中左下角是一個dummy格子，其沒有內容 -->
<span class="field-label w-[122px] text-sm flex items-center justify-end text-right font-medium mr-4 whitespace-nowrap"
<span v-show="false" class="field-label w-[122px] text-sm flex items-center justify-end text-right font-medium mr-4 whitespace-nowrap"
:class="{
'text-[#000000]': isPwdMatched,
'text-[#FF3366]': !isPwdMatched,
@@ -73,13 +101,13 @@
{{ i18next.t("AcctMgmt.ConfirmPassword") }}
</span>
<div class="input-and-toggle-btn w-[454px] flex flex-row rounded border border-[1px] relative items-center
<div v-show="false" class="input-and-toggle-btn w-[454px] flex flex-row rounded border border-[1px] relative items-center
h-[40px] mb-4"
:class="{
'border-[#000000]': isPwdMatched,
'border-[#FF3366]': !isPwdMatched,
}">
<input id="input_second_pwd" class="outline-none p-1 w-[352px]" :type="isPwdConfirmEyeOn ? 'text' : 'password'"
<input v-show="false" id="input_second_pwd" class="outline-none p-1 w-[352px]" :type="isPwdConfirmEyeOn ? 'text' : 'password'"
v-model="inputConfirmPwd" :readonly="!isEditable" @dblclick="onInputDoubleClick"
:class="{
'text-[#000000]': isPwdMatched,
@@ -124,14 +152,14 @@
</div>
</main>
<footer class="flex row footer justify-end pr-[32px] pb-8">
<button class="cancel-btn rounded rounded-full w-[92px] h-10 px-2.5 py-6 border border-[1px] border-[#64748B]
<button class="cancel-btn rounded-full w-[92px] h-10 px-2.5 py-6 border border-[1px] border-[#64748B]
flex justify-center items-center text-[#4E5969] font-medium
hover:bg-[#64748B] hover:border-[#CBD5E1] hover:text-[#FFFFFF]"
@click="onCancelBtnClick"
>
{{ i18next.t("Global.Cancel") }}
</button>
<button class="confirm-btn rounded rounded-full w-[92px] h-10 px-2.5 py-6
<button class="confirm-btn rounded-full w-[92px] h-10 px-2.5 py-6
flex justify-center items-center text-[#ffffff] font-medium ml-[16px]"
@click="onConfirmBtnClick" :disabled="isConfirmDisabled"
:class="{
@@ -146,7 +174,7 @@
</template>
<script>
import { defineComponent, computed, ref, watch, } from 'vue';
import { defineComponent, computed, ref, watch, onMounted, } from 'vue';
import i18next from "@/i18n/i18n.js";
import { mapActions, } from 'pinia';
import { useModalStore } from '@/stores/modal.js';
@@ -167,10 +195,9 @@ export default defineComponent({
const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
const isPwdEyeOn = ref(false);
const isPwdConfirmEyeOn = ref(false);
const isPwdMatched = ref(true);
const isConfirmDisabled = ref(false);
const isPwdLengthValid = ref(true);
const isConfirmDisabled = ref(true);
const isResetPwdSectionShow = ref(false);
const isSetAsAdminChecked = ref(false);
const isSetActivedChecked = ref(true);
@@ -184,10 +211,7 @@ export default defineComponent({
const inputUserAccount = ref(whichCurrentModal.value === MODAL_CREATE_NEW ? '' : currentViewingUser.value.username);
const inputName = ref(whichCurrentModal.value === MODAL_CREATE_NEW ? '' : currentViewingUser.value.name);
const inputPwd = ref("");
const inputConfirmPwd = ref("");
const isAccountUnique = ref(true);
const isEditable = ref(true);
// 自從加入這段 watch 之後，填寫密碼欄位之時，就不會胡亂清空掉 account 或是 full name 欄位了。
@@ -205,19 +229,12 @@ export default defineComponent({
return modalStore.whichModal === MODAL_CREATE_NEW ? i18next.t('AcctMgmt.CreateNew') : i18next.t('AcctMgmt.AccountEdit');
});
const togglePwdEyeBtn = () => {
isPwdEyeOn.value = !isPwdEyeOn.value;
const togglePwdEyeBtn = (toBeOpen) => {
isPwdEyeOn.value = toBeOpen;
};
const togglePwdConfirmEyeBtn = () => {
isPwdConfirmEyeOn.value = !isPwdConfirmEyeOn.value;
};
const validateConfirmPwd = () => {
isPwdMatched.value = inputPwd.value.length > 0 && inputPwd.value === inputConfirmPwd.value;
}
const validatePwdLength = () => {
isPwdLengthValid.value = inputPwd.value.length >= PWD_VALID_LENGTH;
isPwdLengthValid.value = !isResetPwdSectionShow.value || inputPwd.value.length >= PWD_VALID_LENGTH;
}
const onInputDoubleClick = () => {
@@ -226,12 +243,6 @@ export default defineComponent({
}
const onConfirmBtnClick = async () => {
// rule for matching of confirm password
validateConfirmPwd();
if(!isPwdMatched.value){
return;
}
// rule for minimum length
validatePwdLength();
if(!isPwdLengthValid.value) {
@@ -263,13 +274,23 @@ export default defineComponent({
return;
}
// 要注意的是舊的username跟新的username可以是不同的
await acctMgmtStore.editAccount(
currentViewingUser.value.username, {
newUsername: inputUserAccount.value,
password: inputPwd.value,
name: inputName.value === undefined ? '' : inputName.value,
is_active: true,
});
// 區分有無傳入密碼的情況
if(isResetPwdSectionShow.value) {
await acctMgmtStore.editAccount(
currentViewingUser.value.username, {
newUsername: inputUserAccount.value,
password: inputPwd.value,
name: inputName.value === undefined ? '' : inputName.value,
is_active: true,
});
} else {
await acctMgmtStore.editAccount(
currentViewingUser.value.username, {
newUsername: inputUserAccount.value,
name: inputName.value === undefined ? '' : inputName.value,
is_active: true,
});
}
await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
isEditable.value = false;
break;
@@ -279,6 +300,10 @@ export default defineComponent({
}
const checkAccountIsUnique = async() => {
// 如果使用者沒有更動過欄位，那就不用調用任何後端的API
if(inputUserAccount.value === username.value) {
return true;
}
const isAccountAlreadyExistAPISuccess = await acctMgmtStore.getUserDetail(inputUserAccount.value);
isAccountUnique.value = !isAccountAlreadyExistAPISuccess;
return isAccountUnique.value;
@@ -302,40 +327,47 @@ export default defineComponent({
}
}
const onResetPwdButtonClick = () => {
isResetPwdSectionShow.value = !isResetPwdSectionShow.value;
// 必須清空密碼欄位輸入的字串
inputPwd.value = '';
}
watch(
[inputPwd, inputConfirmPwd, inputUserAccount, inputName],
([newPwd, newConfirmPwd, newAccount, newName]) => {
isPwdMatched.value = newPwd === newConfirmPwd && newPwd.length;
isPwdLengthValid.value = newPwd.length >= PWD_VALID_LENGTH && newConfirmPwd.length >= PWD_VALID_LENGTH;
[inputPwd, inputUserAccount, inputName],
([newPwd, newAccount, newName]) => {
// 只要[確認密碼]或[密碼]欄位有更動，且所有欄位都不是空的，confirm 按鈕就可點選
if (newPwd.length > 0 && newConfirmPwd.length > 0 && newAccount.length > 0 && newName.length > 0) {
if(newAccount.length > 0 && newName.length > 0) {
isConfirmDisabled.value = false;
} else {
}
if(isResetPwdSectionShow.value && newPwd.length < PWD_VALID_LENGTH) {
isConfirmDisabled.value = true;
}
}
);
onMounted(() => {
});
return {
isConfirmDisabled,
username,
name,
isSSO,
isPwdEyeOn,
isPwdConfirmEyeOn,
togglePwdEyeBtn,
togglePwdConfirmEyeBtn,
isPwdMatched,
isPwdLengthValid,
inputUserAccount,
inputName,
inputPwd,
inputConfirmPwd,
onConfirmBtnClick,
onInputDoubleClick,
onInputNameFocus,
onResetPwdButtonClick,
isSetAsAdminChecked,
isSetActivedChecked,
isResetPwdSectionShow,
toggleIsAdmin,
toggleIsActivated,
whichCurrentModal,