next/components/profile/adminPanel.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>