Support reporting both rooms and individual events

src/assets/icons/ic_report.vue

@@ -0,0 +1,6 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor">
+        <path
+            d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240ZM330-120 120-330v-300l210-210h300l210 210v300L630-120H330Zm34-80h232l164-164v-232L596-760H364L200-596v232l164 164Zm116-280Z" />
+    </svg>
+</template>

src/assets/translations/en.json

@@ -396,6 +396,7 @@
     "message_history_warning": "warning: Full message history will be visible to new participants",
     "report": "Report",
     "report_info": "Report this room to service administrators for illegal, abusive or otherwise harmful content",
+    "report_event_info": "Report this message to service administrators for illegal, abusive or otherwise harmful content",
     "report_reason": "Reason",
     "confirm_make_admin": "Do you want to make this user an administrator?",
     "confirm_revoke_admin": "Do you want to remove administrator rights from this user?",

src/components/Chat.vue

@@ -57,6 +57,7 @@
           v-on:edit="edit(selectedEvent)"
           v-on:redact="redact(selectedEvent)"
           v-on:download="download(selectedEvent)"
+          v-on:report="reportEvent(selectedEvent)"
           v-on:more="
             isEmojiQuickReaction=true;
             showMoreMessageOperations({event: selectedEvent, anchor: $event.anchor})
@@ -297,6 +298,7 @@
     <PurgeRoomDialog v-model="showPurgeConfirmation" :room="room" />
 
     <RoomExport :room="room" v-if="downloadingChat" v-on:close="downloadingChat = false" />
+    <ReportRoomOrEventDialog v-model="reportingEventShown" :room="room" :eventId="reportingEventId" />
 
     <!-- Heart animation -->
     <div :class="['heart-wrapper', { 'is-active': heartAnimation }]" :style="hearAnimationPosition">
@@ -324,6 +326,7 @@ import UserProfileDialog from "./UserProfileDialog.vue"
 import RoomUpgradePrompt from "./messages/composition/RoomUpgradePrompt.vue";
 import BottomSheet from "./BottomSheet.vue";
 import CreatePollDialog from "./CreatePollDialog.vue";
+import ReportRoomOrEventDialog from "./ReportRoomOrEventDialog.vue";
 import chatMixin, { ROOM_READ_MARKER_EVENT_PLACEHOLDER } from "./chatMixin";
 import AudioLayout from "./AudioLayout.vue";
 import SendAttachmentsLayout from "./file_mode/SendAttachmentsLayout.vue";
@@ -394,7 +397,8 @@ export default {
     MessageOperationsChannel,
     RoomExport,
     EmojiPicker,
-    RoomUpgradePrompt
+    RoomUpgradePrompt,
+    ReportRoomOrEventDialog
   },
 
   data() {
@@ -485,7 +489,8 @@ export default {
         left: 0
       },
       reverseOrder: false,
-      downloadingChat: false
+      downloadingChat: false,
+      reportingEventId: null,
     };
   },
 
@@ -801,6 +806,16 @@ export default {
         '--top': this.heartPosition.top,
         '--left': this.heartPosition.left
       };
+    },
+    reportingEventShown: {
+      get() {
+        return this.reportingEventId != null;
+      },
+      set(newValue) {
+        if (!newValue) {
+          this.reportingEventId = null;
+        }
+      }
     }
   },
 
@@ -1662,6 +1677,10 @@ export default {
       }
     },
 
