Moderator system

Closes #2357

5 files changed, 71 insertions, 5 deletions

diff --git a/src/client/app/admin/views/index.vue b/src/client/app/admin/views/index.vue
index a5ffb2098e..116d794b91 100644
--- a/src/client/app/admin/views/index.vue
+++ b/src/client/app/admin/views/index.vue
@@ -20,6 +20,7 @@
 		<ul>
 			<li @click="nav('dashboard')" :class="{ active: page == 'dashboard' }"><fa icon="home" fixed-width/>{{ $t('dashboard') }}</li>
 			<li @click="nav('instance')" :class="{ active: page == 'instance' }"><fa icon="cog" fixed-width/>{{ $t('instance') }}</li>
+			<li @click="nav('moderators')" :class="{ active: page == 'moderators' }"><fa :icon="faHeadset" fixed-width/>{{ $t('moderators') }}</li>
 			<li @click="nav('users')" :class="{ active: page == 'users' }"><fa icon="users" fixed-width/>{{ $t('users') }}</li>
 			<li @click="nav('emoji')" :class="{ active: page == 'emoji' }"><fa :icon="faGrin" fixed-width/>{{ $t('emoji') }}</li>
 			<li @click="nav('announcements')" :class="{ active: page == 'announcements' }"><fa icon="broadcast-tower" fixed-width/>{{ $t('announcements') }}</li>
@@ -38,6 +39,7 @@
 	<main>
 		<div v-if="page == 'dashboard'"><x-dashboard/></div>
 		<div v-if="page == 'instance'"><x-instance/></div>
+		<div v-if="page == 'moderators'"><x-moderators/></div>
 		<div v-if="page == 'users'"><x-users/></div>
 		<div v-if="page == 'emoji'"><x-emoji/></div>
 		<div v-if="page == 'announcements'"><x-announcements/></div>
@@ -54,11 +56,12 @@ import i18n from '../../i18n';
 import { version } from '../../config';
 import XDashboard from "./dashboard.vue";
 import XInstance from "./instance.vue";
+import XModerators from "./moderators.vue";
 import XEmoji from "./emoji.vue";
 import XAnnouncements from "./announcements.vue";
 import XHashtags from "./hashtags.vue";
 import XUsers from "./users.vue";
-import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+import { faHeadset, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import { faGrin } from '@fortawesome/free-regular-svg-icons';
 
 // Detect the user agent
@@ -70,6 +73,7 @@ export default Vue.extend({
 	components: {
 		XDashboard,
 		XInstance,
+		XModerators,
 		XEmoji,
 		XAnnouncements,
 		XHashtags,
@@ -85,7 +89,8 @@ export default Vue.extend({
 			isMobile,
 			navOpend: !isMobile,
 			faGrin,
-			faArrowLeft
+			faArrowLeft,
+			faHeadset
 		};
 	},
 	methods: {
diff --git a/src/client/app/admin/views/moderators.vue b/src/client/app/admin/views/moderators.vue
new file mode 100644
index 0000000000..ebf20c12fd
--- /dev/null
+++ b/src/client/app/admin/views/moderators.vue
@@ -0,0 +1,61 @@
+<template>
+<div class="jnhmugbb">
+	<ui-card>
+		<div slot="title"><fa icon="plus"/> {{ $t('add-moderator.title') }}</div>
+		<section class="fit-top">
+			<ui-input v-model="username" type="text">
+				<span slot="prefix">@</span>
+			</ui-input>
+			<ui-button @click="add" :disabled="adding">{{ $t('add-moderator.add') }}</ui-button>
+		</section>
+	</ui-card>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../i18n';
+import parseAcct from "../../../../misc/acct/parse";
+
+export default Vue.extend({
+	i18n: i18n('admin/views/moderators.vue'),
+
+	data() {
+		return {
+			username: '',
+			adding: false
+		};
+	},
+
+	methods: {
+		async add() {
+			this.adding = true;
+
+			const process = async () => {
+				const user = await this.$root.api('users/show', parseAcct(this.username));
+				await this.$root.api('admin/moderators/add', { userId: user.id });
+				this.$root.alert({
+					type: 'success',
+					text: this.$t('add-moderator.added')
+				});
+			};
+
+			await process().catch(e => {
+				this.$root.alert({
+					type: 'error',
+					text: e
+				});
+			});
+
+			this.adding = false;
+		},
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.jnhmugbb
+	@media (min-width 500px)
+		padding 16px
+
+</style>
diff --git a/src/client/app/common/views/components/note-menu.vue b/src/client/app/common/views/components/note-menu.vue
index d848cb765d..7d15b4ed7f 100644
--- a/src/client/app/common/views/components/note-menu.vue
+++ b/src/client/app/common/views/components/note-menu.vue
@@ -55,7 +55,7 @@ export default Vue.extend({
 							}
 					] : []
 				], [
-					this.note.userId == this.$store.state.i.id || this.$store.state.i.isAdmin ? [{
+					this.note.userId == this.$store.state.i.id || this.$store.state.i.isAdmin || this.$store.state.i.isModerator ? [{
 						icon: ['far', 'trash-alt'],
 						text: this.$t('delete'),
 						action: this.del
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 79410273aa..a16f164556 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -58,7 +58,7 @@
 						<i><fa icon="angle-right"/></i>
 					</p>
 				</li>
-				<li v-if="$store.state.i.isAdmin">
+				<li v-if="$store.state.i.isAdmin || $store.state.i.isModerator">
 					<a href="/admin">
 						<i><fa icon="terminal"/></i>
 						<span>{{ $t('admin') }}</span>
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index c529ae2617..4f085a5e6d 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -30,7 +30,7 @@
 				<ul>
 					<li><a @click="search"><i><fa icon="search"/></i>{{ $t('search') }}<i><fa icon="angle-right"/></i></a></li>
 					<li><router-link to="/i/settings" :data-active="$route.name == 'settings'"><i><fa icon="cog"/></i>{{ $t('settings') }}<i><fa icon="angle-right"/></i></router-link></li>
-					<li v-if="$store.getters.isSignedIn && $store.state.i.isAdmin"><a href="/admin"><i><fa icon="terminal"/></i><span>{{ $t('admin') }}</span><i><fa icon="angle-right"/></i></a></li>
+					<li v-if="$store.getters.isSignedIn && ($store.state.i.isAdmin || $store.state.i.isModerator)"><a href="/admin"><i><fa icon="terminal"/></i><span>{{ $t('admin') }}</span><i><fa icon="angle-right"/></i></a></li>
 					<li @click="dark"><p><template v-if="$store.state.device.darkmode"><i><fa icon="moon"/></i></template><template v-else><i><fa :icon="['far', 'moon']"/></i></template><span>{{ $t('darkmode') }}</span></p></li>
 				</ul>
 			</div>