Purge room

Work on issue #118.

src/components/PurgeRoomDialog.vue

@@ -0,0 +1,90 @@
+<template>
+  <v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0" width="80%">
+    <div class="dialog-content text-center">
+      <template>
+        <v-icon color="black" size="30">lock</v-icon>
+        <h2 class="dialog-title">Purge room?</h2>
+        <div class="dialog-text">
+          This operation will close the room for all members. It cannot be
+          undone.
+        </div>
+      </template>
+      <v-container fluid>
+        <v-row cols="12">
+          <v-col cols="6">
+            <v-btn
+              depressed
+              text
+              block
+              class="text-button"
+              @click="showDialog = false"
+              >Cancel</v-btn
+            >
+          </v-col>
+          <v-col cols="6" align="center">
+            <v-btn
+              color="red"
+              depressed
+              block
+              class="filled-button"
+              @click.stop="onPurgeRoom()"
+              >Purge room</v-btn
+            >
+          </v-col>
+        </v-row>
+      </v-container>
+    </div>
+  </v-dialog>
+</template>
+<script>
+import roomInfoMixin from "./roomInfoMixin";
+
+export default {
+  name: "LeaveRoomDialog",
+  mixins: [roomInfoMixin],
+  props: {
+    show: {
+      type: Boolean,
+      default: function () {
+        return false;
+      },
+    },
+  },
+  data() {
+    return {
+      showDialog: false,
+    };
+  },
+  watch: {
+    show: {
+      handler(newVal, ignoredOldVal) {
+        this.showDialog = newVal;
+      },
+    },
+    showDialog() {
+      if (!this.showDialog) {
+        this.$emit("close");
+      }
+    },
+  },
+
+  methods: {
+    onPurgeRoom() {
+      this.$matrix
+        .purgeRoom(this.room.roomId)
+        .then(() => {
+          this.showDialog = false;
+          console.log("Purged room");
+          this.$navigation.push({ name: "Home", params: { roomId: null } }, -1);
+        })
+        .catch((err) => {
+          console.error("Error purging", err);
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style> 

src/components/RoomInfo.vue

@@ -63,6 +63,15 @@
           <div v-if="publicRoomLinkCopied" class="link-copied">Link copied!</div>
         </v-radio-group>
 
+        <v-btn
+          v-if="userCanPurgeRoom"
+          color="red"
+          depressed
+          block
+          class="filled-button"
+          @click.stop="showPurgeConfirmation = true"
+          >Purge room</v-btn
+        >
         <!-- <div v-if="anyoneCanJoin">
           <div>Anyone with a link can join.</div>
           <v-text-field
@@ -158,11 +167,19 @@
       :room="room"
       @close="showLeaveConfirmation = false"
     />
+
+    <PurgeRoomDialog
+      :show="showPurgeConfirmation"
+      :room="room"
+      @close="showPurgeConfirmation = false"
+    />
+
   </div>
 </template>
 
 <script>
 import LeaveRoomDialog from "../components/LeaveRoomDialog";
+import PurgeRoomDialog from "../components/PurgeRoomDialog";
 import DeviceList from "../components/DeviceList";
 import QRCode from "qrcode";
 import roomInfoMixin from "./roomInfoMixin";
@@ -172,6 +189,7 @@ export default {
   mixins: [roomInfoMixin],
   components: {
     LeaveRoomDialog,
+    PurgeRoomDialog,
     DeviceList,
   },
   data() {
@@ -181,6 +199,7 @@ export default {
       displayName: "",
       showAllMembers: false,
       showLeaveConfirmation: false,
+      showPurgeConfirmation: false,
       expandedMembers: [],
       buildVersion: "",
       updatingJoinRule: false, // Flag if we are processing update curerntly

src/components/roomInfoMixin.js

@@ -2,7 +2,8 @@ export default {
   data() {
     return {
       roomJoinRule: null,
-      userCanChangeJoinRule: false
+      userCanChangeJoinRule: false,
+      userCanPurgeRoom: false
     }
   },
   mounted() {
@@ -81,9 +82,11 @@ export default {
             this.$matrix.matrixClient
           );
         this.userCanChangeJoinRule = canChangeAccess;
+        this.userCanPurgeRoom = canChangeAccess; //TODO - need different permissions here?
       } else {
         this.roomJoinRule = null;
         this.userCanChangeJoinRule = false;
+        this.userCanPurgeRoom = false;
       }
     },