feat(components): create admin tab component for user profiles

components/profile/adminPanel.vue

@@ -0,0 +1,116 @@
+<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 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 }}
+						</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>