Delege post confirmation modal

src/assets/translations/en.json

@@ -325,6 +325,10 @@
     "copied_credentials_value": "Username: {userId} \nPassword: {password}",
     "copy_credentials_desc": "Your username and password are required to regain access to your chats from a new device or browser. We recommend storing these credentials in a secure location."
   },
+  "delete_post": {
+    "confirm_text": "Are you sure you want to delete this message?",
+    "confirm_text_desc": "This action cannot be undone."
+  },
   "purge_room": {
     "title": "Delete room?",
     "info": "All members and messages will be removed. This action cannot be undone.",

src/components/Chat.vue

@@ -55,7 +55,7 @@
           v-on:addquickreaction="addQuickReaction"
           v-on:addreply="addReply(selectedEvent)"
           v-on:edit="edit(selectedEvent)"
-          v-on:redact="redact(selectedEvent)"
+          v-on:redact="showDeletePostPopup = true"
           v-on:download="download(selectedEvent)"
           v-on:report="reportEvent(selectedEvent)"
           v-on:more="
@@ -304,6 +304,9 @@
     <div :class="['heart-wrapper', { 'is-active': heartAnimation }]" :style="hearAnimationPosition">
       <div :class="['heart', { 'is-active': heartAnimation }]" />
     </div>
+
+    <!-- Delete post dialog -->
+    <DeletePostDialog v-model="showDeletePostPopup" v-on:deletePost="onDeletePost"/>
   </div>
 </template>
 
@@ -337,6 +340,7 @@ import MessageErrorHandler from "./MessageErrorHandler";
 import MessageOperationsChannel from './messages/channel/MessageOperationsChannel.vue';
 import prettyBytes from "pretty-bytes";
 import RoomExport from "./RoomExport.vue";
+import DeletePostDialog from "./DeletePostDialog.vue"
 import EmojiPicker from 'vue3-emoji-picker';
 import 'vue3-emoji-picker/css';
 import emitter from 'tiny-emitter/instance';
@@ -398,7 +402,8 @@ export default {
     RoomExport,
     EmojiPicker,
     RoomUpgradePrompt,
-    ReportRoomOrEventDialog
+    ReportRoomOrEventDialog,
+    DeletePostDialog
   },
 
   data() {
@@ -491,6 +496,7 @@ export default {
       reverseOrder: false,
       downloadingChat: false,
       reportingEventId: null,
+      showDeletePostPopup: false,
     };
   },
 
@@ -2006,6 +2012,11 @@ export default {
         .catch((err) => {
           console.log("Error leaving", err);
         });
+    },
+
+    onDeletePost() {
+      this.redact(this.selectedEvent);
+      this.showDeletePostPopup = false;
     }
   },
 };

src/components/DeletePostDialog.vue

@@ -0,0 +1,23 @@
+<template>
+  <v-dialog v-model="showDeletePostPopup" 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("delete_post.confirm_text") }}</h2>
+      <div class="dialog-text">{{ $t("delete_post.confirm_text_desc") }}</div>
+      <v-container fluid>
+        <v-row cols="12">
+          <v-col cols="6">
+            <v-btn variant="flat" block class="text-button" @click.stop="showDeletePostPopup = false">{{
+              $t("menu.cancel") }}</v-btn>
+          </v-col>
+          <v-col cols="6" align="center">
+            <v-btn color="red" variant="flat" block class="filled-button" @click="$emit('deletePost')">{{ $t("menu.delete")
+            }}</v-btn>
+          </v-col>
+        </v-row>
+      </v-container>
+    </div>
+  </v-dialog>
+</template>
+<script setup>
+const showDeletePostPopup = defineModel();
+</script>