スパム報告機能

Resolve #1970

src/client/app/admin/views/abuse.vue

@@ -0,0 +1,87 @@
+<template>
+<div class="wbjusose">
+	<ui-card>
+		<div slot="title"><fa :icon="faExclamationCircle"/> {{ $t('title') }}</div>
+		<section class="fit-top">
+			<sequential-entrance animation="entranceFromTop" delay="25">
+				<div v-for="report in userReports" :key="report.id" class="haexwsjc">
+					<ui-horizon-group inputs>
+						<ui-input :value="report.user | acct" type="text">
+							<span>{{ $t('target') }}</span>
+						</ui-input>
+						<ui-input :value="report.reporter | acct" type="text">
+							<span>{{ $t('reporter') }}</span>
+						</ui-input>
+					</ui-horizon-group>
+					<ui-textarea :value="report.comment" readonly>
+						<span>{{ $t('details') }}</span>
+					</ui-textarea>
+					<ui-button @click="removeReport(report)">{{ $t('remove-report') }}</ui-button>
+				</div>
+			</sequential-entrance>
+			<ui-button v-if="existMore" @click="fetchUserReports">{{ $t('@.load-more') }}</ui-button>
+		</section>
+	</ui-card>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../i18n';
+import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+
+export default Vue.extend({
+	i18n: i18n('admin/views/abuse.vue'),
+
+	data() {
+		return {
+			limit: 10,
+			untilId: undefined,
+			userReports: [],
+			existMore: false,
+			faExclamationCircle
+		};
+	},
+
+	mounted() {
+		this.fetchUserReports();
+	},
+
+	methods: {
+		fetchUserReports() {
+			this.$root.api('admin/abuse-user-reports', {
+				untilId: this.untilId,
+				limit: this.limit + 1
+			}).then(reports => {
+				if (reports.length == this.limit + 1) {
+					reports.pop();
+					this.existMore = true;
+				} else {
+					this.existMore = false;
+				}
+				this.userReports = this.userReports.concat(reports);
+				this.untilId = this.userReports[this.userReports.length - 1].id;
+			});
+		},
+
+		removeReport(report) {
+			this.$root.api('admin/remove-abuse-user-report', {
+				reportId: report.id
+			}).then(() => {
+				this.userReports = this.userReports.filter(r => r.id != report.id);
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.wbjusose
+	@media (min-width 500px)
+		padding 16px
+
+	.haexwsjc
+		padding-bottom 16px
+		border-bottom solid 1px var(--faceDivider)
+
+</style>

src/client/app/admin/views/index.vue

@@ -27,6 +27,7 @@
 			<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>
 			<li @click="nav('hashtags')" :class="{ active: page == 'hashtags' }"><fa icon="hashtag" fixed-width/>{{ $t('hashtags') }}</li>
+			<li @click="nav('abuse')" :class="{ active: page == 'abuse' }"><fa :icon="faExclamationCircle" fixed-width/>{{ $t('abuse') }}</li>
 		</ul>
 		<div class="back-to-misskey">
 			<a href="/"><fa :icon="faArrowLeft"/> {{ $t('back-to-misskey') }}</a>
@@ -45,7 +46,7 @@
 			<div v-if="page == 'announcements'"><x-announcements/></div>
 			<div v-if="page == 'hashtags'"><x-hashtags/></div>
 			<div v-if="page == 'drive'"><x-drive/></div>
-			<div v-if="page == 'update'"></div>
+			<div v-if="page == 'abuse'"><x-abuse/></div>
 		</div>
 	</main>
 </div>
@@ -63,7 +64,8 @@ import XAnnouncements from "./announcements.vue";
 import XHashtags from "./hashtags.vue";
 import XUsers from "./users.vue";
 import XDrive from "./drive.vue";
-import { faHeadset, faArrowLeft, faShareAlt } from '@fortawesome/free-solid-svg-icons';
+import XAbuse from "./abuse.vue";
+import { faHeadset, faArrowLeft, faShareAlt, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import { faGrin } from '@fortawesome/free-regular-svg-icons';
 
 // Detect the user agent
@@ -81,6 +83,7 @@ export default Vue.extend({
 		XHashtags,
 		XUsers,
 		XDrive,
+		XAbuse,
 	},
 	provide: {
 		isMobile
@@ -94,7 +97,8 @@ export default Vue.extend({
 			faGrin,
 			faArrowLeft,
 			faHeadset,
-			faShareAlt
+			faShareAlt,
+			faExclamationCircle
 		};
 	},
 	methods: {