Add confirmation modal for all reset/remove actions in global tools section

src/nginxconfig/scss/style.scss

@@ -346,4 +346,10 @@ $highlight: #f2c94c;
       }
     }
   }
+
+  .modal {
+    .modal-card {
+      text-align: left;
+    }
+  }
 }

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!
+            confirm(title, body, callback) {
-            resetGlobal() {
+                this.$data.confirmTitle = title;
-                Object.values(this.$parent.$props.data).forEach(category => {
+                this.$data.confirmBody = body;
-                    Object.values(category).forEach(property => {
+                this.$data.confirmAction = callback;
-                        property.value = property.default;
+                this.$refs.confirmModal.open();
-                        property.computed = property.default;
-                    });
-                });
             },
-            resetDomain(index) {
+            doConfirmAction() {
-                if (index >= this.$parent.$parent.$data.domains.length) return;
+                this.$refs.confirmModal.close();
-
+                this.$data.confirmAction();
-                const domain = this.$parent.$parent.$data.domains[index];
+            },
+            doResetDomain(domain) {
                 if (!domain) return;
 
                 Object.values(domain).forEach(category => {
@@ -184,21 +195,70 @@
                     });
                 });
             },
-            removeDomain(index) {
+            doRemoveDomain(index) {
-                if (index >= this.$parent.$parent.$data.domains.length) return;
-
                 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() {
+                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.resetDomain(i);
+                            this.doResetDomain(this.$parent.$parent.$data.domains[i]);
                         }
                     },
+                );
+            },
             removeDomains() {
+                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.removeDomain(i);
+                            this.doRemoveDomain(i);
                         }
                     },
+                );
+            },
+            select(event) {
+                event.target.setSelectionRange(0, event.target.value.length);
+            },
         },
     };
 </script>