delete message confirmation added

src/components/app/MessagePanel.vue

@@ -354,8 +354,19 @@ export default {
     },
     async updateMessage() {
       const editMessage = this.editMessage;
-      this.$refs["input-box"].focus();
       this.message = this.message.trim();
+      if (this.message === "") {
+        this.$refs["input-box"].blur();
+        this.$store.dispatch("setAllPopout", {
+          show: true,
+          type: "DELETE_CONFIRM",
+          messageID: editMessage.messageID,
+          channelID: editMessage.channelID
+        });
+        this.$store.dispatch("setEditMessage", null);
+        return;
+      }
+      this.$refs["input-box"].focus();
       if (
         this.message === this.editMessage.message &&
         (this.customColor || undefined) === this.editMessage.color
@@ -789,7 +800,9 @@ export default {
   watch: {
     editMessage(editMessage) {
       this.editMessageEvent(editMessage);
-      this.$refs["input-box"].focus();
+      if (editMessage) {
+        this.$refs["input-box"].focus();
+      }
     },
     message(message) {
       this.messageLength = message.length;

src/components/app/Popouts/Popouts.vue

@@ -35,6 +35,10 @@
         key="ace"
         v-if="popouts.allPopout.type === 'ADMIN_CSS_EDITOR'"
       />
+      <DeleteConfirm
+        key="delete-confirm"
+        v-if="popouts.allPopout.type === 'DELETE_CONFIRM'"
+      />
     </transition-group>
   </div>
 </template>
@@ -61,8 +65,9 @@ const DragDropFileUploadDialog = () =>
 const ServerInvitePopout = () => import("./Popouts/ServerInvitePopout.vue");
 const ServerSettings = () =>
   import("./Popouts/ServerSettingsPanels/ServerSettings.vue");
-const GenericPopout = () => import("./Popouts/GenericPopout");
 const AdminCssEditor = () => import("./Popouts/AdminEditorPopout");
+const GenericPopout = () => import("./Popouts/GenericPopout");
+const DeleteConfirm = () => import("./Popouts/DeleteConfirm");
 
 export default {
   components: {
@@ -81,7 +86,8 @@ export default {
     ServerMemberContext,
     ServerContext,
     AddFriend,
-    AdminCssEditor
+    AdminCssEditor,
+    DeleteConfirm
   },
   data() {
     return {

src/components/app/Popouts/Popouts/DeleteConfirm.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="dark-background generic-popout" @mousedown="backgroundClick">
+    <div class="inner">
+      <div class="text">Are you sure you want to delete this message?</div>
+      <MessageTemplate
+        class="message"
+        :creator="message.creator"
+        :message="message"
+      />
+      <div class="buttons">
+        <div class="button" @click="closeMenu">Back</div>
+        <div class="button alert" @click="deleteMessage">Delete</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import messagesService from "@/services/messagesService";
+import MessageTemplate from "@/components/app/MessageTemplate";
+export default {
+  components: { MessageTemplate },
+  methods: {
+    closeMenu() {
+      this.$store.dispatch("setAllPopout", {
+        show: false,
+        type: null,
+        messageID: null,
+        channelID: null
+      });
+    },
+    deleteMessage() {
+      messagesService.delete(this.details.messageID, this.details.channelID);
+      this.closeMenu();
+    },
+    backgroundClick(e) {
+      if (e.target.classList.contains("dark-background")) {
+        this.closeMenu();
+      }
+    },
+    keyDownEvent(event) {
+      if (event.keyCode === 13) {
+        this.deleteMessage();
+      }
+    }
+  },
+  mounted() {
+    setTimeout(() => document.addEventListener("keydown", this.keyDownEvent));
+  },
+  destroyed() {
+    document.removeEventListener("keydown", this.keyDownEvent);
+  },
+  computed: {
+    details() {
+      return this.$store.getters.popouts.allPopout;
+    },
+    message() {
+      if (this.details.messageID) {
+        const messages = this.$store.getters["messages"][
+          this.details.channelID
+        ];
+        return messages.find(m => m.messageID === this.details.messageID);
+      }
+      return undefined;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.dark-background {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 111;
+  display: flex;
+}
+.inner {
+  margin: auto;
+  width: 450px;
+  max-height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  flex-direction: column;
+  color: white;
+  border-radius: 4px;
+  overflow: hidden;
+  backdrop-filter: blur(5px);
+}
+.message {
+  max-height: 300px;
+  overflow: auto;
+}
+.text {
+  margin-bottom: 10px;
+  margin-top: 20px;
+  text-align: center;
+  word-break: break-word;
+}
+
+.buttons {
+  display: flex;
+  align-self: flex-end;
+  margin-bottom: 10px;
+  margin-right: 5px;
+}
+.button {
+  flex-shrink: 0;
+  background: rgb(25, 152, 226);
+  padding: 10px;
+  border-radius: 5px;
+  cursor: pointer;
+  user-select: none;
+  margin-left: 5px;
+  margin-right: 5px;
+  width: 70px;
+  text-align: center;
+  opacity: 0.8;
+  transition: 0.2s;
+}
+.button:hover {
+  opacity: 1;
+}
+.button.alert {
+  background: rgb(255, 46, 46);
+}
+</style>

src/components/app/Popouts/Popouts/messageContextMenu.vue

@@ -16,7 +16,6 @@
 </template>
 
 <script>
-import messagesService from "@/services/messagesService";
 export default {
   data() {
     return {};
@@ -48,10 +47,12 @@ export default {
       this.closeMenu();
     },
     async deleteMessage() {
-      messagesService.delete(
+      this.$store.dispatch("setAllPopout", {
-        this.contextDetails.messageID,
+        show: true,
-        this.contextDetails.channelID
+        type: "DELETE_CONFIRM",
-      );
+        messageID: this.contextDetails.messageID,
+        channelID: this.contextDetails.channelID
+      });
       this.closeMenu();
     },
     setPosition() {