69 lines
2.3 KiB
Vue
69 lines
2.3 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/StatusBadge.vue";
|
|
|
|
const acctMgmtStore = useAcctMgmtStore();
|
|
const visitTime = ref(0);
|
|
const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
|
|
const username = computed(() => currentViewingUser.value.username);
|
|
const name = computed(() => currentViewingUser.value.name);
|
|
const is_admin = computed(() => currentViewingUser.value.is_admin);
|
|
const is_active = computed(() => currentViewingUser.value.is_active);
|
|
|
|
onBeforeMount(async () => {
|
|
await acctMgmtStore.getUserDetail(currentViewingUser.value.username);
|
|
visitTime.value = currentViewingUser.value.detail?.visits ?? 0;
|
|
});
|
|
</script>
|