<template> <MkWindow ref="uiWindow" :initial-width="400" :initial-height="500" :can-resize="true" @closed="emit('closed')"> <template #header> <i class="ti ti-exclamation-circle" style="margin-right: 0.5em;"></i> <I18n :src="i18n.ts.reportAbuseOf" tag="span"> <template #name> <b><MkAcct :user="user"/></b> </template> </I18n> </template> <MkSpacer :margin-min="20" :margin-max="28"> <div class="dpvffvvy _gaps_m"> <div class=""> <MkTextarea v-model="comment"> <template #label>{{ i18n.ts.details }}</template> <template #caption>{{ i18n.ts.fillAbuseReportDescription }}</template> </MkTextarea> </div> <div class=""> <MkButton primary full :disabled="comment.length === 0" @click="send">{{ i18n.ts.send }}</MkButton> </div> </div> </MkSpacer> </MkWindow> </template> <script setup lang="ts"> import { ref, shallowRef } from 'vue'; import * as Misskey from 'misskey-js'; import MkWindow from '@/components/MkWindow.vue'; import MkTextarea from '@/components/MkTextarea.vue'; import MkButton from '@/components/MkButton.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; const props = defineProps<{ user: Misskey.entities.User; initialComment?: string; }>(); const emit = defineEmits<{ (ev: 'closed'): void; }>(); const uiWindow = shallowRef<InstanceType<typeof MkWindow>>(); const comment = ref(props.initialComment ?? ''); function send() { os.apiWithDialog('users/report-abuse', { userId: props.user.id, comment: comment.value, }, undefined).then(res => { os.alert({ type: 'success', text: i18n.ts.abuseReported, }); uiWindow.value?.close(); emit('closed'); }); } </script> <style lang="scss" scoped> .dpvffvvy { --root-margin: 16px; } </style>