move mitm controls to devices page

src/_helpers/util.js

@@ -187,15 +187,17 @@ export const util = {
         }
     },
 
-    checkLoading: function(loadingObject) {
+    checkLoading: function(loadingObject, store) {
         return function() {
             for (const key in loadingObject) {
                 if (loadingObject.hasOwnProperty(key)) {
                     if (loadingObject[key] === true) {
+                        // console.log('checkLoading('+store+'): returning true because key='+key+' was true');
                         return true;
                     }
                 }
             }
+            // console.log('checkLoading('+store+'): returning false');
             return false;
         };
     },

src/_store/accountPlans.module.js

@@ -81,7 +81,7 @@ const mutations = {
 };
 
 const getters = {
-    loading: util.checkLoading(state.loading)
+    loading: util.checkLoading(state.loading, 'accountPlans')
 };
 
 export const accountPlans = {

src/_store/apps.module.js

@@ -212,10 +212,12 @@ const mutations = {
         state.loading.getMitmStatus = true;
     },
     getMitmStatusSuccess(state, enabled) {
+        console.log('getMitmStatusSuccess: enabled='+enabled);
         state.loading.getMitmStatus = false;
         state.mitmEnabled = enabled;
     },
     getMitmStatusFailure(state, error) {
+        console.log('getMitmStatusFailure: error='+error);
         state.loading.getMitmStatus = false;
         state.error = error;
     },
@@ -424,7 +426,7 @@ const mutations = {
 };
 
 const getters = {
-    loading: util.checkLoading(state.loading)
+    loading: util.checkLoading(state.loading, 'apps')
 };
 
 export const apps = {

src/_store/bills.module.js

@@ -55,7 +55,7 @@ const mutations = {
 };
 
 const getters = {
-    loading: util.checkLoading(state.loading)
+    loading: util.checkLoading(state.loading, 'bills')
 };
 
 export const bills = {

src/_store/devices.module.js

@@ -135,7 +135,7 @@ const mutations = {
 };
 
 const getters = {
-    loading: util.checkLoading(state.loading)
+    loading: util.checkLoading(state.loading, 'devices')
 };
 
 export const devices = {

src/_store/domains.module.js

@@ -56,7 +56,7 @@ const mutations = {
 };
 
 const getters = {
-    loading: util.checkLoading(state.loading)
+    loading: util.checkLoading(state.loading, 'domains')
 };
 
 export const domains = {

src/_store/footprints.module.js

@@ -54,7 +54,7 @@ const mutations = {
 };
 
 const getters = {
-    loading: util.checkLoading(state.loading)
+    loading: util.checkLoading(state.loading, 'footprints')
 };
 
 export const footprints = {

src/_store/networks.module.js

@@ -263,7 +263,7 @@ const mutations = {
 };
 
 const getters = {
-    loading: util.checkLoading(state.loading)
+    loading: util.checkLoading(state.loading, 'networks')
 };
 
 export const networks = {

src/_store/paymentMethods.module.js

@@ -217,7 +217,7 @@ const mutations = {
 };
 
 const getters = {
-    loading: util.checkLoading(state.loading)
+    loading: util.checkLoading(state.loading, 'paymentMethods')
 };
 
 export const paymentMethods = {

src/_store/plans.module.js

@@ -54,7 +54,7 @@ const mutations = {
 };
 
 const getters = {
-    loading: util.checkLoading(state.loading)
+    loading: util.checkLoading(state.loading, 'plans')
 };
 
 export const plans = {

src/_store/users.module.js

@@ -375,7 +375,7 @@ const mutations = {
 };
 
 const getters = {
-    loading: util.checkLoading(state.loading)
+    loading: util.checkLoading(state.loading, 'users')
 };
 
 export const users = {

src/account/AppsPage.vue

@@ -1,29 +1,11 @@
 <template>
     <div>
-        <div v-if="user && user.admin">
-            <h3>{{messages.form_title_mitm}}: {{mitmEnabled ? messages.message_mitm_enabled : messages.message_mitm_disabled}}</h3>
-            <button v-if="mitmEnabled" :disabled="loading()" @click="mitmOff()">{{messages.button_label_mitm_disable}}</button>
-            <button v-else :disabled="loading()" @click="mitmOn()">{{messages.button_label_mitm_enable}}</button>
-            <div v-if="errors.has('mitm')" class="invalid-feedback d-block">{{ errors.first('mitm') }}</div>
-            <hr/>
-        </div>
-
-        <div>
-            <h4>{{messages.message_download_ca_cert}}</h4>
-            <a href="/api/auth/cacert?type=pem">{{messages.message_os_apple}}</a> |
-            <a href="/api/auth/cacert?type=p12">{{messages.message_os_windows}}</a> |
-            <a href="/api/auth/cacert?type=cer">{{messages.message_os_android}}</a> |
-            <a href="/api/auth/cacert?type=crt">{{messages.message_os_linux}}</a>
-            <hr/>
-        </div>
-
         <em v-if="loading()">{{messages.loading_apps}}</em>
         <div v-if="apps && apps.length > 0">
 
-            <h2>{{messages.table_title_apps}}</h2>
+<!--            <h2>{{messages.table_title_apps}}</h2>-->
 
             <div v-for="app in apps">
-                <hr/>
                 <router-link :to="{ path: '/app/'+ app.name }"><h3><img width="64" v-if="icons && icons[app.name]" :src="icons[app.name]"/>{{messages['app_'+app.name+'_name']}}</h3></router-link>
                 <div v-if="messages['!app_'+app.name+'_summary']"><h5>{{messages['app_'+app.name+'_summary']}}</h5></div>
                 <p>{{messages['app_'+app.name+'_description']}}</p>
@@ -32,6 +14,7 @@
                     <button v-if="app.enabled" @click="disableApp(app.name)">{{messages.button_label_app_disable}}</button>
                     <button v-else @click="enableApp(app.name)">{{messages.button_label_app_enable}}</button>
                 </div>
+                <hr/>
             </div>
 
         </div>
@@ -56,11 +39,6 @@
             ...mapState('system', ['messages'])
         },
         created () {
-            this.getMitmStatus({
-                userId: this.user.uuid,
-                messages: this.messages,
-                errors: this.errors
-            });
             this.getAppsByUserId({
                 userId: this.user.uuid,
                 messages: this.messages,
@@ -68,27 +46,8 @@
             });
         },
         methods: {
-            ...mapActions('apps', [
-                'getMitmStatus', 'enableMitm', 'disableMitm',
-                'getAppsByUserId', 'enableAppByUserId', 'disableAppByUserId'
-            ]),
+            ...mapActions('apps', ['getAppsByUserId', 'enableAppByUserId', 'disableAppByUserId']),
             ...mapGetters('apps', ['loading']),
-            mitmOn () {
-                this.errors.clear();
-                this.enableMitm({
-                    userId: this.user.uuid,
-                    messages: this.messages,
-                    errors: this.errors
-                });
-            },
-            mitmOff () {
-                this.errors.clear();
-                this.disableMitm({
-                    userId: this.user.uuid,
-                    messages: this.messages,
-                    errors: this.errors
-                });
-            },
             enableApp (appId) {
                 this.errors.clear();
                 this.enableAppByUserId({
@@ -110,7 +69,7 @@
         },
         watch: {
             app (a) {
-                // app was enable/disabled, refresh apps
+                // app was enabled/disabled, refresh apps
                 this.getAppsByUserId({
                     userId: this.user.uuid,
                     messages: this.messages,

src/account/DevicesPage.vue

@@ -49,10 +49,6 @@
             </table>
         </div>
 
-        <div v-if="!devices || devices.length === 0">
-            {{messages.message_no_devices}}
-        </div>
-
         <hr/>
 
         <form @submit.prevent="addDevice()">
@@ -67,11 +63,30 @@
 
             <hr/>
             <div class="form-group">
-                <button class="btn btn-primary" :disabled="loading()">{{messages.button_label_add_device}}</button>
-                <img v-show="loading()" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <button class="btn btn-primary" :disabled="loading">{{messages.button_label_add_device}}</button>
+                <img v-show="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
             </div>
         </form>
 
+        <hr/>
+
+        <div>
+            <h4>{{messages.message_download_ca_cert}}</h4>
+            <a href="/api/auth/cacert?type=pem">{{messages.message_os_apple}}</a> |
+            <a href="/api/auth/cacert?type=p12">{{messages.message_os_windows}}</a> |
+            <a href="/api/auth/cacert?type=cer">{{messages.message_os_android}}</a> |
+            <a href="/api/auth/cacert?type=crt">{{messages.message_os_linux}}</a>
+            <hr/>
+        </div>
+
+        <div v-if="user && user.admin">
+            <h4>{{messages.form_title_mitm}}: {{mitmEnabled ? messages.message_mitm_enabled : messages.message_mitm_disabled}}</h4>
+            <button v-if="mitmEnabled" :disabled="mitmLoading" @click="mitmOff()">{{messages.button_label_mitm_disable}}</button>
+            <button v-else :disabled="mitmLoading" @click="mitmOn()">{{messages.button_label_mitm_enable}}</button>
+            <div v-if="errors.has('mitm')" class="invalid-feedback d-block">{{ errors.first('mitm') }}</div>
+            <hr/>
+        </div>
+
     </div>
 </template>
 
@@ -83,18 +98,27 @@
     export default {
         data () {
             return {
+                user: util.currentUser(),
                 userId: util.currentUser().uuid,
                 submitted: false,
                 deviceName: null,
                 displayVpnConfig: {},
-                config: config
+                config: config,
+                mitmLoading: true
             };
         },
         computed: {
+            ...mapState('apps', ['mitmEnabled']),
             ...mapState('devices', ['devices', 'device', 'qrCodeImageBase64', 'vpnConfBase64']),
-            ...mapState('system', ['messages'])
+            ...mapState('system', ['messages']),
+            ...mapGetters('devices', ['loading'])
         },
         created () {
+            this.getMitmStatus({
+                userId: this.userId,
+                messages: this.messages,
+                errors: this.errors
+            });
             this.getDevicesByUserId({
                 userId: this.userId,
                 messages: this.messages,
@@ -102,11 +126,11 @@
             });
         },
         methods: {
+            ...mapActions('apps', ['getMitmStatus', 'enableMitm', 'disableMitm']),
             ...mapActions('devices', [
                 'getDevicesByUserId', 'addDeviceByUserId', 'removeDeviceByUserId',
                 'getDeviceQRcodeById', 'getDeviceVPNconfById'
             ]),
-            ...mapGetters('devices', ['loading']),
             addDevice () {
                 this.errors.clear();
                 this.submitted = true;
@@ -156,6 +180,24 @@
                 document.body.appendChild(link);
                 link.click();
                 document.body.removeChild(link);
+            },
+            mitmOn () {
+                this.mitmLoading = true;
+                this.errors.clear();
+                this.enableMitm({
+                    userId: this.user.uuid,
+                    messages: this.messages,
+                    errors: this.errors
+                });
+            },
+            mitmOff () {
+                this.mitmLoading = true;
+                this.errors.clear();
+                this.disableMitm({
+                    userId: this.user.uuid,
+                    messages: this.messages,
+                    errors: this.errors
+                });
             }
         },
         watch: {
@@ -164,6 +206,9 @@
                     // after device added, clear device name field
                     this.deviceName = null;
                 }
+            },
+            mitmEnabled (m) {
+                this.mitmLoading = false;
             }
         }
     };