From 6d918739f298c089145161bafde9e5dde469021f Mon Sep 17 00:00:00 2001
From: MattIPv4 <me@mattcowley.co.uk>
Date: Wed, 6 May 2020 17:05:02 +0100
Subject: [PATCH] Add confirmation modal for all reset/remove actions in global
 tools section

---
 src/nginxconfig/scss/style.scss               |   6 +
 .../templates/global_sections/tools.vue       | 116 +++++++++++++-----
 2 files changed, 94 insertions(+), 28 deletions(-)

diff --git a/src/nginxconfig/scss/style.scss b/src/nginxconfig/scss/style.scss
index 62548bc..8817092 100644
--- a/src/nginxconfig/scss/style.scss
+++ b/src/nginxconfig/scss/style.scss
@@ -346,4 +346,10 @@ $highlight: #f2c94c;
       }
     }
   }
+
+  .modal {
+    .modal-card {
+      text-align: left;
+    }
+  }
 }
diff --git a/src/nginxconfig/templates/global_sections/tools.vue b/src/nginxconfig/templates/global_sections/tools.vue
index c2a45a6..8e31b0a 100644
--- a/src/nginxconfig/templates/global_sections/tools.vue
+++ b/src/nginxconfig/templates/global_sections/tools.vue
@@ -28,7 +28,7 @@
                         <div class="checkbox">
                             <PrettyCheck v-model="symlinkVhost" class="p-default p-curve p-fill p-icon">
                                 <i slot="extra" class="icon fas fa-check"></i>
-                                enable symlink from sites-available/ to sites-enabled/
+                                enable symlinks from sites-available/ to sites-enabled/
                             </PrettyCheck>
                         </div>
                     </div>
@@ -47,6 +47,7 @@
                                class="input"
                                type="text"
                                readonly="readonly"
+                               @click="select"
                         />
                     </div>
                 </div>
@@ -60,17 +61,17 @@
             <div class="field-body">
                 <div class="field is-grouped">
                     <div class="control">
-                        <a class="button is-danger is-mini" @click="resetGlobal">
+                        <a class="button is-danger is-outline is-mini" @click="resetGlobal">
                             Reset global config
                         </a>
                     </div>
                     <div v-if="hasDomain" class="control">
-                        <a class="button is-danger is-mini" @click="resetDomains">
+                        <a class="button is-danger is-outline is-mini" @click="resetDomains">
                             Reset all domains
                         </a>
                     </div>
                     <div v-if="hasDomain" class="control">
-                        <a class="button is-danger is-mini" @click="removeDomains">
+                        <a class="button is-danger is-outline is-mini" @click="removeDomains">
                             Remove all domains
                         </a>
                     </div>
@@ -89,12 +90,12 @@
                     <div class="field-body">
                         <div class="field is-grouped">
                             <div class="control">
-                                <a class="button is-danger is-mini" @click="resetDomain(domainData[1])">
+                                <a class="button is-danger is-outline is-mini" @click="resetDomain(domainData[1])">
                                     Reset domain config
                                 </a>
                             </div>
                             <div class="control">
-                                <a class="button is-danger is-mini" @click="removeDomain(domainData[1])">
+                                <a class="button is-danger is-outline is-mini" @click="removeDomain(domainData[1])">
                                     Remove domain
                                 </a>
                             </div>
@@ -103,11 +104,18 @@
                 </div>
             </div>
         </div>
+
+        <Modal ref="confirmModal" :title="confirmTitle">
+            <p>{{ confirmBody }}</p>
+            <a class="button is-danger is-outline" @click="doConfirmAction">Yes, I'm sure</a>
+            <a class="button is-outline" @click="$refs.confirmModal.close()">No, cancel</a>
+        </Modal>
     </div>
 </template>
 
 <script>
     import PrettyCheck from 'pretty-checkbox-vue/check';
+    import Modal from 'do-vue/src/templates/modal';
     import qs from 'qs';
     import i18n from '../../i18n';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
