From eb9792d18480736630f4811caf56add31b78c3c2 Mon Sep 17 00:00:00 2001
From: hunterlong <info@socialeck.com>
Date: Wed, 2 Sep 2020 00:47:55 -0700
Subject: [PATCH] modal for UI confirmations

---
 frontend/config/webpack.config.prod.js        |  2 +-
 frontend/src/assets/scss/layout.scss          | 28 +++++++++++
 .../Dashboard/DashboardMessages.vue           | 18 +++++--
 .../Dashboard/DashboardServices.vue           | 26 +++++++---
 .../components/Dashboard/DashboardUsers.vue   | 18 +++++--
 .../src/components/Dashboard/Failures.vue     | 20 +++++---
 .../src/components/Dashboard/Incidents.vue    | 24 ++++++---
 .../src/components/Dashboard/ServicesList.vue | 27 +++++++---
 .../src/components/Dashboard/ThemeEditor.vue  | 22 +++++---
 frontend/src/components/Elements/Modal.vue    | 50 +++++++++++++++++++
 frontend/src/forms/Notifier.vue               |  4 +-
 frontend/src/pages/Dashboard.vue              |  7 +++
 frontend/src/pages/Settings.vue               | 22 +++++---
 frontend/src/store.js                         | 14 +++++-
 14 files changed, 227 insertions(+), 55 deletions(-)
 create mode 100644 frontend/src/components/Elements/Modal.vue

diff --git a/frontend/config/webpack.config.prod.js b/frontend/config/webpack.config.prod.js
index d877196f..0e10e4a4 100644
--- a/frontend/config/webpack.config.prod.js
+++ b/frontend/config/webpack.config.prod.js
@@ -74,7 +74,7 @@ const webpackConfig = merge(commonConfig, {
             threshold: 10240,
             minRatio: 0.8
         }),
-        new webpack.HashedModuleIdsPlugin(),
+        // new webpack.HashedModuleIdsPlugin(),
         new HtmlPlugin({
             template: 'public/base.gohtml',
             filename: 'base.gohtml',
diff --git a/frontend/src/assets/scss/layout.scss b/frontend/src/assets/scss/layout.scss
index 2bd6e5ec..e0e573af 100644
--- a/frontend/src/assets/scss/layout.scss
+++ b/frontend/src/assets/scss/layout.scss
@@ -14,6 +14,34 @@ A:HOVER {
   color: lighten($text-color, 12%) !important;
 }
 
+.modal-backdrop {
+  top: 0;
+  left: 0;
+  position: absolute;
+  display: block;
+  z-index: 10000;
+  width: 100%;
+  height: 100%;
+  background-color: #00000073;
+}
+
+.modal {
+  z-index: 999999 !important;
+  display: block;
+}
+
+.modal-dialog {
+  top: 20%;
+}
+
+.modal-header {
+  padding: 0.5rem 1rem;
+}
+
+.modal-footer {
+  padding: 0.5rem 1rem;
+}
+
 .text-muted {
   color: lighten($text-color, 30%) !important;
 }
diff --git a/frontend/src/components/Dashboard/DashboardMessages.vue b/frontend/src/components/Dashboard/DashboardMessages.vue
index c17bf54a..c5cc3a5e 100644
--- a/frontend/src/components/Dashboard/DashboardMessages.vue
+++ b/frontend/src/components/Dashboard/DashboardMessages.vue
@@ -81,13 +81,21 @@
     serviceName (service) {
       return service.name || "Global Message"
     },
+    async delete(m) {
+      await Api.message_delete(m.id)
+      const messages = await Api.messages()
+      this.$store.commit('setMessages', messages)
+    },
     async deleteMessage(m) {
-      let c = confirm(`Are you sure you want to delete message '${m.title}'?`)
-      if (c) {
-        await Api.message_delete(m.id)
-        const messages = await Api.messages()
-        this.$store.commit('setMessages', messages)
+      const modal = {
+        visible: true,
+        title: "Delete Announcement",
+        body: `Are you sure you want to delete Announcement ${m.title}?`,
+        btnColor: "btn-danger",
+        btnText: "Delete Announcement",
+        func: () => this.delete(m),
       }
+      this.$store.commit("setModal", modal)
     }
   }
 }
diff --git a/frontend/src/components/Dashboard/DashboardServices.vue b/frontend/src/components/Dashboard/DashboardServices.vue
index d8c40247..42228a0a 100644
--- a/frontend/src/components/Dashboard/DashboardServices.vue
+++ b/frontend/src/components/Dashboard/DashboardServices.vue
@@ -1,5 +1,6 @@
 <template>
     <div class="col-12">
+
         <div class="card contain-card mb-4">
             <div class="card-header">{{ $t('top_nav.services') }}
                 <router-link v-if="$store.state.admin" to="/dashboard/create_service" class="btn btn-sm btn-success float-right">
@@ -67,6 +68,7 @@
 </template>
 
 <script>
+  const Modal = () => import(/* webpackChunkName: "dashboard" */ "@/components/Elements/Modal")
   const FormGroup = () => import(/* webpackChunkName: "dashboard" */ '@/forms/Group')
   const ToggleSwitch = () => import(/* webpackChunkName: "dashboard" */ '@/forms/ToggleSwitch')
   const ServicesList = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/ServicesList')
@@ -76,6 +78,7 @@
   export default {
       name: 'DashboardServices',
       components: {
+        Modal,
           ServicesList,
           ToggleSwitch,
           FormGroup,
@@ -112,13 +115,24 @@
               this.group = g
               this.edit = !mode
           },
+        confirm_delete(service) {
+
+        },
+        async delete(g) {
+          await Api.group_delete(g.id)
+          const groups = await Api.groups()
+          this.$store.commit('setGroups', groups)
+        },
           async deleteGroup(g) {
-              let c = confirm(`Are you sure you want to delete '${g.name}'?`)
-              if (c) {
-                  await Api.group_delete(g.id)
-                  const groups = await Api.groups()
-                  this.$store.commit('setGroups', groups)
-              }
+            const modal = {
+              visible: true,
+              title: "Delete Group",
+              body: `Are you sure you want to delete group ${g.name}? All services attached will be removed from this group.`,
+              btnColor: "btn-danger",
+              btnText: "Delete Group",
+              func: () => this.delete(g),
+            }
+            this.$store.commit("setModal", modal)
           }
       }
   }
