58 lines
2.1 KiB
Vue
58 lines
2.1 KiB
Vue
<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>
|
|
</template>
|
|
|
|
<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/ModalAccountInfo Account
|
|
* information modal displaying user details, admin/suspended
|
|
* 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';
|
|
|
|
const acctMgmtStore = useAcctMgmtStore();
|
|
const visitTime = ref(0);
|
|
const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
|
|
const {
|
|
username,
|
|
name,
|
|
is_admin,
|
|
is_active,
|
|
} = currentViewingUser.value;
|
|
|
|
onBeforeMount(async() => {
|
|
await acctMgmtStore.getUserDetail(currentViewingUser.value.username);
|
|
visitTime.value = currentViewingUser.value.detail.visits;
|
|
});
|
|
</script>
|