From 81a6d821c08174a667c0be8494ba86a5d16606ac Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Mon, 14 Dec 2020 10:35:14 +0530
Subject: [PATCH] feat: confirm modal + chore(deps): bump

---
 components/collections/collection.vue   |  10 ++-
 components/collections/folder.vue       |  10 ++-
 components/collections/request.vue      | 106 +++++++++++++-----------
 components/environments/environment.vue |  64 ++++++++------
 components/ui/confirm-modal.vue         |  71 ++++++++++++++++
 components/ui/modal.vue                 |   1 +
 lang/en-US.json                         |   3 +-
 package-lock.json                       |  50 +++++------
 package.json                            |   2 +-
 9 files changed, 211 insertions(+), 106 deletions(-)
 create mode 100644 components/ui/confirm-modal.vue

diff --git a/components/collections/collection.vue b/components/collections/collection.vue
index 7ec938cf3..c76353a32 100644
--- a/components/collections/collection.vue
+++ b/components/collections/collection.vue
@@ -46,7 +46,7 @@
               </button>
             </div>
             <div>
-              <button class="icon" @click="removeCollection" v-close-popover>
+              <button class="icon" @click="confirmRemove = true" v-close-popover>
                 <i class="material-icons">delete</i>
                 <span>{{ $t("delete") }}</span>
               </button>
@@ -103,6 +103,12 @@
         </li>
       </ul>
     </div>
+    <confirm-modal
+      :show="confirmRemove"
+      :title="$t('are_you_sure_remove_collection')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeCollection"
+    />
   </div>
 </template>
 