+    reportEvent(event) {
+      this.reportingEventId = event.getId();
+    },
+
     pin(event) {
       const eventToPin = event.parentThread ? event.parentThread : event;
       this.$matrix.setEventPinned(this.room, eventToPin, true);

src/components/ReportRoomDialog.vue

@@ -1,76 +0,0 @@
-<template>
-  <v-dialog
-    v-model="showDialog"
-    class="ma-0 pa-0"
-    :width="$vuetify.display.smAndUp ? '688px' : '95%'"
-    scroll-strategy="none"
-  >
-    <div class="dialog-content text-center">
-      <h2 class="dialog-title">{{ $t("room_info.report") }}</h2>
-      <div class="dialog-text">{{ $t("room_info.report_info") }}</div>
-      <v-text-field v-model="reason" :label="$t('room_info.report_reason')"></v-text-field>
-      <v-container fluid>
-        <v-row cols="12">
-          <v-col cols="6">
-            <v-btn
-              id="btn-back"
-              variant="flat"
-              block
-              class="text-button"
-              @click="showDialog = false"
-              >{{ $t("menu.cancel") }}</v-btn
-            >
-          </v-col>
-          <v-col cols="6" align="center">
-            <v-btn
-              id="btn-report"
-              color="red"
-              variant="flat"
-              block
-              class="filled-button"
-              @click.stop="onReport()"
-              >{{ $t("room_info.report") }}</v-btn
-            >
-          </v-col>
-        </v-row>
-      </v-container>
-    </div>
-  </v-dialog>
-</template>
-<script>
-import RoomDialogBase from "./RoomDialogBase.vue";
-
-export default {
-  name: "ReportRoomDialog",
-  extends: RoomDialogBase,
-  data() {
-    return {
-      reason: ""
-    };
-  },
-
-  methods: {
-    onReport() {
-      const events = this.room.getLiveTimeline().getEvents();
-      if (events && events.length > 0) {
-        const eventId = events[events.length - 1].getId();
-        // const path = utils.encodeUri("/rooms/$roomId/report", {
-        //     $roomId: this.room.roomId,
-        // });
-        // this.$matrix.matrixClient.http.authedRequest("POST", path, undefined, { reason: this.reason }, { prefix: "/_matrix/client/v3"})
-        this.$matrix.matrixClient.reportEvent(this.room.roomId, eventId, -100, this.reason)
-        .then(() => {
-          this.showDialog = false;
-        })
-        .catch((err) => {
-          console.log("Error reporting", err);
-        });
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@use "@/assets/css/chat.scss" as *;
-</style>

src/components/ReportRoomOrEventDialog.vue

@@ -0,0 +1,67 @@
+<template>
+  <v-dialog v-model="showDialog" class="ma-0 pa-0" :width="$vuetify.display.smAndUp ? '688px' : '95%'"
+    scroll-strategy="none">
+    <div class="dialog-content text-center">
+      <h2 class="dialog-title">{{ $t("room_info.report") }}</h2>
+      <div class="dialog-text">{{ (eventId == null) ? $t("room_info.report_info") : $t("room_info.report_event_info") }}
+      </div>
+      <v-text-field v-model="reason" :label="$t('room_info.report_reason')"></v-text-field>
+      <v-container fluid>
+        <v-row cols="12">
+          <v-col cols="6">
+            <v-btn id="btn-back" variant="flat" block class="text-button" @click="showDialog = false">{{
+              $t("menu.cancel") }}</v-btn>
+          </v-col>
+          <v-col cols="6" align="center">
+            <v-btn id="btn-report" color="red" variant="flat" block class="filled-button" @click.stop="onReport()">{{
+              $t("room_info.report") }}</v-btn>
+          </v-col>
+        </v-row>
+      </v-container>
+    </div>
+  </v-dialog>
+</template>
+<script>
+import RoomDialogBase from "./RoomDialogBase.vue";
+
+export default {
+  name: "ReportRoomOrEventDialog",
+  extends: RoomDialogBase,
+  props: {
+    // If eventId == null then report Room, otherwise report this event
+    eventId: {
+      type: String,
+      default: function () {
+        return null;
+      },
+    },
+  },
+  data() {
+    return {
+      reason: ""
+    };
+  },
+
+  methods: {
+    onReport() {
+      let promise = undefined;
+      if (this.eventId) {
+        promise = this.$matrix.matrixClient.reportEvent(this.room.roomId, this.eventId, -100, this.reason)
+      }
+      else {
+        promise = this.$matrix.matrixClient.reportRoom(this.room.roomId, this.reason);
+      }
+      promise.then(() => {
+        this.showDialog = false;
+      })
+        .catch((err) => {
+          console.log("Error reporting", err);
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@use "@/assets/css/chat.scss" as *;
+</style>

src/components/RoomInfo.vue

@@ -351,7 +351,7 @@
       v-on:message-retention-update="onMessageRetention"
     />
 
-    <ReportRoomDialog
+    <ReportRoomOrEventDialog
       v-model="showReportDialog"
       :room="room"
     />
@@ -364,7 +364,7 @@
 import LeaveRoomDialog from "../components/LeaveRoomDialog";
 import PurgeRoomDialog from "../components/PurgeRoomDialog";
 import MessageRetentionDialog from "../components/MessageRetentionDialog";
-import ReportRoomDialog from "../components/ReportRoomDialog";
+import ReportRoomOrEventDialog from "../components/ReportRoomOrEventDialog";
 import RoomExport from "../components/RoomExport";
 import RoomAvatarPicker from "../components/RoomAvatarPicker";
 import CopyLink from "../components/CopyLink.vue"
@@ -382,7 +382,7 @@ export default {
     LeaveRoomDialog,
     PurgeRoomDialog,
     MessageRetentionDialog,
-    ReportRoomDialog,
+    ReportRoomOrEventDialog,
     UserProfileDialog,
     RoomExport,
     RoomAvatarPicker,

src/components/messages/MessageOperations.vue

@@ -20,6 +20,9 @@
     <v-btn id="btn-download" icon @click.stop="download" class="ma-0 pa-0" v-if="isDownloadable">
       <v-icon size="small">get_app</v-icon>
     </v-btn>
+    <v-btn id="btn-report" icon @click.stop="report" class="ma-0 pa-0">
+      <v-icon size="small">$vuetify.icons.ic_report</v-icon>
+    </v-btn>
   </div>
 </template>
 

src/components/messages/messageOperationsMixin.js

@@ -58,5 +58,9 @@ export default {
       this.$emit("close");
       this.$emit("unpin", {event:this.event});
     },
+    report() {
+      this.$emit("close");
+      this.$emit("report", {event:this.event});
+    }
   }
 }