Merge branch '625-add-support-for-room-and-event-reporting-for-moderation' into 'dev'

Basic support for reporting room

See merge request keanuapp/keanuapp-weblite!335

src/assets/translations/en.json

@@ -366,7 +366,10 @@
     "shared_room_number_more": "You share more than {count} rooms with {name}",
     "message_history": "Message History",
     "message_history_info": "Allow people to see messages sent before they joined",
-    "message_history_warning": "warning: Full message history will be visible to new participants"
+    "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_reason": "Reason"
   },
   "room_info_sheet": {
     "this_room": "This room",

src/components/ReportRoomDialog.vue

@@ -0,0 +1,94 @@
+<template>
+  <v-dialog
+    v-model="showDialog"
+    v-show="room"
+    class="ma-0 pa-0"
+    :width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'"
+  >
+    <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"
+              depressed
+              text
+              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"
+              depressed
+              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 roomInfoMixin from "./roomInfoMixin";
+import * as utils from 'matrix-js-sdk/lib/utils';
+
+export default {
+  name: "ReportRoomDialog",
+  mixins: [roomInfoMixin],
+  props: {
+    show: {
+      type: Boolean,
+      default: function () {
+        return false;
+      },
+    },
+  },
+  data() {
+    return {
+      showDialog: false,
+      reason: ""
+    };
+  },
+  watch: {
+    show: {
+      handler(newVal, ignoredOldVal) {
+        this.showDialog = newVal;
+      },
+    },
+    showDialog() {
+      if (!this.showDialog) {
+        this.$emit("close");
+      }
+    },
+  },
+
+  methods: {
+    onReport() {
+        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"})
+        .then(() => {
+          this.showDialog = false;
+        })
+        .catch((err) => {
+          console.log("Error reporting", err);
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>

src/components/RoomInfo.vue

@@ -179,6 +179,22 @@
     </v-card-text>
     </v-card>
 
+    <v-card class="account ma-3" flat>
+      <v-card-title class="h2">{{ $t("room_info.report") }}</v-card-title>
+      <v-card-text class="">
+        <div class="with-right-label" style="align-items:center;height:36px">  
+        <div class="option-title">{{ $t('room_info.report_info') }}</div>
+        <v-btn
+        color="black"
+        depressed
+        small
+        class="outlined-button"
+        @click.stop="report"
+        >{{ $t("room_info.report") }}</v-btn>
+        </div>
+    </v-card-text>
+    </v-card>
+
     <v-card class="members ma-3" flat>
       <v-card-title class="h2"
         >{{ $t("room_info.members") }}<v-spacer></v-spacer>
@@ -277,6 +293,12 @@
       v-on:message-retention-update="onMessageRetention"
     />
 
+    <ReportRoomDialog
+      :show="showReportDialog"
+      :room="room"
+      @close="showReportDialog = false"
+    />
+
     <RoomExport :room="room" v-if="exporting" v-on:close="exporting = false" />
   </div>
 </template>
@@ -285,6 +307,7 @@
 import LeaveRoomDialog from "../components/LeaveRoomDialog";
 import PurgeRoomDialog from "../components/PurgeRoomDialog";
 import MessageRetentionDialog from "../components/MessageRetentionDialog";
+import ReportRoomDialog from "../components/ReportRoomDialog";
 import RoomExport from "../components/RoomExport";
 import RoomAvatarPicker from "../components/RoomAvatarPicker";
 import CopyLink from "../components/CopyLink.vue"
@@ -300,6 +323,7 @@ export default {
     LeaveRoomDialog,
     PurgeRoomDialog,
     MessageRetentionDialog,
+    ReportRoomDialog,
     UserProfileDialog,
     RoomExport,
     RoomAvatarPicker,
@@ -314,6 +338,7 @@ export default {
       showLeaveConfirmation: false,
       showPurgeConfirmation: false,
       showMessageRetentionDialog: false,
+      showReportDialog: false,
       buildVersion: "",
       updatingJoinRule: false, // Flag if we are processing update curerntly
       joinRules: [
@@ -519,6 +544,9 @@ export default {
         this.exporting = true;
       }
     },
+    report() {
+      this.showReportDialog = true;
+    },
     /**
      * Return true if we can change power levels in the room, i.e. make read only room
      */