Improve busy state

frontend/index.html

@@ -28,7 +28,7 @@
     <el-button id="logoutButton" size="small" v-show="user" @click="logout()">Logout</el-button>
   </header>
 
-  <el-dialog title="Settings" :visible.sync="settings.visible" width="30%" :close-on-click-modal="false">
+  <el-dialog title="Settings" :visible.sync="settings.visible" width="30%">
     <el-form ref="form" :model="settings.data" label-position="left" label-width="120px" size="small">
       <el-form-item label="Network Address">
         <el-input v-model="settings.data.networkAddress"></el-input>
@@ -42,7 +42,7 @@
     </el-form>
   <span slot="footer" class="dialog-footer">
     <el-button size="small" @click="onSettingsClose()">Cancel</el-button>
-    <el-button size="small" type="primary" @click="onSettingsSave()">Save and Restart</el-button>
+    <el-button size="small" type="primary" @click="onSettingsSave()" :loading="settings.busy">Save and Restart</el-button>
   </span>
 </el-dialog>
 

frontend/js/app.js

@@ -15,8 +15,9 @@ window.app = new Vue({
         loginForm: {username: '', password: ''},
         connectedClients: {},
         settings: {
-        visible: false,
-            data: {}
+          busy: false,
+          visible: false,
+          data: {}
         }
     },
     computed: {
@@ -200,14 +201,15 @@ window.app = new Vue({
             }
             if (error) return console.error(error)
 
-                console.log(result.body.settings)
-
             this.settings.data = result.body.settings
           })
       },
       onSettingsSave () {
+        this.settings.busy = true;
+
         superagent.post('/api/settings', { settings: this.settings.data })
           .end((error, result) => {
+            this.settings.busy = false;
             if (result && result.statusCode === 401) {
               this.$nextTick(() => this.$refs.passwordInput.focus())
               return