Prevent modal close when settings have changed

client/src/ui/components/bd/modals/SettingsModal.vue

@@ -10,7 +10,7 @@
 
 <template>
     <div class="bd-settings-modal" :class="{'bd-edited': changed}">
-        <Modal :headerText="modal.headertext" :close="attemptToClose" :class="{'bd-modal-out': modal.closing}">
+        <Modal :headerText="modal.headertext" :close="modal.close" :class="{'bd-modal-out': modal.closing}">
             <SettingsPanel :settings="configCache" :schemes="modal.schemes" :change="settingChange" slot="body" class="bd-settings-modal-body" />
             <div slot="footer" class="bd-footer-alert" :class="{'bd-active': changed, 'bd-warn': warnclose}">
                 <div class="bd-footer-alert-text">Unsaved changes</div>
@@ -91,19 +91,15 @@
                 this.configCache = JSON.parse(JSON.stringify(this.modal.settings));
                 this.changed = false;
                 this.$forceUpdate();
-            },
-            attemptToClose(e) {
-                if (!this.changed) {
-                    this.closing = true;
-                    setTimeout(() => {
-                        this.modal.close();
-                    }, 200);
-                    return;
             }
+        },
+        created() {
+            this.modal.beforeClose = () => {
+                if (this.changed) {
                     this.warnclose = true;
-                setTimeout(() => {
-                    this.warnclose = false;
-                }, 400);
+                    setTimeout(() => this.warnclose = false, 400);
+                    return true;
+                }
             }
         },
         beforeMount() {

client/src/ui/modals.js

@@ -32,7 +32,16 @@ export default class {
     }
 
     static close(modal) {
-        return new Promise((resolve, reject) => {
+        return new Promise(async (resolve, reject) => {
+            if (modal.beforeClose) {
+                let beforeCloseResult = modal.beforeClose();
+                if (beforeCloseResult instanceof Promise)
+                    beforeCloseResult = await beforeCloseResult;
+
+                if (beforeCloseResult)
+                    return reject(beforeCloseResult);
+            }
+
             modal.closing = true;
             setTimeout(() => {
                 this._stack = this.stack.filter(m => m !== modal);