@@ -121,6 +127,7 @@ export default {
       showChildren: false,
       dragging: false,
       selectedFolder: {},
+      confirmRemove: false,
     }
   },
   methods: {
@@ -135,7 +142,6 @@ export default {
       this.showChildren = !this.showChildren
     },
     removeCollection() {
-      if (!confirm(this.$t("are_you_sure_remove_collection"))) return
       this.$store.commit("postwoman/removeCollection", {
         collectionIndex: this.collectionIndex,
       })
diff --git a/components/collections/folder.vue b/components/collections/folder.vue
index defe324df..4b8ba28e2 100644
--- a/components/collections/folder.vue
+++ b/components/collections/folder.vue
@@ -43,7 +43,7 @@
             </button>
           </div>
           <div>
-            <button class="icon" @click="removeFolder" v-close-popover>
+            <button class="icon" @click="confirmRemove = true" v-close-popover>
               <i class="material-icons">delete</i>
               <span>{{ $t("delete") }}</span>
             </button>
@@ -93,6 +93,12 @@
         </li>
       </ul>
     </div>
+    <confirm-modal
+      :show="confirmRemove"
+      :title="$t('are_you_sure_remove_folder')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeFolder"
+    />
   </div>
 </template>
 
@@ -113,6 +119,7 @@ export default {
     return {
       showChildren: false,
       dragging: false,
+      confirmRemove: false,
     }
   },
   methods: {
@@ -127,7 +134,6 @@ export default {
       this.showChildren = !this.showChildren
     },
     removeFolder() {
-      if (!confirm(this.$t("are_you_sure_remove_folder"))) return
       this.$store.commit("postwoman/removeFolder", {
         collectionIndex: this.$props.collectionIndex,
         folderName: this.$props.folder.name,
diff --git a/components/collections/request.vue b/components/collections/request.vue
index 5c79fe67e..a05d37c98 100644
--- a/components/collections/request.vue
+++ b/components/collections/request.vue
@@ -1,53 +1,61 @@
 <template>
-  <div
-    :class="['row-wrapper', dragging ? 'drag-el' : '']"
-    draggable="true"
-    @dragstart="dragStart"
-    @dragover.stop
-    @dragleave="dragging = false"
-    @dragend="dragging = false"
-  >
-    <div>
-      <button
-        class="icon"
-        @click="!doc ? selectRequest() : {}"
-        v-tooltip="!doc ? $t('use_request') : ''"
-      >
-        <span :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
-        <span>{{ request.name }}</span>
-      </button>
+  <div>
+    <div
+      :class="['row-wrapper', dragging ? 'drag-el' : '']"
+      draggable="true"
+      @dragstart="dragStart"
+      @dragover.stop
+      @dragleave="dragging = false"
+      @dragend="dragging = false"
+    >
+      <div>
+        <button
+          class="icon"
+          @click="!doc ? selectRequest() : {}"
+          v-tooltip="!doc ? $t('use_request') : ''"
+        >
+          <span :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
+          <span>{{ request.name }}</span>
+        </button>
+      </div>
+      <v-popover>
+        <button class="tooltip-target icon" v-tooltip="$t('more')">
+          <i class="material-icons">more_vert</i>
+        </button>
+        <template slot="popover">
+          <div>
+            <button
+              class="icon"
+              @click="
+                $emit('edit-request', {
+                  collectionIndex,
+                  folderIndex,
+                  folderName,
+                  request,
+                  requestIndex,
+                })
+              "
+              v-close-popover
+            >
+              <i class="material-icons">edit</i>
+              <span>{{ $t("edit") }}</span>
+            </button>
+          </div>
+          <div>
+            <button class="icon" @click="confirmRemove = true" v-close-popover>
+              <i class="material-icons">delete</i>
+              <span>{{ $t("delete") }}</span>
+            </button>
+          </div>
+        </template>
+      </v-popover>
     </div>
-    <v-popover>
-      <button class="tooltip-target icon" v-tooltip="$t('more')">
-        <i class="material-icons">more_vert</i>
-      </button>
-      <template slot="popover">
-        <div>
-          <button
-            class="icon"
-            @click="
-              $emit('edit-request', {
-                collectionIndex,
-                folderIndex,
-                folderName,
-                request,
-                requestIndex,
-              })
-            "
-            v-close-popover
-          >
-            <i class="material-icons">edit</i>
-            <span>{{ $t("edit") }}</span>
-          </button>
-        </div>
-        <div>
-          <button class="icon" @click="removeRequest" v-close-popover>
-            <i class="material-icons">delete</i>
-            <span>{{ $t("delete") }}</span>
-          </button>
-        </div>
-      </template>
-    </v-popover>
+    <confirm-modal
+      :show="confirmRemove"
+      :title="$t('are_you_sure_remove_request')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeRequest"
+    />
   </div>
 </template>
 
@@ -73,6 +81,7 @@ export default {
         delete: "text-red-400",
         default: "text-gray-400",
       },
+      confirmRemove: false,
     }
   },
   methods: {
@@ -94,7 +103,6 @@ export default {
       dataTransfer.setData("requestIndex", this.$props.requestIndex)
     },
     removeRequest() {
-      if (!confirm(this.$t("are_you_sure_remove_request"))) return
       this.$store.commit("postwoman/removeRequest", {
         collectionIndex: this.$props.collectionIndex,
         folderName: this.$props.folderName,
diff --git a/components/environments/environment.vue b/components/environments/environment.vue
index 685338031..08b3fa8ba 100644
--- a/components/environments/environment.vue
+++ b/components/environments/environment.vue
@@ -1,30 +1,38 @@
 <template>
-  <div class="row-wrapper">
-    <div>
-      <button class="icon" @click="$emit('edit-environment')">
-        <i class="material-icons">layers</i>
-        <span>{{ environment.name }}</span>
-      </button>
+  <div>
+    <div class="row-wrapper">
+      <div>
+        <button class="icon" @click="$emit('edit-environment')">
+          <i class="material-icons">layers</i>
+          <span>{{ environment.name }}</span>
+        </button>
+      </div>
+      <v-popover>
+        <button class="tooltip-target icon" v-tooltip.left="$t('more')">
+          <i class="material-icons">more_vert</i>
+        </button>
+        <template slot="popover">
+          <div>
+            <button class="icon" @click="$emit('edit-environment')" v-close-popover>
+              <i class="material-icons">create</i>
+              <span>{{ $t("edit") }}</span>
+            </button>
+          </div>
+          <div>
+            <button class="icon" @click="confirmRemove = true" v-close-popover>
+              <i class="material-icons">delete</i>
+              <span>{{ $t("delete") }}</span>
+            </button>
+          </div>
+        </template>
+      </v-popover>
     </div>
-    <v-popover>
-      <button class="tooltip-target icon" v-tooltip.left="$t('more')">
-        <i class="material-icons">more_vert</i>
-      </button>
-      <template slot="popover">
-        <div>
-          <button class="icon" @click="$emit('edit-environment')" v-close-popover>
-            <i class="material-icons">create</i>
-            <span>{{ $t("edit") }}</span>
-          </button>
-        </div>
-        <div>
-          <button class="icon" @click="removeEnvironment" v-close-popover>
-            <i class="material-icons">delete</i>
-            <span>{{ $t("delete") }}</span>
-          </button>
-        </div>
-      </template>
-    </v-popover>
+    <confirm-modal
+      :show="confirmRemove"
+      :title="$t('are_you_sure_remove_environment')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeEnvironment"
+    />
   </div>
 </template>
 
@@ -36,6 +44,11 @@ export default {
     environment: Object,
     environmentIndex: Number,
   },
+  data() {
+    return {
+      confirmRemove: false,
+    }
+  },
   methods: {
     syncEnvironments() {
       if (fb.currentUser !== null) {
@@ -45,7 +58,6 @@ export default {
       }
     },
     removeEnvironment() {
-      if (!confirm(this.$t("are_you_sure_remove_environment"))) return
       this.$store.commit("postwoman/removeEnvironment", this.environmentIndex)
       this.$toast.error(this.$t("deleted"), {
         icon: "delete",
diff --git a/components/ui/confirm-modal.vue b/components/ui/confirm-modal.vue
new file mode 100644
index 000000000..f8c732784
--- /dev/null
+++ b/components/ui/confirm-modal.vue
@@ -0,0 +1,71 @@
+<template>
+  <modal v-if="show" @close="hideModal">
+    <div slot="header">
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("confirm") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div slot="body" class="flex flex-col">
+      <label>{{ title }}</label>
+    </div>
+    <div slot="footer">
+      <div class="row-wrapper">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            {{ no }}
+          </button>
+          <button class="icon primary" @click="resolve">
+            {{ yes }}
+          </button>
+        </span>
+      </div>
+    </div>
+  </modal>
+</template>
+
+<script>
+export default {
+  props: {
+    show: Boolean,
+    title: "",
+    yes: {
+      type: String,
+      default: function () {
+        return this.$t("yes")
+      },
+    },
+    no: {
+      type: String,
+      default: function () {
+        return this.$t("no")
+      },
+    },
+  },
+  async mounted() {
+    this._keyListener = function (e) {
+      if (e.key === "Escape") {
+        e.preventDefault()
+        this.hideModal()
+      }
+    }
+    document.addEventListener("keydown", this._keyListener.bind(this))
+  },
+  methods: {
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+    resolve() {
+      this.$emit("resolve")
+    },
+  },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this._keyListener)
+  },
+}
+</script>
diff --git a/components/ui/modal.vue b/components/ui/modal.vue
index 48c14f392..451c5abb3 100644
--- a/components/ui/modal.vue
+++ b/components/ui/modal.vue
@@ -19,6 +19,7 @@
     </div>
   </transition>
 </template>
+
 <style scoped lang="scss">
 .modal-backdrop {
   @apply fixed;
diff --git a/lang/en-US.json b/lang/en-US.json
index 8ea7fcf76..27881fdec 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -300,5 +300,6 @@
   "gist_created": "Gist created",
   "import_from_gist": "Import from Gist",
   "enter_gist_url": "Enter Gist URL",
-  "account_exists": "Account exists with different credential - Login to link both accounts"
+  "account_exists": "Account exists with different credential - Login to link both accounts",
+  "confirm": "Confirm"
 }
diff --git a/package-lock.json b/package-lock.json
index d36414b49..f1a883327 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1474,9 +1474,9 @@
       "integrity": "sha512-L/ZnJRAq7F++utfuoTKX4CLBG5YR7tFO3PLzG1/oXXKEezJ0kRL3CMRoueBEmTCzVb/6SIs2Qlaw++uDgi5Xyg=="
     },
     "@firebase/auth": {
-      "version": "0.15.3",
-      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-0.15.3.tgz",
-      "integrity": "sha512-nGJ0sVRgfd6ly4MyKhc1wyVoINLpQsxJ7uasw30qTssPdDQFus8uDu6Kmy0nN2XzRpYAfchQzZRHE9Q5Y2FHqA==",
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-0.16.0.tgz",
+      "integrity": "sha512-1d8WvbGCCaTMZXqevjrkrFzP6FFvFORHBUByQc5xVpDty+kQxIayeWxUqyEuwGm57BrQ1fUwveH2G9a4DGarCQ==",
       "requires": {
         "@firebase/auth-types": "0.10.1"
       }
@@ -1523,12 +1523,12 @@
       }
     },
     "@firebase/firestore": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-2.0.5.tgz",
-      "integrity": "sha512-RBA2A/tnA6ZFQY3pD0TJXRzjB9+D+zaLXzvTVxTO/Sxt8l2cRNFiQhYvHihD6aV/jm3n7RUQ2U7TDtzfXq7jjQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-2.1.0.tgz",
+      "integrity": "sha512-CKzZdht5ECpOGsfxOfeea7rXFTeR/wR7Lbh12TQI7Ru4CfhfdMBQPw9gs4wBX+WyKifp18Fz/bjP8Lly5RgNMg==",
       "requires": {
         "@firebase/component": "0.1.21",
-        "@firebase/firestore-types": "2.0.0",
+        "@firebase/firestore-types": "2.1.0",
         "@firebase/logger": "0.2.6",
         "@firebase/util": "0.3.4",
         "@firebase/webchannel-wrapper": "0.4.1",
@@ -1539,9 +1539,9 @@
       }
     },
     "@firebase/firestore-types": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-2.0.0.tgz",
-      "integrity": "sha512-ZGb7p1SSQJP0Z+kc9GAUi+Fx5rJatFddBrS1ikkayW+QHfSIz0omU23OgSHcBGTxe8dJCeKiKA2Yf+tkDKO/LA=="
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-2.1.0.tgz",
+      "integrity": "sha512-jietErBWihMvJkqqEquQy5GgoEwzHnMXXC/TsVoe9FPysXm1/AeJS12taS7ZYvenAtyvL/AEJyKrRKRh4adcJQ=="
     },
     "@firebase/functions": {
       "version": "0.6.1",
@@ -1601,9 +1601,9 @@
       "integrity": "sha512-QaaBswrU6umJYb/ZYvjR5JDSslCGOH6D9P136PhabFAHLTR4TWjsaACvbBXuvwrfCXu10DtcjMxqfhdNIB1Xfg=="
     },
     "@firebase/performance": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.4.4.tgz",
-      "integrity": "sha512-CY/fzz7qGQ9hUkvOow22MeJhayHSjXmI4+0AqcxaUC4CWk4oQubyIC4pk62aH+yCwZNNeC7JJUEDbtqI/0rGkQ==",
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.4.5.tgz",
+      "integrity": "sha512-oenEOaV/UzvV8XPi8afYQ71RzyrHoBesqOyXqb1TOg7dpU+i+UJ5PS8K64DytKUHTxQl+UJFcuxNpsoy9BpWzw==",
       "requires": {
         "@firebase/component": "0.1.21",
         "@firebase/installations": "0.4.19",
@@ -7385,20 +7385,20 @@
       }
     },
     "firebase": {
-      "version": "8.1.2",
-      "resolved": "https://registry.npmjs.org/firebase/-/firebase-8.1.2.tgz",
-      "integrity": "sha512-I1nYPQpE22sKWKc4A4GQNl0k0G1IbPZ5KvyzwEP4fAkLSX9j1rNwh7S902CJIjUxOXV/QOU7e/gYtNRc5SX98Q==",
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-8.2.0.tgz",
+      "integrity": "sha512-+xmFd6/E9dZC3OC16lPll5ql5tCi/CHu/iu66OAqZZwriwnxZTp48uQp5Rk/YiOkl19iyf9jzPx5NX3NXpXXbA==",
       "requires": {
         "@firebase/analytics": "0.6.2",
         "@firebase/app": "0.6.13",
         "@firebase/app-types": "0.6.1",
-        "@firebase/auth": "0.15.3",
+        "@firebase/auth": "0.16.0",
         "@firebase/database": "0.8.1",
-        "@firebase/firestore": "2.0.5",
+        "@firebase/firestore": "2.1.0",
         "@firebase/functions": "0.6.1",
         "@firebase/installations": "0.4.19",
         "@firebase/messaging": "0.7.3",
-        "@firebase/performance": "0.4.4",
+        "@firebase/performance": "0.4.5",
         "@firebase/polyfill": "0.3.36",
         "@firebase/remote-config": "0.1.30",
         "@firebase/storage": "0.4.2",
@@ -7709,9 +7709,9 @@
       "dev": true
     },
     "gaxios": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-4.0.1.tgz",
-      "integrity": "sha512-jOin8xRZ/UytQeBpSXFqIzqU7Fi5TqgPNLlUsSB8kjJ76+FiGBfImF8KJu++c6J4jOldfJUtt0YmkRj2ZpSHTQ==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-4.1.0.tgz",
+      "integrity": "sha512-vb0to8xzGnA2qcgywAjtshOKKVDf2eQhJoiL6fHhgW5tVN7wNk7egnYIO9zotfn3lQ3De1VPdf7V5/BWfCtCmg==",
       "requires": {
         "abort-controller": "^3.0.0",
         "extend": "^3.0.2",
@@ -13060,9 +13060,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "13.13.34",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.34.tgz",
-          "integrity": "sha512-g8D1HF2dMDKYSDl5+79izRwRgNPsSynmWMbj50mj7GZ0b7Lv4p8EmZjbo3h0h+6iLr6YmVz9VnF6XVZ3O6V1Ug=="
+          "version": "13.13.35",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.35.tgz",
+          "integrity": "sha512-q9aeOGwv+RRou/ca4aJVUM/jD5u7LBexu+rq9PkA/NhHNn8JifcMo94soKm0b6JGSfw/PSNdqtc428OscMvEYA=="
         }
       }
     },
diff --git a/package.json b/package.json
index 5ed36cfd5..bbaa7c1d4 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "@nuxtjs/toast": "^3.3.1",
     "ace-builds": "^1.4.12",
     "esprima": "^4.0.1",
-    "firebase": "^8.1.2",
+    "firebase": "^8.2.0",
     "graphql": "^15.4.0",
     "graphql-language-service-interface": "^2.5.0",
     "mustache": "^4.1.0",