@@ -132,13 +140,18 @@
         delegated: delegatedFromDefaults(defaults),     // Data the parent will present here
         components: {
             PrettyCheck,
+            Modal,
         },
         props: {
             data: Object,                               // Data delegated back to us from parent
         },
-        data () {
+        data() {
             return {
                 i18n,
+                confirmTitle: '',
+                confirmBody: '',
+                confirmAction: () => {
+                },
             };
         },
         computed: {
@@ -162,19 +175,17 @@
             },
         },
         methods: {
-            // TODO: These all need confirmation prompts!
-            resetGlobal() {
-                Object.values(this.$parent.$props.data).forEach(category => {
-                    Object.values(category).forEach(property => {
-                        property.value = property.default;
-                        property.computed = property.default;
-                    });
-                });
+            confirm(title, body, callback) {
+                this.$data.confirmTitle = title;
+                this.$data.confirmBody = body;
+                this.$data.confirmAction = callback;
+                this.$refs.confirmModal.open();
             },
-            resetDomain(index) {
-                if (index >= this.$parent.$parent.$data.domains.length) return;
-
-                const domain = this.$parent.$parent.$data.domains[index];
+            doConfirmAction() {
+                this.$refs.confirmModal.close();
+                this.$data.confirmAction();
+            },
+            doResetDomain(domain) {
                 if (!domain) return;
 
                 Object.values(domain).forEach(category => {
@@ -184,20 +195,69 @@
                     });
                 });
             },
-            removeDomain(index) {
-                if (index >= this.$parent.$parent.$data.domains.length) return;
-
+            doRemoveDomain(index) {
                 this.$set(this.$parent.$parent.$data.domains, index, null);
             },
+            resetGlobal() {
+                this.confirm(
+                    'Reset global config',
+                    'Are you sure you want to reset all configuration options in the global config section?',
+                    () => {
+                        Object.values(this.$parent.$props.data).forEach(category => {
+                            Object.values(category).forEach(property => {
+                                property.value = property.default;
+                                property.computed = property.default;
+                            });
+                        });
+                    },
+                );
+            },
+            resetDomain(index) {
+                if (index >= this.$parent.$parent.$data.domains.length) return;
+                const domain = this.$parent.$parent.$data.domains[index];
+                if (!domain) return;
+
+                this.confirm(
+                    'Reset domain config',
+                    `Are you sure you want to reset all configuration options for the ${domain.server.domain.computed} domain?`,
+                    () => this.doResetDomain(domain),
+                );
+            },
+            removeDomain(index) {
+                if (index >= this.$parent.$parent.$data.domains.length) return;
+                const domain = this.$parent.$parent.$data.domains[index];
+                if (!domain) return;
+
+                this.confirm(
+                    'Remove domain',
+                    `Are you sure you want to remove the ${domain.server.domain.computed} domain configuration?`,
+                    () => this.doRemoveDomain(index),
+                );
+            },
             resetDomains() {
-                for (let i = 0; i < this.$parent.$parent.$data.domains.length; i++) {
-                    this.resetDomain(i);
-                }
+                this.confirm(
+                    'Reset all domain configs',
+                    'Are you sure you want to reset the configuration of ALL domains?',
+                    () => {
+                        for (let i = 0; i < this.$parent.$parent.$data.domains.length; i++) {
+                            this.doResetDomain(this.$parent.$parent.$data.domains[i]);
+                        }
+                    },
+                );
             },
             removeDomains() {
-                for (let i = 0; i < this.$parent.$parent.$data.domains.length; i++) {
-                    this.removeDomain(i);
-                }
+                this.confirm(
+                    'Remove all domains',
+                    'Are you sure you want to remove ALL domain configurations?',
+                    () => {
+                        for (let i = 0; i < this.$parent.$parent.$data.domains.length; i++) {
+                            this.doRemoveDomain(i);
+                        }
+                    },
+                );
+            },
+            select(event) {
+                event.target.setSelectionRange(0, event.target.value.length);
             },
         },
     };