Basic support for reporting 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>