110 lines
3.4 KiB
Vue
110 lines
3.4 KiB
Vue
<script lang="ts" setup>
|
|
import { message } from "ant-design-vue";
|
|
import { IUser } from "@models/user";
|
|
const [messageApi, contextHolder] = message.useMessage();
|
|
|
|
const props = defineProps<{ user: IUser | null }>();
|
|
const short = props.user?.profile.isAdmin;
|
|
const showBanUnban = ref<boolean>(false);
|
|
const showDemote = ref<boolean>(false);
|
|
const { data: commonIps } = await useApiFetch<{
|
|
[key: string]: { _id: number; username: string }[];
|
|
}>(`/user/${props.user!._id}/shared-ip`);
|
|
|
|
const handle = async () => {
|
|
await useApiFetch(`/user/${props.user?._id}/ban`, {
|
|
method: "post",
|
|
body: {
|
|
ban: !props.user?.banned,
|
|
},
|
|
});
|
|
messageApi.success(`User ${!props.user?.banned ? "banned" : "unbanned"}.`);
|
|
setTimeout(() => {
|
|
showBanUnban.value = false;
|
|
}, 1000);
|
|
};
|
|
const prodem = async () => {
|
|
await useApiFetch(`/user/${props.user?._id}/admin`, {
|
|
method: "post",
|
|
body: {
|
|
promote: !short,
|
|
},
|
|
});
|
|
messageApi.success(`User ${props.user?.username} is now ${short ? "an admin" : "a regular user"}.`);
|
|
setTimeout(() => {
|
|
showDemote.value = false;
|
|
}, 1000);
|
|
};
|
|
// TODO: common ip fetch
|
|
</script>
|
|
<template>
|
|
<a-space :size="10" direction="vertical">
|
|
<div>
|
|
<a-descriptions :colon="false" :label-style="{ fontWeight: 'bold' }" :column="1">
|
|
<a-descriptions-item label="IP addresses">
|
|
<a-list :data-source="user?.ipLog">
|
|
<template #renderItem="{ item }">
|
|
{{ item.ip }}<br />
|
|
<a-typography-title :level="5">Other users with this IP:</a-typography-title>
|
|
<div v-if="commonIps != null">
|
|
<i v-if="!commonIps[item.ip]?.length"> No other users share this IP. </i>
|
|
<a-list v-else :data-source="!!commonIps ? commonIps[item.ip] : []">
|
|
<template #renderItem="{ item: otherItem }">
|
|
<nuxt-link :to="`/user/${otherItem._id}`">
|
|
{{ otherItem.username }}
|
|
</nuxt-link>
|
|
</template>
|
|
</a-list>
|
|
</div>
|
|
</template>
|
|
</a-list>
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
</div>
|
|
<div>
|
|
<a-space>
|
|
<span>
|
|
This user is
|
|
<b>{{ user?.profile.isAdmin ? "an admin" : "a regular user" }}</b
|
|
>.
|
|
</span>
|
|
<a-button danger v-if="!user?.profile.isAdmin" @click="() => (showDemote = true)">
|
|
<b>Promote to Admin</b>
|
|
</a-button>
|
|
<a-button v-else @click="() => (showDemote = true)"> Demote to regular user </a-button>
|
|
</a-space>
|
|
<a-divider />
|
|
<div style="display: flex">
|
|
<a-button danger @click="() => (showBanUnban = true)">
|
|
{{ `${user?.banned ? "Unban" : "Ban"}` }}
|
|
</a-button>
|
|
</div>
|
|
</div>
|
|
</a-space>
|
|
<a-modal
|
|
cancel-text="No"
|
|
ok-text="Yes"
|
|
@ok="handle"
|
|
@cancel="() => (showBanUnban = false)"
|
|
v-model:open="showBanUnban"
|
|
:title="`${user?.banned ? 'Unban' : 'Ban'} ${user?.username}`"
|
|
>
|
|
Are you sure you want to {{ `${user?.banned ? "unban" : "ban"}` }} {{ user?.username }}?
|
|
</a-modal>
|
|
<a-modal
|
|
cancel-text="No"
|
|
ok-text="Yes, I'm sure"
|
|
@ok="prodem"
|
|
@cancel="() => (showDemote = false)"
|
|
v-model:open="showDemote"
|
|
:title="`${short ? 'Demoting' : 'Promoting'} ${user?.username} ${!short ? 'to an administrator' : 'to a regular user'}`"
|
|
>
|
|
<div v-if="!short">
|
|
Are you <b><u>absolutely sure</u></b> you want to <b>promote this user to an admin</b>?
|
|
<br />
|
|
<a-typography-title :level="5"> This is a VERY dangerous permission to grant. </a-typography-title>
|
|
</div>
|
|
<div v-else>Are you sure you want to remove this user as an administrator?</div>
|
|
</a-modal>
|
|
</template>
|