Timeout on room deletion

And custom deletion notice state event.

Issue #118.

src/components/Chat.vue

@@ -459,6 +459,7 @@ import RoomJoinRules from "./messages/RoomJoinRules.vue";
 import RoomPowerLevelsChanged from "./messages/RoomPowerLevelsChanged.vue";
 import RoomGuestAccessChanged from "./messages/RoomGuestAccessChanged.vue";
 import RoomEncrypted from "./messages/RoomEncrypted.vue";
+import RoomDeletionNotice from "./messages/RoomDeletionNotice.vue";
 import DebugEvent from "./messages/DebugEvent.vue";
 import util from "../plugins/utils";
 import MessageOperations from "./messages/MessageOperations.vue";
@@ -539,6 +540,7 @@ export default {
     RoomPowerLevelsChanged,
     RoomGuestAccessChanged,
     RoomEncrypted,
+    RoomDeletionNotice,
     DebugEvent,
     MessageOperations,
     MessageOperationsPicker,
@@ -1064,6 +1066,23 @@ export default {
 
         case "m.room.encryption":
           return RoomEncrypted;
+
+        case "im.keanu.room_deletion_notice": {
+          // Custom event for notice 30 seconds before a room is deleted/purged.
+          const deletionNotices = this.room.currentState.getStateEvents(
+            "im.keanu.room_deletion_notice"
+          );
+          if (
+            deletionNotices &&
+            deletionNotices.length > 0 &&
+            deletionNotices[deletionNotices.length - 1] == event
+          ) {
+            // This is the latest/last one. Look at the status flag. Show nothing if it is "cancel".
+            if (event.getContent().status != "cancel") {
+              return RoomDeletionNotice;
+            }
+          }
+        }
       }
       return this.debugging ? DebugEvent : null;
     },

src/components/PurgeRoomDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0" width="80%">
-    <div class="dialog-content text-center">
+    <div v-if="timeout == -1" class="dialog-content text-center">
       <template>
         <v-img contain height="28" src="@/assets/icons/trash_black.svg" />
         <h2 class="dialog-title">{{ $t("purge_room.title") }}</h2>
@@ -38,6 +38,48 @@
         </v-row>
       </v-container>
     </div>
+
+    <!-- Timer -->
+    <div v-if="timeout >= 0 && !isPurging" class="dialog-content text-center">
+      <template>
+        <v-img
+          contain
+          width="20"
+          class="d-inline-block me-2"
+          src="@/assets/icons/timer.svg"
+        />{{ $t("purge_room.n_seconds", { seconds: timeout }) }}
+        <h2 class="dialog-title">{{ $t("purge_room.self_destruct") }}</h2>
+        <div class="dialog-text">
+          {{ $t("purge_room.notified") }}
+        </div>
+        <div class="dialog-text">
+          {{ status }}
+        </div>
+      </template>
+      <v-container fluid>
+        <v-row cols="12">
+          <v-col cols="12">
+            <v-btn
+              depressed
+              text
+              block
+              class="text-button"
+              :disabled="isPurging"
+              @click="undo"
+              >{{ $t("menu.undo") }}</v-btn
+            >
+          </v-col>
+        </v-row>
+      </v-container>
+    </div>
+
+    <!-- Purging -->
+    <div v-if="isPurging" class="dialog-content text-center">
+      <h2 class="dialog-title">{{ $t("purge_room.deleting") }}</h2>
+      <div class="dialog-text">
+        {{ status }}
+      </div>
+    </div>
   </v-dialog>
 </template>
 <script>
@@ -56,6 +98,8 @@ export default {
   },
   data() {
     return {
+      timeout: -1,
+      timeoutTimer: null,
       showDialog: false,
       isPurging: false,
       status: null,
@@ -75,7 +119,41 @@ export default {
   },
 
   methods: {
+    undo() {
+      if (this.timeoutTimer) {
+        clearInterval(this.timeoutTimer);
+        this.timeoutTimer = null;
+      }
+      this.timeout = -1;
+
+      // Cancel the state event for deletion
+      this.$matrix.matrixClient.sendStateEvent(
+        this.room.roomId,
+        "im.keanu.room_deletion_notice",
+        { status: "cancel" }
+      );
+
+      this.showDialog = false;
+    },
     onPurgeRoom() {
+      // Send custom state event!
+      this.$matrix.matrixClient.sendStateEvent(
+        this.room.roomId,
+        "im.keanu.room_deletion_notice",
+        { status: "delete" }
+      );
+
+      this.timeout = 30;
+      this.timeoutTimer = setInterval(() => {
+        this.timeout = this.timeout - 1;
+        if (this.timeout == 0) {
+          clearInterval(this.timeoutTimer);
+          this.timeoutTimer = null;
+          this.onDoPurgeRoom();
+        }
+      }, 1000);
+    },
+    onDoPurgeRoom() {
       this.isPurging = true;
       this.$matrix
         .purgeRoom(this.room.roomId, this.onPurgeStatus)

src/components/messages/RoomDeletionNotice.vue

@@ -0,0 +1,23 @@
+<template>
+  <!-- ROOM WILL BE DELETED -->
+  <div class="notice">
+    👋&nbsp;
+    {{
+      $t("purge_room.room_deletion_notice", {
+        user: stateEventDisplayName(event),
+      })
+    }}
+  </div>
+</template>
+
+<script>
+import messageMixin from "./messageMixin";
+
+export default {
+  mixins: [messageMixin],
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>