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

Apply repository-wide ESLint auto-fix formatting pass

Browse Source 
Co-Authored-By: Codex <codex@openai.com>
This commit is contained in:
依瑪貓
2026-03-08 12:11:57 +08:00
parent 7c48faaa3d
commit 847904c49b
172 changed files with 13629 additions and 9154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

579
src/views/AccountManagement/AccountAdmin/AccountAdmin.vue
View File

@@ -1,115 +1,239 @@
<template>
<div class="flex justify-center pt-2">
<div class="flex w-[1216px] flex-col items-center">
<div class="flex w-full justify-between py-2 items-center">
<button id="create_new_acct_btn" class="flex rounded-full bg-primary text-[#ffffff] flex justify-center
items-center px-6 py-[10px]" @click="onCreateNewClick">
{{ i18next.t("AcctMgmt.CreateNew") }}
</button>
<SearchBar @on-search-account-button-click="onSearchAccountButtonClick"/>
</div>
<div id="acct_mgmt_data_grid" class="flex w-full overflow-y-auto h-[570px]" @scroll="handleScroll">
<DataTable :value="accountSearchResults" dataKey="username" tableClass="w-full mt-4 text-sm relative table-fixed"
:rowClass="getRowClass"
<div class="flex justify-center pt-2">
<div class="flex w-[1216px] flex-col items-center">
<div class="flex w-full justify-between py-2 items-center">
<button
id="create_new_acct_btn"
class="flex rounded-full bg-primary text-[#ffffff] flex justify-center items-center px-6 py-[10px]"
@click="onCreateNewClick"
>
{{ i18next.t("AcctMgmt.CreateNew") }}
</button>
<SearchBar
@on-search-account-button-click="onSearchAccountButtonClick"
/>
</div>
<div
id="acct_mgmt_data_grid"
class="flex w-full overflow-y-auto h-[570px]"
@scroll="handleScroll"
>
<DataTable
:value="accountSearchResults"
dataKey="username"
tableClass="w-full mt-4 text-sm relative table-fixed"
:rowClass="getRowClass"
>
<Column
field="username"
:header="i18next.t('AcctMgmt.Account')"
bodyClass="font-medium"
sortable
>
<template #body="slotProps">
<div
class="row-container flex-w-full-hoverable w-full"
@mouseenter="handleRowMouseOver(slotProps.data.username)"
@mouseout="handleRowMouseOut(slotProps.data.username)"
>
<div
@dblclick="onAcctDoubleClick(slotProps.data.username)"
class="account-cell cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis"
>
<Column field="username" :header="i18next.t('AcctMgmt.Account')" bodyClass="font-medium" sortable>
<template #body="slotProps">
<div class="row-container flex-w-full-hoverable w-full" @mouseenter="handleRowMouseOver(slotProps.data.username)"
@mouseout="handleRowMouseOut(slotProps.data.username)">
<div @dblclick="onAcctDoubleClick(slotProps.data.username)" class="account-cell cursor-pointer
whitespace-nowrap overflow-hidden text-ellipsis">
{{ slotProps.data.username }}
</div>
<span id="just_create_badge" class="flex ml-4"
v-if="isOneAccountJustCreate && slotProps.data.username === justCreateUsername">
<img src="@/assets/icon-new.svg" alt="New">
</span>
</div>
</template>
</Column>
<Column field="name" :header="i18next.t('AcctMgmt.FullName')" bodyClass="text-neutral-500" sortable>
<template #body="slotProps">
<div class="row-container flex-w-full-hoverable w-full" @mouseenter="handleRowMouseOver(slotProps.data.username)"
@mouseout="handleRowMouseOut(slotProps.data.username)">
<div class="fullname-cell whitespace-nowrap overflow-hidden text-ellipsis">
{{ slotProps.data.name }}
</div>
</div>
</template>
</Column>
<Column field="is_admin" :header="i18next.t('AcctMgmt.AdminRights')" bodyClass="text-neutral-500 flex justify-center"
headerClass="header-center">
<template #body="slotProps">
<div v-if="!slotProps.data.isCurrentLoggedIn" class="row-container flex-w-full-hoverable flex w-full justify-center" @mouseenter="handleRowMouseOver(slotProps.data.username)"
@mouseout="handleRowMouseOut(slotProps.data.username)">
<img v-if="slotProps.data.is_admin" src="@/assets/radioOn.svg" alt="Radio On" class="btn-admin cursor-pointer flex justify-center"
@click="onAdminInputClick(slotProps.data, false)"
/>
<img v-else src="@/assets/radioOff.svg" alt="Radio Off" class="btn-admin cursor-pointer flex justify-center"
@click="onAdminInputClick(slotProps.data, true)"
/>
</div>
<div v-else @mouseenter="handleRowMouseOver(slotProps.data.username)" @mouseout="handleRowMouseOut(slotProps.data.username)"
class="row-container flex-w-full-hoverable flex w-full h-6"></div>
</template>
</Column>
<Column field="is_active" :header="i18next.t('AcctMgmt.AccountActivation')" bodyClass="text-neutral-500"
headerClass="header-center">
<template #body="slotProps">
<div v-if="!slotProps.data.isCurrentLoggedIn" class="row-container flex-w-full-hoverable w-full" @mouseenter="handleRowMouseOver(slotProps.data.username)"
@mouseout="handleRowMouseOut(slotProps.data.username)">
<div class="w-full flex justify-center">
<img v-if="slotProps.data.is_active" src="@/assets/radioOn.svg" alt="Radio On" class="btn-activate cursor-pointer flex"
@click="setIsActiveInput(slotProps.data, false)"/>
<img v-else src="@/assets/radioOff.svg" alt="Radio Off" class="btn-activate cursor-pointer flex"
@click="setIsActiveInput(slotProps.data, true)"/>
</div>
</div>
<div v-else @mouseenter="handleRowMouseOver(slotProps.data.username)" @mouseout="handleRowMouseOut(slotProps.data.username)"
class="row-container flex-w-full-hoverable flex w-full h-6"></div>
</template>
</Column>
<Column :header="i18next.t('AcctMgmt.Detail')" bodyClass="text-neutral-500" headerClass="header-center">
<template #body="slotProps">
<div class="row-container flex-w-full-hoverable w-full flex justify-center" @mouseenter="handleRowMouseOver(slotProps.data.username)"
@mouseout="handleRowMouseOut(slotProps.data.username)">
<img :src="slotProps.data.isDetailHovered ? iconDetailOn : iconDetailOff" alt="Detail" class="btn-detail cursor-pointer" @click="onDetailBtnClick(slotProps.data.username)"
@mouseover="handleDetailMouseOver(slotProps.data.username)"
@mouseout="handleDetailMouseOut(slotProps.data.username)"
/>
</div>
</template>
</Column>
<Column :header="i18next.t('AcctMgmt.Edit')" bodyClass="text-neutral-500" headerClass="header-center">
<template #body="slotProps">
<div class="row-container flex-w-full-hoverable w-full flex justify-center" @mouseenter="handleRowMouseOver(slotProps.data.username)">
<img :src="slotProps.data.isEditHovered ? iconEditOn : iconEditOff" alt="Edit" class="btn-edit cursor-pointer"
@click="onEditButtonClick(slotProps.data.username)"
@mouseover="handleEditMouseOver(slotProps.data.username)"
@mouseout="handleEditMouseOut(slotProps.data.username)"
/>
</div>
</template>
</Column>
<Column :header="i18next.t('AcctMgmt.Delete')" bodyClass="text-neutral-500 flex justify-center" headerClass="header-center">
<template #body="slotProps">
<div v-if="!slotProps.data.isCurrentLoggedIn" class="row-container flex-w-full-hoverable w-full flex justify-center" @mouseenter="handleRowMouseOver(slotProps.data.username)">
<img :src="slotProps.data.isDeleteHovered ? iconDeleteRed : iconDeleteGray"
:alt="slotProps.data.isDeleteHovered ? 'hovered' : 'not-hovered'"
class="delete-account cursor-pointer flex"
@mouseover="handleDeleteMouseOver(slotProps.data.username)"
@mouseout="handleDeleteMouseOut(slotProps.data.username)"
@click="onDeleteBtnClick(slotProps.data.username)"
>
</div>
<div v-else @mouseenter="handleRowMouseOver(slotProps.data.username)" @mouseout="handleRowMouseOut(slotProps.data.username)"
class="row-container flex-w-full-hoverable flex w-full h-6"></div>
</template>
</Column>
</DataTable>
</div>
</div>
{{ slotProps.data.username }}
</div>
<span
id="just_create_badge"
class="flex ml-4"
v-if="
isOneAccountJustCreate &&
slotProps.data.username === justCreateUsername
"
>
<img src="@/assets/icon-new.svg" alt="New" />
</span>
</div>
</template>
</Column>
<Column
field="name"
:header="i18next.t('AcctMgmt.FullName')"
bodyClass="text-neutral-500"
sortable
>
<template #body="slotProps">
<div
class="row-container flex-w-full-hoverable w-full"
@mouseenter="handleRowMouseOver(slotProps.data.username)"
@mouseout="handleRowMouseOut(slotProps.data.username)"
>
<div
class="fullname-cell whitespace-nowrap overflow-hidden text-ellipsis"
>
{{ slotProps.data.name }}
</div>
</div>
</template>
</Column>
<Column
field="is_admin"
:header="i18next.t('AcctMgmt.AdminRights')"
bodyClass="text-neutral-500 flex justify-center"
headerClass="header-center"
>
<template #body="slotProps">
<div
v-if="!slotProps.data.isCurrentLoggedIn"
class="row-container flex-w-full-hoverable flex w-full justify-center"
@mouseenter="handleRowMouseOver(slotProps.data.username)"
@mouseout="handleRowMouseOut(slotProps.data.username)"
>
<img
v-if="slotProps.data.is_admin"
src="@/assets/radioOn.svg"
alt="Radio On"
class="btn-admin cursor-pointer flex justify-center"
@click="onAdminInputClick(slotProps.data, false)"
/>
<img
v-else
src="@/assets/radioOff.svg"
alt="Radio Off"
class="btn-admin cursor-pointer flex justify-center"
@click="onAdminInputClick(slotProps.data, true)"
/>
</div>
<div
v-else
@mouseenter="handleRowMouseOver(slotProps.data.username)"
@mouseout="handleRowMouseOut(slotProps.data.username)"
class="row-container flex-w-full-hoverable flex w-full h-6"
></div>
</template>
</Column>
<Column
field="is_active"
:header="i18next.t('AcctMgmt.AccountActivation')"
bodyClass="text-neutral-500"
headerClass="header-center"
>
<template #body="slotProps">
<div
v-if="!slotProps.data.isCurrentLoggedIn"
class="row-container flex-w-full-hoverable w-full"
@mouseenter="handleRowMouseOver(slotProps.data.username)"
@mouseout="handleRowMouseOut(slotProps.data.username)"
>
<div class="w-full flex justify-center">
<img
v-if="slotProps.data.is_active"
src="@/assets/radioOn.svg"
alt="Radio On"
class="btn-activate cursor-pointer flex"
@click="setIsActiveInput(slotProps.data, false)"
/>
<img
v-else
src="@/assets/radioOff.svg"
alt="Radio Off"
class="btn-activate cursor-pointer flex"
@click="setIsActiveInput(slotProps.data, true)"
/>
</div>
</div>
<div
v-else
@mouseenter="handleRowMouseOver(slotProps.data.username)"
@mouseout="handleRowMouseOut(slotProps.data.username)"
class="row-container flex-w-full-hoverable flex w-full h-6"
></div>
</template>
</Column>
<Column
:header="i18next.t('AcctMgmt.Detail')"
bodyClass="text-neutral-500"
headerClass="header-center"
>
<template #body="slotProps">
<div
class="row-container flex-w-full-hoverable w-full flex justify-center"
@mouseenter="handleRowMouseOver(slotProps.data.username)"
@mouseout="handleRowMouseOut(slotProps.data.username)"
>
<img
:src="
slotProps.data.isDetailHovered
? iconDetailOn
: iconDetailOff
"
alt="Detail"
class="btn-detail cursor-pointer"
@click="onDetailBtnClick(slotProps.data.username)"
@mouseover="handleDetailMouseOver(slotProps.data.username)"
@mouseout="handleDetailMouseOut(slotProps.data.username)"
/>
</div>
</template>
</Column>
<Column
:header="i18next.t('AcctMgmt.Edit')"
bodyClass="text-neutral-500"
headerClass="header-center"
>
<template #body="slotProps">
<div
class="row-container flex-w-full-hoverable w-full flex justify-center"
@mouseenter="handleRowMouseOver(slotProps.data.username)"
>
<img
:src="slotProps.data.isEditHovered ? iconEditOn : iconEditOff"
alt="Edit"
class="btn-edit cursor-pointer"
@click="onEditButtonClick(slotProps.data.username)"
@mouseover="handleEditMouseOver(slotProps.data.username)"
@mouseout="handleEditMouseOut(slotProps.data.username)"
/>
</div>
</template>
</Column>
<Column
:header="i18next.t('AcctMgmt.Delete')"
bodyClass="text-neutral-500 flex justify-center"
headerClass="header-center"
>
<template #body="slotProps">
<div
v-if="!slotProps.data.isCurrentLoggedIn"
class="row-container flex-w-full-hoverable w-full flex justify-center"
@mouseenter="handleRowMouseOver(slotProps.data.username)"
>
<img
:src="
slotProps.data.isDeleteHovered
? iconDeleteRed
: iconDeleteGray
"
:alt="
slotProps.data.isDeleteHovered ? 'hovered' : 'not-hovered'
"
class="delete-account cursor-pointer flex"
@mouseover="handleDeleteMouseOver(slotProps.data.username)"
@mouseout="handleDeleteMouseOut(slotProps.data.username)"
@click="onDeleteBtnClick(slotProps.data.username)"
/>
</div>
<div
v-else
@mouseenter="handleRowMouseOver(slotProps.data.username)"
@mouseout="handleRowMouseOut(slotProps.data.username)"
class="row-container flex-w-full-hoverable flex w-full h-6"
></div>
</template>
</Column>
</DataTable>
</div>
</div>
</div>
</template>
<script setup>
@@ -123,27 +247,27 @@
* delete actions, admin toggle, and infinite scroll.
*/
import { ref, computed, onMounted, watch } from 'vue';
import { useLoadingStore } from '@/stores/loading';
import { useModalStore } from '@/stores/modal';
import { useAcctMgmtStore } from '@/stores/acctMgmt';
import { useLoginStore } from '@/stores/login';
import SearchBar from '../../../components/AccountMenu/SearchBar.vue';
import i18next from '@/i18n/i18n.js';
import { useToast } from 'vue-toast-notification';
import { ref, computed, onMounted, watch } from "vue";
import { useLoadingStore } from "@/stores/loading";
import { useModalStore } from "@/stores/modal";
import { useAcctMgmtStore } from "@/stores/acctMgmt";
import { useLoginStore } from "@/stores/login";
import SearchBar from "../../../components/AccountMenu/SearchBar.vue";
import i18next from "@/i18n/i18n.js";
import { useToast } from "vue-toast-notification";
import {
MODAL_CREATE_NEW,
MODAL_ACCT_EDIT,
MODAL_ACCT_INFO,
MODAL_DELETE,
ONCE_RENDER_NUM_OF_DATA,
} from "@/constants/constants.js";
import iconDeleteGray from '@/assets/icon-delete-gray.svg';
import iconDeleteRed from '@/assets/icon-delete-red.svg';
import iconEditOff from '@/assets/icon-edit-off.svg';
import iconEditOn from '@/assets/icon-edit-on.svg';
import iconDetailOn from '@/assets/icon-detail-on.svg';
import iconDetailOff from '@/assets/icon-detail-card.svg';
MODAL_CREATE_NEW,
MODAL_ACCT_EDIT,
MODAL_ACCT_INFO,
MODAL_DELETE,
ONCE_RENDER_NUM_OF_DATA,
} from "@/constants/constants.js";
import iconDeleteGray from "@/assets/icon-delete-gray.svg";
import iconDeleteRed from "@/assets/icon-delete-red.svg";
import iconEditOff from "@/assets/icon-edit-off.svg";
import iconEditOn from "@/assets/icon-edit-on.svg";
import iconDetailOn from "@/assets/icon-detail-on.svg";
import iconDetailOff from "@/assets/icon-detail-card.svg";
const toast = useToast();
const acctMgmtStore = useAcctMgmtStore();
@@ -155,176 +279,187 @@ const infiniteStart = ref(0);
const shouldUpdateList = computed(() => acctMgmtStore.shouldUpdateList);
const allAccountResponsive = computed(() => acctMgmtStore.allUserAccountList);
const infiniteAcctData = computed(() => allAccountResponsive.value.slice(0, infiniteStart.value + ONCE_RENDER_NUM_OF_DATA));
const infiniteAcctData = computed(() =>
allAccountResponsive.value.slice(
0,
infiniteStart.value + ONCE_RENDER_NUM_OF_DATA,
),
);
const loginUserData = ref(null);
const isOneAccountJustCreate = computed(() => acctMgmtStore.isOneAccountJustCreate);
const isOneAccountJustCreate = computed(
() => acctMgmtStore.isOneAccountJustCreate,
);
const justCreateUsername = computed(() => acctMgmtStore.justCreateUsername);
const inputQuery = ref('');
const inputQuery = ref("");
const fetchLoginUserData = async () => {
await loginStore.getUserData();
loginUserData.value = loginStore.userData;
await loginStore.getUserData();
loginUserData.value = loginStore.userData;
};
const moveJustCreateUserToFirstRow = () => {
if(infiniteAcctData.value && infiniteAcctData.value.length){
const index = acctMgmtStore.allUserAccountList.findIndex(user => user.username === acctMgmtStore.justCreateUsername);
if (index !== -1) {
const [justCreateUser] = acctMgmtStore.allUserAccountList[index];
infiniteAcctData.value.unshift(justCreateUser);
}
if (infiniteAcctData.value && infiniteAcctData.value.length) {
const index = acctMgmtStore.allUserAccountList.findIndex(
(user) => user.username === acctMgmtStore.justCreateUsername,
);
if (index !== -1) {
const [justCreateUser] = acctMgmtStore.allUserAccountList[index];
infiniteAcctData.value.unshift(justCreateUser);
}
}
};
const accountSearchResults = computed(() => {
if(!inputQuery.value) {
return infiniteAcctData.value;
}
return acctMgmtStore.allUserAccountList.filter (user => user.username.includes(inputQuery.value));
if (!inputQuery.value) {
return infiniteAcctData.value;
}
return acctMgmtStore.allUserAccountList.filter((user) =>
user.username.includes(inputQuery.value),
);
});
const onCreateNewClick = () => {
acctMgmtStore.clearCurrentViewingUser();
modalStore.openModal(MODAL_CREATE_NEW);
acctMgmtStore.clearCurrentViewingUser();
modalStore.openModal(MODAL_CREATE_NEW);
};
const onAcctDoubleClick = (username) => {
acctMgmtStore.setCurrentViewingUser(username);
modalStore.openModal(MODAL_ACCT_INFO);
}
acctMgmtStore.setCurrentViewingUser(username);
modalStore.openModal(MODAL_ACCT_INFO);
};
const handleDeleteMouseOver = (username) => {
acctMgmtStore.changeIsDeleteHoveredByUser(username, true);
acctMgmtStore.changeIsDeleteHoveredByUser(username, true);
};
const handleDeleteMouseOut = (username) => {
acctMgmtStore.changeIsDeleteHoveredByUser(username, false);
acctMgmtStore.changeIsRowHoveredByUser(username, false);
acctMgmtStore.changeIsDeleteHoveredByUser(username, false);
acctMgmtStore.changeIsRowHoveredByUser(username, false);
};
const handleRowMouseOver = (username) => {
acctMgmtStore.changeIsRowHoveredByUser(username, true);
acctMgmtStore.changeIsRowHoveredByUser(username, true);
};
const handleRowMouseOut = (username) => {
acctMgmtStore.changeIsRowHoveredByUser(username, false);
acctMgmtStore.changeIsRowHoveredByUser(username, false);
};
const handleEditMouseOver = (username) => {
acctMgmtStore.changeIsEditHoveredByUser(username, true);
acctMgmtStore.changeIsEditHoveredByUser(username, true);
};
const handleEditMouseOut = (username) => {
acctMgmtStore.changeIsEditHoveredByUser(username, false);
acctMgmtStore.changeIsRowHoveredByUser(username, false);
acctMgmtStore.changeIsEditHoveredByUser(username, false);
acctMgmtStore.changeIsRowHoveredByUser(username, false);
};
const handleDetailMouseOver = (username) => {
acctMgmtStore.changeIsDetailHoveredByUser(username, true);
acctMgmtStore.changeIsDetailHoveredByUser(username, true);
};
const handleDetailMouseOut = (username) => {
acctMgmtStore.changeIsDetailHoveredByUser(username, false);
acctMgmtStore.changeIsRowHoveredByUser(username, false);
acctMgmtStore.changeIsDetailHoveredByUser(username, false);
acctMgmtStore.changeIsRowHoveredByUser(username, false);
};
const onEditButtonClick = userNameToEdit => {
acctMgmtStore.setCurrentViewingUser(userNameToEdit);
modalStore.openModal(MODAL_ACCT_EDIT);
}
const onEditButtonClick = (userNameToEdit) => {
acctMgmtStore.setCurrentViewingUser(userNameToEdit);
modalStore.openModal(MODAL_ACCT_EDIT);
};
const onDeleteBtnClick = (usernameToDelete) => {
acctMgmtStore.setCurrentViewingUser(usernameToDelete);
modalStore.openModal(MODAL_DELETE);
acctMgmtStore.setCurrentViewingUser(usernameToDelete);
modalStore.openModal(MODAL_DELETE);
};
const getRowClass = (curData) => {
return curData?.isRowHovered ? 'bg-[#F1F5F9]' : '';
return curData?.isRowHovered ? "bg-[#F1F5F9]" : "";
};
const onDetailBtnClick = (dataKey) => {
acctMgmtStore.setCurrentViewingUser(dataKey);
modalStore.openModal(MODAL_ACCT_INFO);
acctMgmtStore.setCurrentViewingUser(dataKey);
modalStore.openModal(MODAL_ACCT_INFO);
};
watch(shouldUpdateList, async(newShouldUpdateList) => {
if (newShouldUpdateList) {
await acctMgmtStore.getAllUserAccounts();
moveJustCreateUserToFirstRow();
}
acctMgmtStore.setShouldUpdateList(false);
watch(shouldUpdateList, async (newShouldUpdateList) => {
if (newShouldUpdateList) {
await acctMgmtStore.getAllUserAccounts();
moveJustCreateUserToFirstRow();
}
acctMgmtStore.setShouldUpdateList(false);
});
const onSearchAccountButtonClick = (inputQueryString) => {
inputQuery.value = inputQueryString;
inputQuery.value = inputQueryString;
};
const setIsActiveInput = async(userData, inputIsActiveToSet) => {
const userDataToReplace = {
username: userData.username,
name: userData.name,
is_active: inputIsActiveToSet,
};
await acctMgmtStore.editAccount(userData.username, userDataToReplace);
acctMgmtStore.updateSingleAccountPiniaState(userDataToReplace);
toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
}
const setIsActiveInput = async (userData, inputIsActiveToSet) => {
const userDataToReplace = {
username: userData.username,
name: userData.name,
is_active: inputIsActiveToSet,
};
await acctMgmtStore.editAccount(userData.username, userDataToReplace);
acctMgmtStore.updateSingleAccountPiniaState(userDataToReplace);
toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
};
const onAdminInputClick = async(userData, inputIsAdminOn) => {
const ADMIN_ROLE_NAME = 'admin';
switch(inputIsAdminOn) {
case true:
await acctMgmtStore.addRoleToUser(userData.username, ADMIN_ROLE_NAME);
break;
case false:
await acctMgmtStore.deleteRoleToUser(userData.username, ADMIN_ROLE_NAME);
break;
default:
break;
}
const userDataToReplace = {
username: userData.username,
name: userData.name,
is_admin: inputIsAdminOn,
};
const onAdminInputClick = async (userData, inputIsAdminOn) => {
const ADMIN_ROLE_NAME = "admin";
switch (inputIsAdminOn) {
case true:
await acctMgmtStore.addRoleToUser(userData.username, ADMIN_ROLE_NAME);
break;
case false:
await acctMgmtStore.deleteRoleToUser(userData.username, ADMIN_ROLE_NAME);
break;
default:
break;
}
const userDataToReplace = {
username: userData.username,
name: userData.name,
is_admin: inputIsAdminOn,
};
acctMgmtStore.updateSingleAccountPiniaState(userDataToReplace);
toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
}
acctMgmtStore.updateSingleAccountPiniaState(userDataToReplace);
toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
};
/**
* Loads more account data when the user scrolls near the bottom.
* @param {Event} event - The scroll event from the data grid.
*/
const handleScroll = (event) => {
const container = event.target;
const smallValue = 3;
const container = event.target;
const smallValue = 3;
const isOverScrollHeight = container.scrollTop + container.clientHeight >= container.scrollHeight - smallValue;
if(isOverScrollHeight){
fetchMoreDataVue3();
}
const isOverScrollHeight =
container.scrollTop + container.clientHeight >=
container.scrollHeight - smallValue;
if (isOverScrollHeight) {
fetchMoreDataVue3();
}
};
const fetchMoreDataVue3 = () => {
if(infiniteAcctData.value.length < acctMgmtStore.allUserAccountList.length) {
infiniteStart.value += ONCE_RENDER_NUM_OF_DATA;
}
if (infiniteAcctData.value.length < acctMgmtStore.allUserAccountList.length) {
infiniteStart.value += ONCE_RENDER_NUM_OF_DATA;
}
};
onMounted(async () => {
loadingStore.setIsLoading(false);
await fetchLoginUserData();
await acctMgmtStore.getAllUserAccounts();
loadingStore.setIsLoading(false);
await fetchLoginUserData();
await acctMgmtStore.getAllUserAccounts();
});
</script>
<style>
/* Center column text so that radio buttons are also centered */
.header-center .p-column-header-content{
justify-content: center;
.header-center .p-column-header-content {
justify-content: center;
}
</style>

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

@@ -1,184 +1,305 @@
<template>
<div id="modal_account_edit_or_create_new" class="w-[640px] bg-[#FFFFFF] rounded
shadow-lg flex flex-col">
<ModalHeader :headerText="modalTitle"/>
<div
id="modal_account_edit_or_create_new"
class="w-[640px] bg-[#FFFFFF] rounded shadow-lg flex flex-col"
>
<ModalHeader :headerText="modalTitle" />
<main class="flex row min-h-[96px] my-[32px] flex-col px-6">
<div class="input-row w-full flex py-2 h-[40px] 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.Account") }}
</span>
</div>
<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,
}"
:readonly="!isEditable" autocomplete="off"
@dblclick="onInputDoubleClick"
/>
<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>
<main class="flex row min-h-[96px] my-[32px] flex-col px-6">
<div
class="input-row w-full flex py-2 h-[40px] 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.Account") }}
</span>
</div>
<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,
}"
:readonly="!isEditable"
autocomplete="off"
@dblclick="onInputDoubleClick"
/>
<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 class="input-row w-full flex py-2 h-[40px] 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.FullName") }}
</span>
</div>
<input id="input_name_field"
class="w-[454px] rounded p-1 border border-[1px] border-[#64748B] flex items-center h-[40px] outline-none"
v-model="inputName" :readonly="!isEditable" @dblclick="onInputDoubleClick" @focus="onInputNameFocus"
autocomplete="off"
/>
</div>
<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 flex-col items-start font-medium justify-end"
:class="{
'h-[100px]': whichCurrentModal !== MODAL_CREATE_NEW,
}"
> <!-- Layout of Password field changes depending on whether this is the create or edit modal -->
<span class="align-right-span flex h-full w-[122px] justify-end"
:class="{
'pt-[12px]': whichCurrentModal !== MODAL_CREATE_NEW,
'text-top': whichCurrentModal !== MODAL_CREATE_NEW,
'h-[40px]': whichCurrentModal === MODAL_CREATE_NEW,
'items-center': whichCurrentModal === MODAL_CREATE_NEW,
}">
{{ i18next.t("AcctMgmt.Password") }}
</span>
<span v-if="whichCurrentModal === MODAL_CREATE_NEW" class="dummy-cell
flex w-[122px] h-[40px]">
</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="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 grid; the bottom-left cell is a dummy cell with no content -->
<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,
}">
{{ i18next.t("AcctMgmt.ConfirmPassword") }}
</span>
<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 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,
'text-[#FF3366]': !isPwdMatched,
}" autocomplete="off"/>
<img v-if="isPwdConfirmEyeOn" src='@/assets/icon-eye-open.svg' class="absolute right-[8px] cursor-pointer"
@click="togglePwdConfirmEyeBtn" alt="eye"/>
<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> <!-- Use dummy-grid to maintain the height -->
<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]">
{{ isPwdMatched ? "" : i18next.t("AcctMgmt.PwdNotMatch") }}
</span>
</div>
<div class="dummy-grid h-[24px]"></div> <!-- Use dummy-grid to maintain the height -->
<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>
<div v-if="whichCurrentModal === MODAL_CREATE_NEW" class="checkbox-row w-full grid-cols-[122px_1fr] gap-x-4 flex py-2 h-[40px] my-4 items-center">
<div class="dummy field-label flex items-center w-[122px]">
</div> <!-- A dummy field is also used here to maintain spacing -->
<section id="account_create_checkboxes_section" class="flex flex-col">
<div class="checkbox-and-text flex">
<IconChecked :isChecked="isSetAsAdminChecked" @click="toggleIsAdmin"/>
<span class="flex checkbox-text">
{{ i18next.t("AcctMgmt.SetAsAdmin") }}
</span>
</div>
<div class="checkbox-and-text flex">
<IconChecked :isChecked="isSetActivedChecked" @click="toggleIsActivated"/>
<span class="flex checkbox-text">
{{ i18next.t("AcctMgmt.ActivateNow") }}
</span>
</div>
</section>
</div>
</main>
<footer class="flex row footer justify-end pr-[32px] pb-8">
<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"
</div>
</div>
</div>
<div
class="input-row w-full flex py-2 h-[40px] 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.FullName") }}
</span>
</div>
<input
id="input_name_field"
class="w-[454px] rounded p-1 border border-[1px] border-[#64748B] flex items-center h-[40px] outline-none"
v-model="inputName"
:readonly="!isEditable"
@dblclick="onInputDoubleClick"
@focus="onInputNameFocus"
autocomplete="off"
/>
</div>
<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 flex-col items-start font-medium justify-end"
:class="{
'h-[100px]': whichCurrentModal !== MODAL_CREATE_NEW,
}"
>
<!-- Layout of Password field changes depending on whether this is the create or edit modal -->
<span
class="align-right-span flex h-full w-[122px] justify-end"
:class="{
'pt-[12px]': whichCurrentModal !== MODAL_CREATE_NEW,
'text-top': whichCurrentModal !== MODAL_CREATE_NEW,
'h-[40px]': whichCurrentModal === MODAL_CREATE_NEW,
'items-center': whichCurrentModal === MODAL_CREATE_NEW,
}"
>
{{ i18next.t("AcctMgmt.Password") }}
</span>
<span
v-if="whichCurrentModal === MODAL_CREATE_NEW"
class="dummy-cell flex w-[122px] h-[40px]"
>
</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("Global.Cancel") }}
{{ i18next.t("AcctMgmt.Reset") }}
</button>
<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"
</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="{
'bg-[#0099FF]': !isConfirmDisabled,
'bg-[#E2E8F0]': isConfirmDisabled,
'color-[#FF3366]': !isPwdLengthValid,
'color-[#64748B]': isPwdLengthValid,
}"
>
{{ i18next.t("Global.Confirm") }}
</button>
</footer>
</div>
/>
<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="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 grid; the bottom-left cell is a dummy cell with no content -->
<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,
}"
>
{{ i18next.t("AcctMgmt.ConfirmPassword") }}
</span>
<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
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,
'text-[#FF3366]': !isPwdMatched,
}"
autocomplete="off"
/>
<img
v-if="isPwdConfirmEyeOn"
src="@/assets/icon-eye-open.svg"
class="absolute right-[8px] cursor-pointer"
@click="togglePwdConfirmEyeBtn"
alt="eye"
/>
<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>
<!-- Use dummy-grid to maintain the height -->
<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]">
{{ isPwdMatched ? "" : i18next.t("AcctMgmt.PwdNotMatch") }}
</span>
</div>
<div class="dummy-grid h-[24px]"></div>
<!-- Use dummy-grid to maintain the height -->
<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>
<div
v-if="whichCurrentModal === MODAL_CREATE_NEW"
class="checkbox-row w-full grid-cols-[122px_1fr] gap-x-4 flex py-2 h-[40px] my-4 items-center"
>
<div class="dummy field-label flex items-center w-[122px]"></div>
<!-- A dummy field is also used here to maintain spacing -->
<section id="account_create_checkboxes_section" class="flex flex-col">
<div class="checkbox-and-text flex">
<IconChecked
:isChecked="isSetAsAdminChecked"
@click="toggleIsAdmin"
/>
<span class="flex checkbox-text">
{{ i18next.t("AcctMgmt.SetAsAdmin") }}
</span>
</div>
<div class="checkbox-and-text flex">
<IconChecked
:isChecked="isSetActivedChecked"
@click="toggleIsActivated"
/>
<span class="flex checkbox-text">
{{ i18next.t("AcctMgmt.ActivateNow") }}
</span>
</div>
</section>
</div>
</main>
<footer class="flex row footer justify-end pr-[32px] pb-8">
<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-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="{
'bg-[#0099FF]': !isConfirmDisabled,
'bg-[#E2E8F0]': isConfirmDisabled,
}"
>
{{ i18next.t("Global.Confirm") }}
</button>
</footer>
</div>
</template>
<script setup>
@@ -192,15 +313,19 @@
* username, name, password fields and validation.
*/
import { computed, ref, watch } from 'vue';
import { computed, ref, watch } from "vue";
import i18next from "@/i18n/i18n.js";
import { useModalStore } from '@/stores/modal';
import { useRouter } from 'vue-router';
import { useToast } from 'vue-toast-notification';
import { useAcctMgmtStore } from '@/stores/acctMgmt';
import { useModalStore } from "@/stores/modal";
import { useRouter } from "vue-router";
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, PWD_VALID_LENGTH } from '@/constants/constants.js';
import {
MODAL_CREATE_NEW,
MODAL_ACCT_EDIT,
PWD_VALID_LENGTH,
} from "@/constants/constants.js";
const acctMgmtStore = useAcctMgmtStore();
const modalStore = useModalStore();
@@ -223,157 +348,170 @@ const isSSO = computed(() => acctMgmtStore.currentViewingUser.is_sso);
const username = computed(() => acctMgmtStore.currentViewingUser.username);
const name = computed(() => acctMgmtStore.currentViewingUser.name);
const inputUserAccount = ref(whichCurrentModal.value === MODAL_CREATE_NEW ? '' : currentViewingUser.value.username);
const inputName = ref(whichCurrentModal.value === MODAL_CREATE_NEW ? '' : currentViewingUser.value.name);
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 isAccountUnique = ref(true);
const isEditable = ref(true);
// Since adding this watch, filling in the password field no longer clears the account or full name fields.
watch(whichCurrentModal, (newVal) => {
if (newVal === MODAL_CREATE_NEW) {
inputUserAccount.value = '';
inputName.value = '';
} else {
inputUserAccount.value = currentViewingUser.value.username;
inputName.value = currentViewingUser.value.name;
}
if (newVal === MODAL_CREATE_NEW) {
inputUserAccount.value = "";
inputName.value = "";
} else {
inputUserAccount.value = currentViewingUser.value.username;
inputName.value = currentViewingUser.value.name;
}
});
const modalTitle = computed(() => {
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");
});
const togglePwdEyeBtn = (toBeOpen) => {
isPwdEyeOn.value = toBeOpen;
isPwdEyeOn.value = toBeOpen;
};
const validatePwdLength = () => {
isPwdLengthValid.value = !isResetPwdSectionShow.value || inputPwd.value.length >= PWD_VALID_LENGTH;
}
isPwdLengthValid.value =
!isResetPwdSectionShow.value || inputPwd.value.length >= PWD_VALID_LENGTH;
};
const onInputDoubleClick = () => {
// Enable edit mode
isEditable.value = true;
}
// Enable edit mode
isEditable.value = true;
};
const onConfirmBtnClick = async () => {
// rule for minimum length
validatePwdLength();
if(!isPwdLengthValid.value) {
// rule for minimum length
validatePwdLength();
if (!isPwdLengthValid.value) {
return;
}
// rule for account uniqueness
switch (whichCurrentModal.value) {
case MODAL_CREATE_NEW:
await checkAccountIsUnique();
if (!isAccountUnique.value) {
return;
}
}
await acctMgmtStore.createNewAccount({
username: inputUserAccount.value,
password: inputPwd.value === undefined ? "" : inputPwd.value,
name: inputName.value,
is_admin: isSetAsAdminChecked.value,
is_active: isSetActivedChecked.value,
});
await toast.success(i18next.t("AcctMgmt.MsgAccountAdded"));
await modalStore.closeModal();
acctMgmtStore.setShouldUpdateList(true);
await router.push("/account-admin");
break;
case MODAL_ACCT_EDIT:
await checkAccountIsUnique();
if (!isAccountUnique.value) {
return;
}
// Note that the old username and new username can be different
// Distinguish between cases with and without a password
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;
default:
break;
}
};
// rule for account uniqueness
switch(whichCurrentModal.value) {
case MODAL_CREATE_NEW:
await checkAccountIsUnique();
if(!isAccountUnique.value) {
return;
}
await acctMgmtStore.createNewAccount({
username: inputUserAccount.value,
password: inputPwd.value === undefined ? '' : inputPwd.value,
name: inputName.value,
is_admin: isSetAsAdminChecked.value,
is_active: isSetActivedChecked.value,
});
await toast.success(i18next.t("AcctMgmt.MsgAccountAdded"));
await modalStore.closeModal();
acctMgmtStore.setShouldUpdateList(true);
await router.push('/account-admin');
break;
case MODAL_ACCT_EDIT:
await checkAccountIsUnique();
if(!isAccountUnique.value) {
return;
}
// Note that the old username and new username can be different
// Distinguish between cases with and without a password
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;
default:
break;
}
}
const checkAccountIsUnique = async() => {
// If the user has not modified the field, no backend API call is needed
if(inputUserAccount.value === username.value) {
return true;
}
const isAccountAlreadyExistAPISuccess = await acctMgmtStore.getUserDetail(inputUserAccount.value);
isAccountUnique.value = !isAccountAlreadyExistAPISuccess;
return isAccountUnique.value;
const checkAccountIsUnique = async () => {
// If the user has not modified the field, no backend API call is needed
if (inputUserAccount.value === username.value) {
return true;
}
const isAccountAlreadyExistAPISuccess = await acctMgmtStore.getUserDetail(
inputUserAccount.value,
);
isAccountUnique.value = !isAccountAlreadyExistAPISuccess;
return isAccountUnique.value;
};
const toggleIsAdmin = () => {
if(isEditable){
isSetAsAdminChecked.value = !isSetAsAdminChecked.value;
}
}
if (isEditable.value) {
isSetAsAdminChecked.value = !isSetAsAdminChecked.value;
}
};
const toggleIsActivated = () => {
if(isEditable){
isSetActivedChecked.value = !isSetActivedChecked.value;
}
}
if (isEditable.value) {
isSetActivedChecked.value = !isSetActivedChecked.value;
}
};
const onInputNameFocus = () => {
if(isConfirmDisabled.value){
isConfirmDisabled.value = false;
}
}
if (isConfirmDisabled.value) {
isConfirmDisabled.value = false;
}
};
const onResetPwdButtonClick = () => {
isResetPwdSectionShow.value = !isResetPwdSectionShow.value;
// Must clear the password input field
inputPwd.value = '';
}
isResetPwdSectionShow.value = !isResetPwdSectionShow.value;
// Must clear the password input field
inputPwd.value = "";
};
watch(
[inputPwd, inputUserAccount, inputName],
([newPwd, newAccount, newName]) => {
// Enable the confirm button when all fields are non-empty
if(newAccount.length > 0 && newName.length > 0) {
isConfirmDisabled.value = false;
}
if(whichCurrentModal.value !== MODAL_CREATE_NEW) {
if(isResetPwdSectionShow.value && newPwd.length < PWD_VALID_LENGTH) {
isConfirmDisabled.value = true;
}
}else {
if(newPwd.length < PWD_VALID_LENGTH) {
isConfirmDisabled.value = true;
}
}
[inputPwd, inputUserAccount, inputName],
([newPwd, newAccount, newName]) => {
// Enable the confirm button when all fields are non-empty
if (newAccount.length > 0 && newName.length > 0) {
isConfirmDisabled.value = false;
}
if (whichCurrentModal.value !== MODAL_CREATE_NEW) {
if (isResetPwdSectionShow.value && newPwd.length < PWD_VALID_LENGTH) {
isConfirmDisabled.value = true;
}
} else {
if (newPwd.length < PWD_VALID_LENGTH) {
isConfirmDisabled.value = true;
}
}
},
);
function onCancelBtnClick(){
modalStore.closeModal();
function onCancelBtnClick() {
modalStore.closeModal();
}
</script>
<style>
#modal_account_edit {
background-color: #ffffff;
backdrop-filter: opacity(1); /* Prevent child elements from inheriting parent's opacity */
background-color: #ffffff;
backdrop-filter: opacity(
1
); /* Prevent child elements from inheriting parent's opacity */
}
</style>

78
src/views/AccountManagement/ModalAccountInfo.vue
View File

@@ -1,25 +1,38 @@
<template>
<div id="modal_account_edit" class="w-[600px] h-[536px] bg-[#FFFFFF] rounded
shadow-lg flex flex-col">
<ModalHeader :headerText='i18next.t("AcctMgmt.AccountInformation")'/>
<main class="flex main-part flex-col px-6 mt-6">
<h1 id="acct_info_user_name" class="text-[32px] leading-[64px] font-medium mb-2">{{ name }}</h1>
<div class="status-container">
<Badge displayText="Admin" :isActivated="is_admin"/>
<Badge displayText="Suspended" :isActivated="!is_active"/>
</div>
<div id="account_visit_info" class="border-b border-b-[#CBD5E1] border-b-[1px] pb-4">
Account: <span class="text-[#0099FF]">{{ username }}</span>, total visits <span class="text-[#0099FF]">
{{ visitTime }}
</span> times.
</div>
</main>
<main class="flex main-part flex-col px-6 py-4">
<ul class="leading-[21px] list-disc list-inside">
<li>[2023-01-01 08:30:25] Account created by</li>
</ul>
</main>
</div>
<div
id="modal_account_edit"
class="w-[600px] h-[536px] bg-[#FFFFFF] rounded shadow-lg flex flex-col"
>
<ModalHeader :headerText="i18next.t('AcctMgmt.AccountInformation')" />
<main class="flex main-part flex-col px-6 mt-6">
<h1
id="acct_info_user_name"
class="text-[32px] leading-[64px] font-medium mb-2"
>
{{ name }}
</h1>
<div class="status-container">
<Badge displayText="Admin" :isActivated="is_admin" />
<Badge displayText="Suspended" :isActivated="!is_active" />
</div>
<div
id="account_visit_info"
class="border-b border-b-[#CBD5E1] border-b-[1px] pb-4"
>
Account: <span class="text-[#0099FF]">{{ username }}</span
>, total visits
<span class="text-[#0099FF]">
{{ visitTime }}
</span>
times.
</div>
</main>
<main class="flex main-part flex-col px-6 py-4">
<ul class="leading-[21px] list-disc list-inside">
<li>[2023-01-01 08:30:25] Account created by</li>
</ul>
</main>
</div>
</template>
<script setup>
@@ -34,24 +47,19 @@
* status badges, and visit count.
*/
import { onBeforeMount, computed, ref } from 'vue';
import i18next from '@/i18n/i18n.js';
import { useAcctMgmtStore } from '@/stores/acctMgmt';
import ModalHeader from './ModalHeader.vue';
import Badge from '../../components/Badge.vue';
import { onBeforeMount, computed, ref } from "vue";
import i18next from "@/i18n/i18n.js";
import { useAcctMgmtStore } from "@/stores/acctMgmt";
import ModalHeader from "./ModalHeader.vue";
import Badge from "../../components/Badge.vue";
const acctMgmtStore = useAcctMgmtStore();
const visitTime = ref(0);
const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
const {
username,
name,
is_admin,
is_active,
} = currentViewingUser.value;
const { username, name, is_admin, is_active } = currentViewingUser.value;
onBeforeMount(async() => {
await acctMgmtStore.getUserDetail(currentViewingUser.value.username);
visitTime.value = currentViewingUser.value.detail.visits;
onBeforeMount(async () => {
await acctMgmtStore.getUserDetail(currentViewingUser.value.username);
visitTime.value = currentViewingUser.value.detail.visits;
});
</script>

66
src/views/AccountManagement/ModalContainer.vue
View File

@@ -1,45 +1,49 @@
<template>
<div id="modal_container" v-if="modalStore.isModalOpen" class="fixed w-screen h-screen bg-gray-800
flex justify-center items-center">
<div class="flex">
<ModalAccountEditCreate v-if="whichModal === MODAL_ACCT_EDIT || whichModal === MODAL_CREATE_NEW "/>
<ModalAccountInfo v-if="whichModal === MODAL_ACCT_INFO"/>
<ModalDeleteAlert v-if="whichModal === MODAL_DELETE" />
</div>
<div
id="modal_container"
v-if="modalStore.isModalOpen"
class="fixed w-screen h-screen bg-gray-800 flex justify-center items-center"
>
<div class="flex">
<ModalAccountEditCreate
v-if="whichModal === MODAL_ACCT_EDIT || whichModal === MODAL_CREATE_NEW"
/>
<ModalAccountInfo v-if="whichModal === MODAL_ACCT_INFO" />
<ModalDeleteAlert v-if="whichModal === MODAL_DELETE" />
</div>
</template>
</div>
</template>
<script setup>
<script setup>
// The Lucia project.
// Copyright 2024-2026 DSP, inc. All rights reserved.
// Authors:
// cindy.chang@dsp.im (Cindy Chang), 2024/5/30
// imacat.yang@dsp.im (imacat), 2023/9/23
/**
* @module views/AccountManagement/ModalContainer Container
* that renders the appropriate account management modal
* based on the current modal type.
*/
/**
* @module views/AccountManagement/ModalContainer Container
* that renders the appropriate account management modal
* based on the current modal type.
*/
import { computed } from 'vue';
import { useModalStore } from '@/stores/modal';
import ModalAccountEditCreate from './ModalAccountEditCreate.vue';
import ModalAccountInfo from './ModalAccountInfo.vue';
import ModalDeleteAlert from './ModalDeleteAlert.vue';
import {
MODAL_CREATE_NEW,
MODAL_ACCT_EDIT,
MODAL_ACCT_INFO,
MODAL_DELETE,
} from "@/constants/constants.js";
import { computed } from "vue";
import { useModalStore } from "@/stores/modal";
import ModalAccountEditCreate from "./ModalAccountEditCreate.vue";
import ModalAccountInfo from "./ModalAccountInfo.vue";
import ModalDeleteAlert from "./ModalDeleteAlert.vue";
import {
MODAL_CREATE_NEW,
MODAL_ACCT_EDIT,
MODAL_ACCT_INFO,
MODAL_DELETE,
} from "@/constants/constants.js";
const modalStore = useModalStore();
const whichModal = computed(() => modalStore.whichModal);
</script>
const modalStore = useModalStore();
const whichModal = computed(() => modalStore.whichModal);
</script>
<style>
#modal_container {
z-index: 9999;
background-color: rgba(254,254,254, 0.8);
z-index: 9999;
background-color: rgba(254, 254, 254, 0.8);
}
</style>

99
src/views/AccountManagement/ModalDeleteAlert.vue
View File

@@ -1,30 +1,49 @@
<template>
<div id="modal_delete_acct_alert" class="flex shadow-lg rounded-lg w-[564px] flex-col bg-[#ffffff]">
<div class="flex decoration-bar bg-[#FF3366] h-2 rounded-t"></div>
<main id="delete_acct_modal_main" class="flex flex-col items-center justify-center">
<img src="@/assets/icon-large-exclamation.svg" alt="!" class="flex mt-[36px]">
<h1 class="flex mt-4 text-xl font-medium">{{ i18next.t("AcctMgmt.DelteQuestion").toUpperCase() }}</h1>
<div class="clauses flex flex-col mt-4 mb-8 px-8">
<h2 class="flex leading-[21px]">{{ i18next.t("The") }}&nbsp;<span class="text-[#FF3366]">
{{ i18next.t("AcctMgmt.DeleteFirstClause").toUpperCase() }}
</span>
</h2>
<h2 class="flex leading-[21px]">{{ i18next.t("AcctMgmt.DeleteSecondClause") }}</h2>
</div>
</main>
<footer class="flex justify-center py-3 border-t-2 border-t-gray-50 gap-4">
<button id="calcel_delete_acct_btn" class="flex justify-center items-center rounded-full cursor-pointer w-[100px] h-[40px]
bg-[#FF3366] text-[#ffffff]" @click="onNoBtnClick">
{{ i18next.t("No") }}
</button>
<button id="sure_to_delete_acct_btn" class="flex justify-center items-center rounded-full cursor-pointer w-[100px] h-[40px]
border-2 border-[#FF3366] text-[#FF3366]"
@click="onDeleteConfirmBtnClick"
>
{{ i18next.t("Yes") }}
</button>
</footer>
</div>
<div
id="modal_delete_acct_alert"
class="flex shadow-lg rounded-lg w-[564px] flex-col bg-[#ffffff]"
>
<div class="flex decoration-bar bg-[#FF3366] h-2 rounded-t"></div>
<main
id="delete_acct_modal_main"
class="flex flex-col items-center justify-center"
>
<img
src="@/assets/icon-large-exclamation.svg"
alt="!"
class="flex mt-[36px]"
/>
<h1 class="flex mt-4 text-xl font-medium">
{{ i18next.t("AcctMgmt.DelteQuestion").toUpperCase() }}
</h1>
<div class="clauses flex flex-col mt-4 mb-8 px-8">
<h2 class="flex leading-[21px]">
{{ i18next.t("The") }}&nbsp;<span class="text-[#FF3366]">
{{ i18next.t("AcctMgmt.DeleteFirstClause").toUpperCase() }}
</span>
</h2>
<h2 class="flex leading-[21px]">
{{ i18next.t("AcctMgmt.DeleteSecondClause") }}
</h2>
</div>
</main>
<footer class="flex justify-center py-3 border-t-2 border-t-gray-50 gap-4">
<button
id="calcel_delete_acct_btn"
class="flex justify-center items-center rounded-full cursor-pointer w-[100px] h-[40px] bg-[#FF3366] text-[#ffffff]"
@click="onNoBtnClick"
>
{{ i18next.t("No") }}
</button>
<button
id="sure_to_delete_acct_btn"
class="flex justify-center items-center rounded-full cursor-pointer w-[100px] h-[40px] border-2 border-[#FF3366] text-[#FF3366]"
@click="onDeleteConfirmBtnClick"
>
{{ i18next.t("Yes") }}
</button>
</footer>
</div>
</template>
<script setup>
@@ -38,11 +57,11 @@
* modal for account deletion with yes/no buttons.
*/
import { useModalStore } from '@/stores/modal';
import { useRouter } from 'vue-router';
import { useAcctMgmtStore } from '@/stores/acctMgmt';
import i18next from '@/i18n/i18n.js';
import { useToast } from 'vue-toast-notification';
import { useModalStore } from "@/stores/modal";
import { useRouter } from "vue-router";
import { useAcctMgmtStore } from "@/stores/acctMgmt";
import i18next from "@/i18n/i18n.js";
import { useToast } from "vue-toast-notification";
const acctMgmtStore = useAcctMgmtStore();
const modalStore = useModalStore();
@@ -50,17 +69,19 @@ const toast = useToast();
const router = useRouter();
/** Confirms account deletion, shows success toast, and navigates to account admin page. */
const onDeleteConfirmBtnClick = async() => {
if(await acctMgmtStore.deleteAccount(acctMgmtStore.currentViewingUser.username)){
toast.success(i18next.t("AcctMgmt.MsgAccountDeleteSuccess"));
modalStore.closeModal();
acctMgmtStore.setShouldUpdateList(true);
await router.push("/account-admin");
}
const onDeleteConfirmBtnClick = async () => {
if (
await acctMgmtStore.deleteAccount(acctMgmtStore.currentViewingUser.username)
) {
toast.success(i18next.t("AcctMgmt.MsgAccountDeleteSuccess"));
modalStore.closeModal();
acctMgmtStore.setShouldUpdateList(true);
await router.push("/account-admin");
}
};
/** Cancels deletion and closes the modal. */
const onNoBtnClick = () => {
modalStore.closeModal();
modalStore.closeModal();
};
</script>

35
src/views/AccountManagement/ModalHeader.vue
View File

@@ -1,14 +1,19 @@
<template>
<header class="w-full flex h-[64px] justify-between pr-[22px] pl-[16px] items-center
border-b border-b-[1px] border-[#CBD5E1]
">
<h1 class="flex text-base font-bold"> {{ headerText }}</h1>
<div class="w-8 h-8 bg-transparent hover:bg-[#e9ecef] rounded-full relative flex justify-center items-center">
<img src="@/assets/icon-x.svg" alt="X" class="flex cursor-pointer absolute"
@click="closeModal"
/>
</div>
</header>
<header
class="w-full flex h-[64px] justify-between pr-[22px] pl-[16px] items-center border-b border-b-[1px] border-[#CBD5E1]"
>
<h1 class="flex text-base font-bold">{{ headerText }}</h1>
<div
class="w-8 h-8 bg-transparent hover:bg-[#e9ecef] rounded-full relative flex justify-center items-center"
>
<img
src="@/assets/icon-x.svg"
alt="X"
class="flex cursor-pointer absolute"
@click="closeModal"
/>
</div>
</header>
</template>
<script setup>
@@ -22,13 +27,13 @@
* header with title text and close button.
*/
import { useModalStore } from '@/stores/modal';
import { useModalStore } from "@/stores/modal";
defineProps({
headerText: {
type: String,
required: true,
}
headerText: {
type: String,
required: true,
},
});
const modalStore = useModalStore();

374
src/views/AccountManagement/MyAccount.vue
View File

@@ -1,117 +1,187 @@
<template>
<div class="general my-account flex flex-col items-center w-full h-full p-8">
<main class="flex main-part flex-col px-8 mt-6 w-[720px]">
<h1 id="general_acct_info_user_name" class="text-[32px] leading-[64px] font-medium mb-2">
{{ name }}
</h1>
<div class="general-status-container">
<Badge displayText="Admin" :isActivated="is_admin"/>
<Badge displayText="Suspended" :isActivated="!is_active"/>
<div class="general my-account flex flex-col items-center w-full h-full p-8">
<main class="flex main-part flex-col px-8 mt-6 w-[720px]">
<h1
id="general_acct_info_user_name"
class="text-[32px] leading-[64px] font-medium mb-2"
>
{{ name }}
</h1>
<div class="general-status-container">
<Badge displayText="Admin" :isActivated="is_admin" />
<Badge displayText="Suspended" :isActivated="!is_active" />
</div>
<div
id="general_account_visit_info"
class="w-full border-b border-b-[#CBD5E1] border-b-[1px] mt-3 pb-4 w-full"
>
Total visits
<span class="text-[#0099FF]">
{{ visitTime }}
</span>
times.
</div>
</main>
<main class="flex flex-col pt-6 px-8 w-[720px]">
<h1 class="text-[20px] font-medium mb-4">
{{ i18next.t("AcctMgmt.UserInfo") }}
</h1>
<div class="row w-full flex py-2 h-[40px] mb-4 items-center">
<div class="field-label text-sm flex items-center font-medium mr-4">
<span class="align-right-span flex w-[80px]">
{{ i18next.t("AcctMgmt.Account") }}
</span>
</div>
<div class="account flex flex-col">
<span class="flex text-[#0F172A] text-[16px]">{{ username }}</span>
<div v-show="false" 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 id="general_account_visit_info" class="w-full border-b border-b-[#CBD5E1] border-b-[1px] mt-3 pb-4
w-full">
Total visits <span class="text-[#0099FF]">
{{ visitTime }}
</span> times.
</div>
</div>
</div>
<div class="row w-full flex py-2 h-[40px] mb-4 items-center text-[14px]">
<div class="field-label text-sm flex font-medium mr-4 box-border">
<span class="flex w-[80px]">
{{ i18next.t("AcctMgmt.FullName") }}
</span>
</div>
<input
v-if="isNameEditable"
id="input_name_field"
class="w-[280px] h-[40px] rounded p-1 border border-[1px] border-[#64748B] flex items-center outline-none"
v-model="inputName"
autocomplete="off"
/>
<div v-else class="not-editable displayable name flex w-[280px]">
{{ name }}
</div>
<div
v-if="isNameEditable"
class="save-btn-container flex ml-[112px]"
@click="onSaveNameClick"
>
<ButtonFilled :buttonText="i18next.t('Global.Save')" />
</div>
<div
v-if="isNameEditable"
class="cancel-btn btn-container flex ml-[8px]"
@click="onCancelNameClick"
>
<Button :buttonText="i18next.t('Global.Cancel')" />
</div>
<div
v-else="isPwdEditable"
class="edit-btn btn-container flex ml-[204px]"
@click="onEditNameClick"
>
<Button :buttonText="i18next.t('Global.Edit')" />
</div>
</div>
<div
class="row w-full flex py-2 mb-4 border-b border-b-[#CBD5E1] border-b-[1px]"
>
<div class="field-label flex flex-col text-sm font-medium mr-4">
<span class="flex h-[40px] w-[80px] items-center">
{{ i18next.t("AcctMgmt.Password") }}
</span>
<div class="flex dummy-cell"></div>
</div>
<div class="flex input-and-error-msg flex-col w-[280px]">
<div
v-if="isPwdEditable"
class="input-and-eye flex items-center h-[40px] relative border-[1px] rounded"
:class="{
'border-[#FF3366]': !isPwdLengthValid,
'border-[#64748B]': isPwdLengthValid,
}"
>
<input
class="outline-none p-1 w-[280px]"
:type="isPwdEyeOn ? 'text' : 'password'"
v-model="inputPwd"
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] text-[14px]"
>
{{
isPwdLengthValid ? "" : i18next.t("AcctMgmt.PwdLengthNotEnough")
}}
</span>
</div>
</div>
<div class="button-and-dummy-column flex flex-col text-[14px]">
<div class="button-group flex w-min-[80px] h-[40px]">
<div
v-if="isPwdEditable"
class="save-btn-container flex ml-[112px]"
@click="onSavePwdClick"
>
<ButtonFilled :buttonText="i18next.t('Global.Save')" />
</div>
</main>
<main class="flex flex-col pt-6 px-8 w-[720px]">
<h1 class="text-[20px] font-medium mb-4">
{{ i18next.t("AcctMgmt.UserInfo") }}
</h1>
<div class="row w-full flex py-2 h-[40px] mb-4 items-center">
<div class="field-label text-sm flex items-center font-medium mr-4">
<span class="align-right-span flex w-[80px]">
{{ i18next.t("AcctMgmt.Account") }}
</span>
</div>
<div class="account flex flex-col">
<span class="flex text-[#0F172A] text-[16px]">{{ username }}</span>
<div v-show="false" 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
v-if="isPwdEditable"
class="cancel-btn btn-container flex ml-[8px]"
@click="onCancelPwdClick"
>
<Button :buttonText="i18next.t('Global.Cancel')" />
</div>
<div class="row w-full flex py-2 h-[40px] mb-4 items-center text-[14px]">
<div class="field-label text-sm flex font-medium mr-4 box-border">
<span class="flex w-[80px]">
{{ i18next.t("AcctMgmt.FullName") }}
</span>
</div>
<input v-if='isNameEditable' id="input_name_field"
class="w-[280px] h-[40px] rounded p-1 border border-[1px] border-[#64748B] flex items-center outline-none"
v-model="inputName"
autocomplete="off"
/>
<div v-else class="not-editable displayable name flex w-[280px]">
{{ name }}
</div>
<div v-if='isNameEditable' class="save-btn-container flex ml-[112px]" @click="onSaveNameClick">
<ButtonFilled :buttonText='i18next.t("Global.Save")' />
</div>
<div v-if='isNameEditable' class="cancel-btn btn-container flex ml-[8px]" @click="onCancelNameClick" >
<Button :buttonText='i18next.t("Global.Cancel")'/>
</div>
<div v-else='isPwdEditable' class="edit-btn btn-container flex ml-[204px]" @click="onEditNameClick" >
<Button :buttonText='i18next.t("Global.Edit")'/>
</div>
<div
v-else
class="reset-btn btn-container flex ml-[460px]"
@click="onResetPwdClick"
>
<Button :buttonText="i18next.t('Global.Reset')" />
</div>
<div class="row w-full flex py-2 mb-4 border-b border-b-[#CBD5E1] border-b-[1px]">
<div class="field-label flex flex-col text-sm font-medium mr-4">
<span class="flex h-[40px] w-[80px] items-center">
{{ i18next.t("AcctMgmt.Password") }}
</span>
<div class="flex dummy-cell"></div>
</div>
<div class="flex input-and-error-msg flex-col w-[280px]">
<div v-if='isPwdEditable' class="input-and-eye flex items-center h-[40px] relative border-[1px] rounded"
:class="{'border-[#FF3366]': !isPwdLengthValid, 'border-[#64748B]': isPwdLengthValid,}"
>
<input class="outline-none p-1 w-[280px]" :type="isPwdEyeOn ? 'text' : 'password'"
v-model="inputPwd"
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] text-[14px]">
{{ isPwdLengthValid ? "" : i18next.t("AcctMgmt.PwdLengthNotEnough") }}
</span>
</div>
</div>
<div class="button-and-dummy-column flex flex-col text-[14px]">
<div class="button-group flex w-min-[80px] h-[40px]">
<div v-if='isPwdEditable' class="save-btn-container flex ml-[112px]"
@click="onSavePwdClick">
<ButtonFilled :buttonText='i18next.t("Global.Save")' />
</div>
<div v-if='isPwdEditable' class="cancel-btn btn-container flex ml-[8px]" @click="onCancelPwdClick" >
<Button :buttonText='i18next.t("Global.Cancel")'/>
</div>
<div v-else class="reset-btn btn-container flex ml-[460px]" @click="onResetPwdClick" >
<Button :buttonText='i18next.t("Global.Reset")'/>
</div>
</div>
<div class="flex dummy-cell h-[40px]"></div>
</div>
</div>
</main>
<main class="session flex flex-col pt-6 px-8 w-[720px]">
<h1 class="text-[20px] font-medium mb-4">
{{ i18next.t("AcctMgmt.Session") }}
</h1>
</main>
</div>
</div>
<div class="flex dummy-cell h-[40px]"></div>
</div>
</div>
</main>
<main class="session flex flex-col pt-6 px-8 w-[720px]">
<h1 class="text-[20px] font-medium mb-4">
{{ i18next.t("AcctMgmt.Session") }}
</h1>
</main>
</div>
</template>
<script setup>
@@ -125,16 +195,16 @@
* viewing and editing the current user's name and password.
*/
import { onMounted, computed, ref } from 'vue';
import i18next from '@/i18n/i18n.js';
import { useLoginStore } from '@/stores/login';
import { useAcctMgmtStore } from '@/stores/acctMgmt';
import Badge from '../../components/Badge.vue';
import { useLoadingStore } from '@/stores/loading';
import Button from '@/components/Button.vue';
import ButtonFilled from '@/components/ButtonFilled.vue';
import { useToast } from 'vue-toast-notification';
import { PWD_VALID_LENGTH } from '@/constants/constants.js';
import { onMounted, computed, ref } from "vue";
import i18next from "@/i18n/i18n.js";
import { useLoginStore } from "@/stores/login";
import { useAcctMgmtStore } from "@/stores/acctMgmt";
import Badge from "../../components/Badge.vue";
import { useLoadingStore } from "@/stores/loading";
import Button from "@/components/Button.vue";
import ButtonFilled from "@/components/ButtonFilled.vue";
import { useToast } from "vue-toast-notification";
import { PWD_VALID_LENGTH } from "@/constants/constants.js";
const loadingStore = useLoadingStore();
const loginStore = useLoginStore();
@@ -144,14 +214,10 @@ const toast = useToast();
const visitTime = ref(0);
const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
const name = computed(() => currentViewingUser.value.name);
const {
username,
is_admin,
is_active,
} = currentViewingUser.value;
const { username, is_admin, is_active } = currentViewingUser.value;
const inputName = ref(name.value);
const inputPwd = ref('');
const inputPwd = ref("");
const isNameEditable = ref(false);
const isPwdEditable = ref(false);
const isPwdEyeOn = ref(false);
@@ -159,53 +225,53 @@ const isPwdLengthValid = ref(true);
/** Enables the name editing input. */
const onEditNameClick = () => {
isNameEditable.value = true;
isNameEditable.value = true;
};
/** Enables the password editing input. */
const onResetPwdClick = () => {
isPwdEditable.value = true;
isPwdEditable.value = true;
};
/** Validates that the password meets the minimum length requirement. */
const validatePwdLength = () => {
isPwdLengthValid.value = inputPwd.value.length >= PWD_VALID_LENGTH;
isPwdLengthValid.value = inputPwd.value.length >= PWD_VALID_LENGTH;
};
/** Saves the edited name to the server and refreshes user data. */
const onSaveNameClick = async() => {
if(inputName.value.length > 0) {
await acctMgmtStore.editAccountName(username, inputName.value);
await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
await acctMgmtStore.getUserDetail(username);
isNameEditable.value = false;
inputName.value = name.value;
}
const onSaveNameClick = async () => {
if (inputName.value.length > 0) {
await acctMgmtStore.editAccountName(username, inputName.value);
await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
await acctMgmtStore.getUserDetail(username);
isNameEditable.value = false;
inputName.value = name.value;
}
};
/** Validates and saves the new password. */
const onSavePwdClick = async() => {
validatePwdLength();
if (isPwdLengthValid.value) {
isPwdEditable.value = false;
await acctMgmtStore.editAccountPwd(username, inputPwd.value);
await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
inputPwd.value = '';
await acctMgmtStore.getUserDetail(loginStore.userData.username);
}
const onSavePwdClick = async () => {
validatePwdLength();
if (isPwdLengthValid.value) {
isPwdEditable.value = false;
await acctMgmtStore.editAccountPwd(username, inputPwd.value);
await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
inputPwd.value = "";
await acctMgmtStore.getUserDetail(loginStore.userData.username);
}
};
/** Cancels name editing and restores the original value. */
const onCancelNameClick = () => {
isNameEditable.value = false;
inputName.value = name.value;
isNameEditable.value = false;
inputName.value = name.value;
};
/** Cancels password editing and clears the input. */
const onCancelPwdClick = () => {
isPwdEditable.value = false;
inputPwd.value = '';
isPwdLengthValid.value = true;
isPwdEditable.value = false;
inputPwd.value = "";
isPwdLengthValid.value = true;
};
/**
@@ -213,11 +279,11 @@ const onCancelPwdClick = () => {
* @param {boolean} toBeOpen - Whether to show the password.
*/
const togglePwdEyeBtn = (toBeOpen) => {
isPwdEyeOn.value = toBeOpen;
isPwdEyeOn.value = toBeOpen;
};
onMounted(async() => {
loadingStore.setIsLoading(false);
await acctMgmtStore.getUserDetail(loginStore.userData.username);
onMounted(async () => {
loadingStore.setIsLoading(false);
await acctMgmtStore.getUserDetail(loginStore.userData.username);
});
</script>