117 lines
2.9 KiB
Vue
117 lines
2.9 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 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>
|