diff --git a/frontend/src/components/Dashboard/DashboardUsers.vue b/frontend/src/components/Dashboard/DashboardUsers.vue
index 8c8f920d..b73379d0 100644
--- a/frontend/src/components/Dashboard/DashboardUsers.vue
+++ b/frontend/src/components/Dashboard/DashboardUsers.vue
@@ -74,13 +74,21 @@
       this.user = u
       this.edit = !mode
     },
+    async delete(u) {
+      await Api.user_delete(u.id)
+      const users = await Api.users()
+      this.$store.commit('setUsers', users)
+    },
     async deleteUser(u) {
-      let c = confirm(`Are you sure you want to delete user '${u.username}'?`)
-      if (c) {
-        await Api.user_delete(u.id)
-        const users = await Api.users()
-        this.$store.commit('setUsers', users)
+      const modal = {
+        visible: true,
+        title: "Delete User",
+        body: `Are you sure you want to delete user ${u.username}?`,
+        btnColor: "btn-danger",
+        btnText: "Delete User",
+        func: () => this.delete(u),
       }
+      this.$store.commit("setModal", modal)
     }
   }
 }
diff --git a/frontend/src/components/Dashboard/Failures.vue b/frontend/src/components/Dashboard/Failures.vue
index fe98e8f3..c289ee9d 100644
--- a/frontend/src/components/Dashboard/Failures.vue
+++ b/frontend/src/components/Dashboard/Failures.vue
@@ -151,14 +151,22 @@ export default {
         await this.gotoPage(1)
       },
     methods: {
+      async delete() {
+        await Api.service_failures_delete(this.service)
+        this.service = await Api.service(this.service.id)
+        this.total = 0
+        await this.load()
+      },
       async deleteFailures() {
-        const c = confirm('Are you sure you want to delete all failures?')
-        if (c) {
-          await Api.service_failures_delete(this.service)
-          this.service = await Api.service(this.service.id)
-          this.total = 0
-          await this.load()
+        const modal = {
+          visible: true,
+          title: "Delete All Failures",
+          body: `Are you sure you want to delete all Failures for service ${this.service.title}?`,
+          btnColor: "btn-danger",
+          btnText: "Delete Failures",
+          func: () => this.delete(),
         }
+        this.$store.commit("setModal", modal)
       },
       async gotoPage(page) {
         this.page = page;
diff --git a/frontend/src/components/Dashboard/Incidents.vue b/frontend/src/components/Dashboard/Incidents.vue
index d758d7a6..2a3457aa 100644
--- a/frontend/src/components/Dashboard/Incidents.vue
+++ b/frontend/src/components/Dashboard/Incidents.vue
@@ -80,15 +80,23 @@ const FormIncidentUpdates = () => import(/* webpackChunkName: "dashboard" */ '@/
 
     methods: {
 
+      async delete(i) {
+        this.res = await Api.incident_delete(i)
+        if (this.res.status === "success") {
+          this.incidents = this.incidents.filter(obj => obj.id !== i.id);
+          //await this.loadIncidents()
+        }
+      },
         async deleteIncident(incident) {
-            let c = confirm(`Are you sure you want to delete '${incident.title}'?`)
-            if (c) {
-                this.res = await Api.incident_delete(incident)
-                if (this.res.status === "success") {
-                    this.incidents = this.incidents.filter(obj => obj.id !== incident.id); // this is better in terms of not having to querry the db to get a fresh copy of all updates
-                    //await this.loadIncidents()
-                } // TODO: further error checking here... maybe alert user it failed with modal or so
-            }
+          const modal = {
+            visible: true,
+            title: "Delete Incident",
+            body: `Are you sure you want to delete Incident ${incident.title}?`,
+            btnColor: "btn-danger",
+            btnText: "Delete Incident",
+            func: () => this.delete(incident),
+          }
+          this.$store.commit("setModal", modal)
         },
 
         async createIncident() {
diff --git a/frontend/src/components/Dashboard/ServicesList.vue b/frontend/src/components/Dashboard/ServicesList.vue
index c4273399..e00a10be 100644
--- a/frontend/src/components/Dashboard/ServicesList.vue
+++ b/frontend/src/components/Dashboard/ServicesList.vue
@@ -72,12 +72,14 @@
 <script>
 import Api from "../../API";
 import ServiceSparkList from "@/components/Service/ServiceSparkList";
+import Modal from "@/components/Elements/Modal";
 const draggable = () => import(/* webpackChunkName: "dashboard" */ 'vuedraggable')
 const ToggleSwitch = () => import(/* webpackChunkName: "dashboard" */ '../../forms/ToggleSwitch');
 
 export default {
       name: 'ServicesList',
     components: {
+      Modal,
       ServiceSparkList,
         ToggleSwitch,
           draggable
@@ -159,14 +161,25 @@ export default {
               await Api.services_reorder(data)
               await this.update()
           },
+        tester(s) {
+          console.log(s)
+        },
+        async delete(s) {
+          this.loading = true
+          await Api.service_delete(s.id)
+          await this.update()
+          this.loading = false
+        },
           async deleteService(s) {
-              let c = confirm(`Are you sure you want to delete '${s.name}'?`)
-              if (c) {
-                this.loading = true
-                  await Api.service_delete(s.id)
-                  await this.update()
-                this.loading = false
-              }
+            const modal = {
+              visible: true,
+              title: "Delete Service",
+              body: `Are you sure you want to delete service ${s.name}? This will also delete all failures, checkins, and incidents for this service.`,
+              btnColor: "btn-danger",
+              btnText: "Delete Service",
+              func: () => this.delete(s),
+            }
+            this.$store.commit("setModal", modal)
           },
           serviceGroup(s) {
               let group = this.$store.getters.groupById(s.group_id)
diff --git a/frontend/src/components/Dashboard/ThemeEditor.vue b/frontend/src/components/Dashboard/ThemeEditor.vue
index de74f90d..e60b7fea 100644
--- a/frontend/src/components/Dashboard/ThemeEditor.vue
+++ b/frontend/src/components/Dashboard/ThemeEditor.vue
@@ -144,14 +144,22 @@ import('codemirror/mode/css/css.js')
               this.pending = false
             await this.fetchTheme()
           },
+        async delete() {
+          this.pending = true
+          const resp = await Api.theme_generate(false)
+          await this.fetchTheme()
+          this.pending = false
+        },
           async deleteAssets() {
-              this.pending = true
-              let c = confirm('Are you sure you want to delete all local assets?')
-              if (c) {
-                  const resp = await Api.theme_generate(false)
-                  await this.fetchTheme()
-              }
-              this.pending = false
+            const modal = {
+              visible: true,
+              title: "Delete Local Assets",
+              body: `Are you sure you want to delete all local assets?`,
+              btnColor: "btn-danger",
+              btnText: "Delete",
+              func: () => this.delete(),
+            }
+            this.$store.commit("setModal", modal)
           },
           async saveAssets() {
               this.pending = true
diff --git a/frontend/src/components/Elements/Modal.vue b/frontend/src/components/Elements/Modal.vue
new file mode 100644
index 00000000..ccedbe11
--- /dev/null
+++ b/frontend/src/components/Elements/Modal.vue
@@ -0,0 +1,50 @@
+<template>
+    <div v-if="modal.visible" class="modal d-block" tabindex="-1">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">{{modal.title}}</h5>
+          </div>
+          <div class="modal-body">
+            <p>{{modal.body}}</p>
+          </div>
+          <div class="modal-footer">
+            <button @click.prevent="close" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+            <button @click.prevent="runFunc" type="button" :class="`btn ${modal.btnColor}`">{{modal.btnText}}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+name: "Modal",
+  data () {
+    return {
+
+    }
+  },
+  computed: {
+    modal() {
+     return this.$store.getters.modal
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    runFunc() {
+      this.$store.getters.modal.func()
+      this.close()
+    },
+    close() {
+      this.$store.commit("setModal", {visible: false})
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/forms/Notifier.vue b/frontend/src/forms/Notifier.vue
index eb06d1d9..73866ac3 100644
--- a/frontend/src/forms/Notifier.vue
+++ b/frontend/src/forms/Notifier.vue
@@ -149,11 +149,11 @@
 
                 <div v-for="(log, i) in notifier.logs.reverse()" class="alert" :class="{'alert-danger': log.error, 'alert-dark': !log.success && !log.error, 'alert-success': log.success && !log.error}">
                         <span class="d-block">
-                            Service '{{$store.getters.serviceById(log.service).name}}'
+                            Service {{log.service}}
                             {{log.success ? "Success Triggered" : "Failure Triggered"}}
                         </span>
 
-                    <div class="bg-white p-3 small mt-2">
+                    <div v-if="log.message !== ''" class="bg-white p-3 small mt-2">
                         <code>{{log.message}}</code>
                     </div>
 
diff --git a/frontend/src/pages/Dashboard.vue b/frontend/src/pages/Dashboard.vue
index 17f20d2f..d1b08cfa 100644
--- a/frontend/src/pages/Dashboard.vue
+++ b/frontend/src/pages/Dashboard.vue
@@ -1,16 +1,20 @@
 <template>
     <div class="container col-md-7 col-sm-12 mt-md-5">
+      <div v-if="modal" class="modal-backdrop"></div>
+      <Modal/>
         <TopNav :admin="admin"/>
         <router-view :admin="admin"/>
     </div>
 </template>
 
 <script>
+  import Modal from "@/components/Elements/Modal";
   const TopNav = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/TopNav')
 
   export default {
   name: 'Dashboard',
   components: {
+    Modal,
     TopNav,
   },
   data () {
@@ -20,6 +24,9 @@
       }
   },
     computed: {
+      modal() {
+        return this.$store.getters.modal.visible
+      },
       admin() {
         return this.$store.getters.admin
       },
diff --git a/frontend/src/pages/Settings.vue b/frontend/src/pages/Settings.vue
index b3d4caaa..03fe0ef7 100644
--- a/frontend/src/pages/Settings.vue
+++ b/frontend/src/pages/Settings.vue
@@ -189,15 +189,23 @@
           liClass(id) {
               return this.tab === id
           },
+        async renew() {
+          await Api.renewApiKeys()
+          const core = await Api.core()
+          this.$store.commit('setCore', core)
+          this.core = core
+          await this.logout()
+        },
         async renewApiKeys() {
-          let r = confirm("Are you sure you want to reset the API keys? You will be logged out.");
-          if (r === true) {
-            await Api.renewApiKeys()
-            const core = await Api.core()
-            this.$store.commit('setCore', core)
-            this.core = core
-            await this.logout()
+          const modal = {
+            visible: true,
+            title: "Reset API Key",
+            body: `Are you sure you want to reset the API keys? You will be logged out.`,
+            btnColor: "btn-danger",
+            btnText: "Reset",
+            func: () => this.renew(),
           }
+          this.$store.commit("setModal", modal)
         },
         async logout () {
           await Api.logout()
diff --git a/frontend/src/store.js b/frontend/src/store.js
index 9d008cd0..dd7247c0 100644
--- a/frontend/src/store.js
+++ b/frontend/src/store.js
@@ -31,7 +31,15 @@ export default new Vuex.Store({
     checkins: [],
     admin: false,
     user: false,
-    loggedIn: false
+    loggedIn: false,
+    modal: {
+      visible: false,
+      title: "Modal Header",
+      body: "This is the content for the modal body",
+      btnText: "Save Changes",
+      btnColor: "btn-primary",
+      func: null,
+    }
   },
   getters: {
     hasAllData: state => state.hasAllData,
@@ -49,6 +57,7 @@ export default new Vuex.Store({
     notifiers: state => state.notifiers,
     checkins: state => state.checkins,
     loggedIn: state => state.loggedIn,
+    modal: state => state.modal,
 
     isAdmin: state => state.admin,
     isUser: state => state.user,
@@ -140,6 +149,9 @@ export default new Vuex.Store({
     setOAuth(state, oauth) {
       state.oauth = oauth
     },
+    setModal(state, modal) {
+      state.modal = modal
+    },
   },
   actions: {
     async getAllServices(context) {