feat: prompt to confirm discard editor changes (#2948)

* chore: update he.json

* feat: prompt to confirm discard editor changes

---------

Co-authored-by: Oleg Lobanov <oleg@lobanov.me>

frontend/src/components/prompts/DiscardEditorChanges.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="card floating">
+    <div class="card-content">
+      <p>
+        {{ $t("prompts.discardEditorChanges") }}
+      </p>
+    </div>
+    <div class="card-action">
+      <button
+        @click="$store.commit('closeHovers')"
+        class="button button--flat button--grey"
+        :aria-label="$t('buttons.cancel')"
+        :title="$t('buttons.cancel')"
+      >
+        {{ $t("buttons.cancel") }}
+      </button>
+      <button
+        @click="submit"
+        class="button button--flat button--red"
+        :aria-label="$t('buttons.discardChanges')"
+        :title="$t('buttons.discardChanges')"
+      >
+        {{ $t("buttons.discardChanges") }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from "vuex";
+import url from "@/utils/url";
+
+export default {
+  name: "discardEditorChanges",
+  methods: {
+    ...mapMutations(["closeHovers"]),
+    submit: async function () {
+      this.$store.commit("updateRequest", {});
+
+      let uri = url.removeLastDir(this.$route.path) + "/";
+      this.$router.push({ path: uri });
+    },
+  },
+};
+</script>

frontend/src/components/prompts/Prompts.vue

@@ -27,6 +27,7 @@ import Share from "./Share.vue";
 import Upload from "./Upload.vue";
 import ShareDelete from "./ShareDelete.vue";
 import Sidebar from "../Sidebar.vue";
+import DiscardEditorChanges from "./DiscardEditorChanges.vue";
 import { mapGetters, mapState } from "vuex";
 import buttons from "@/utils/buttons";
 
@@ -47,7 +48,8 @@ export default {
     ReplaceRename,
     Upload,
     ShareDelete,
-    Sidebar
+    Sidebar,
+    DiscardEditorChanges,
   },
   data: function () {
     return {

frontend/src/i18n/en.json

@@ -38,7 +38,8 @@
     "update": "Update",
     "upload": "Upload",
     "openFile": "Open file",
-    "continue": "Continue"
+    "continue": "Continue",
+    "discardChanges": "Discard"
   },
   "download": {
     "downloadFile": "Download File",
@@ -162,7 +163,8 @@
     "uploadFiles": "Uploading {files} files...",
     "uploadMessage": "Select an option to upload.",
     "optionalPassword": "Optional password",
-    "resolution": "Resolution"
+    "resolution": "Resolution",
+    "discardEditorChanges": "Are you sure you wish to discard the changes you've made?"
   },
   "search": {
     "images": "Images",

frontend/src/i18n/he.json

@@ -38,7 +38,8 @@
     "update": "עדכון",
     "upload": "העלאה",
     "openFile": "פתח קובץ",
-    "continue": "המשך"
+    "continue": "המשך",
+    "discardChanges": "זריקת השינויים"
   },
   "download": {
     "downloadFile": "הורד קובץ",
@@ -160,7 +161,8 @@
     "upload": "העלאה",
     "uploadFiles": "מעלה {files} קבצים...",
     "uploadMessage": "בחר אפשרות העלאה.",
-    "optionalPassword": "סיסמא אופציונלית"
+    "optionalPassword": "סיסמא אופציונלית",
+    "discardEditorChanges": "האם אתה בטוח שברצונך לבטל את השינויים שביצעת?"
   },
   "search": {
     "images": "תמונות",

frontend/src/views/files/Editor.vue

@@ -107,10 +107,6 @@ export default {
     this.editor.focus();
   },
   methods: {
-    back() {
-      let uri = url.removeLastDir(this.$route.path) + "/";
-      this.$router.push({ path: uri });
-    },
     keyEvent(event) {
       if (event.code === "Escape") {
         this.close();
@@ -140,6 +136,13 @@ export default {
       }
     },
     close() {
+      const originalContent = this.req.content;
+      const currentContent = this.editor.getValue();
+      if (originalContent !== currentContent) {
+        this.$store.commit("showHover", "discardEditorChanges");
+        return;
+      }
+
       this.$store.commit("updateRequest", {});
 
       let uri = url.removeLastDir(this.$route.path) + "/";