From 2440369310c67eacd55d00bd634d243e8acf4b18 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Mon, 2 Nov 2020 22:06:18 +0800
Subject: [PATCH] code refactor

---
 src/mobile-main.js                       | 14 ++++++
 src/views/mobile/Login.vue               | 34 ++++++-------
 src/views/mobile/Settings.vue            | 21 +++-----
 src/views/mobile/Signup.vue              | 23 ++++-----
 src/views/mobile/users/SessionList.vue   | 13 +++--
 src/views/mobile/users/TwoFactorAuth.vue | 63 ++++++++++++++----------
 src/views/mobile/users/UserProfile.vue   | 30 +++++------
 7 files changed, 103 insertions(+), 95 deletions(-)

diff --git a/src/mobile-main.js b/src/mobile-main.js
index 75d98f34..bfae5bbe 100644
--- a/src/mobile-main.js
+++ b/src/mobile-main.js
@@ -99,6 +99,20 @@ Vue.prototype.$toast = function (message, timeout) {
         closeTimeout: timeout || 1500
     }).open();
 };
+Vue.prototype.$showLoading = function (delayConditionFunc, delayMills) {
+    if (!delayConditionFunc) {
+        return this.$f7.preloader.show();
+    }
+
+    setTimeout(() => {
+        if (delayConditionFunc()) {
+            this.$f7.preloader.show();
+        }
+    }, delayMills || 200);
+};
+Vue.prototype.$hideLoading = function () {
+    return this.$f7.preloader.hide();
+};
 
 Vue.prototype.$services = services;
 Vue.prototype.$user = userstate;
diff --git a/src/views/mobile/Login.vue b/src/views/mobile/Login.vue
index 854b85e9..bcd4bc94 100644
--- a/src/views/mobile/Login.vue
+++ b/src/views/mobile/Login.vue
@@ -20,7 +20,7 @@
             ></f7-list-input>
         </f7-list>
         <f7-list>
-            <f7-list-button :class="{ 'disabled': inputIsEmpty }" :text="$t('Log In')" @click="login"></f7-list-button>
+            <f7-list-button :class="{ 'disabled': inputIsEmpty || logining }" :text="$t('Log In')" @click="login"></f7-list-button>
             <f7-block-footer>
                 <span v-t="'Don\'t have an account?'"></span>&nbsp;
                 <f7-link :class="{'disabled': !isUserRegistrationEnabled}" href="/signup" :text="$t('Create an account')"></f7-link>
@@ -79,7 +79,7 @@
                             @input="backupCode = $event.target.value"
                         ></f7-list-input>
                     </f7-list>
-                    <f7-button large fill :class="{ 'disabled': twoFAInputIsEmpty }" :text="$t('Verify')" @click="verify"></f7-button>
+                    <f7-button large fill :class="{ 'disabled': twoFAInputIsEmpty || verifying }" :text="$t('Verify')" @click="verify"></f7-button>
                     <div class="margin-top text-align-center">
                         <f7-link @click="switch2FAVerifyType" :text="$t(twoFAVerifyTypeSwitchName)"></f7-link>
                     </div>
@@ -100,6 +100,8 @@ export default {
             passcode: '',
             backupCode: '',
             tempToken: '',
+            logining: false,
+            verifying: false,
             show2faSheet: false,
             twoFAVerifyType: 'passcode',
             twoFAVerifyTypeSwitchName: 'Use a backup code',
@@ -137,7 +139,6 @@ export default {
     methods: {
         login() {
             const self = this;
-            const app = self.$f7;
             const router = self.$f7router;
 
             if (!this.username) {
@@ -155,20 +156,15 @@ export default {
                 return;
             }
 
-            let hasResponse = false;
-
-            setTimeout(() => {
-                if (!hasResponse) {
-                    app.preloader.show();
-                }
-            }, 200);
+            self.logining = true;
+            self.$showLoading(() => self.logining);
 
             self.$services.authorize({
                 loginName: self.username,
                 password: self.password
             }).then(response => {
-                hasResponse = true;
-                app.preloader.hide();
+                self.logining = false;
+                self.$hideLoading();
                 const data = response.data;
 
                 if (!data || !data.success || !data.result || !data.result.token) {
@@ -185,8 +181,8 @@ export default {
                 self.$user.updateToken(data.result);
                 router.navigate('/');
             }).catch(error => {
-                hasResponse = true;
-                app.preloader.hide();
+                self.logining = false;
+                self.$hideLoading();
 
                 if (error && error.processed) {
                     return;
@@ -201,7 +197,6 @@ export default {
         },
         verify() {
             const self = this;
-            const app = self.$f7;
             const router = self.$f7router;
 
             if (this.twoFAVerifyType === 'passcode' && !this.passcode) {
@@ -212,7 +207,8 @@ export default {
                 return;
             }
 
-            app.preloader.show();
+            self.verifying = true;
+            self.$showLoading(() => self.verifying);
 
             let promise = null;
 
@@ -229,7 +225,8 @@ export default {
             }
 
             promise.then(response => {
-                app.preloader.hide();
+                self.verifying = false;
+                self.$hideLoading();
                 const data = response.data;
 
                 if (!data || !data.success || !data.result || !data.result.token) {
@@ -241,7 +238,8 @@ export default {
                 self.show2faSheet = false;
                 router.navigate('/');
             }).catch(error => {
-                app.preloader.hide();
+                self.verifying = false;
+                self.$hideLoading();
 
                 if (error.response && error.response.data && error.response.data.errorMessage) {
                     self.$alert({ error: error.response.data });
diff --git a/src/views/mobile/Settings.vue b/src/views/mobile/Settings.vue
index d3d8f329..6ada80b0 100644
--- a/src/views/mobile/Settings.vue
+++ b/src/views/mobile/Settings.vue
@@ -6,7 +6,7 @@
             <f7-list-item :title="$t('User Profile')" link="/user/profile"></f7-list-item>
             <f7-list-item :title="$t('Two-Factor Authentication')" link="/user/2fa"></f7-list-item>
             <f7-list-item :title="$t('Device & Sessions')" link="/user/sessions"></f7-list-item>
-            <f7-list-button @click="logout">{{ $t('Log Out') }}</f7-list-button>
+            <f7-list-button :class="{ 'disabled': logouting }" @click="logout">{{ $t('Log Out') }}</f7-list-button>
         </f7-list>
         <f7-block-title>{{ $t('Application') }}</f7-block-title>
         <f7-list>
@@ -38,6 +38,7 @@ export default {
         const self = this;
 
         return {
+            logouting: false,
             allLanguages: self.$getAllLanguages()
         };
     },
@@ -82,21 +83,15 @@ export default {
     methods: {
         logout() {
             const self = this;
-            const app = self.$f7;
             const router = self.$f7router;
 
             self.$confirm('Are you sure you want to log out?', () => {
-                let hasResponse = false;
-
-                setTimeout(() => {
-                    if (!hasResponse) {
-                        app.preloader.show();
-                    }
-                }, 200);
+                self.logouting = true;
+                self.$showLoading(() => self.logouting);
 
                 self.$services.logout().then(response => {
-                    hasResponse = true;
-                    app.preloader.hide();
+                    self.logouting = false;
+                    self.$hideLoading();
                     const data = response.data;
 
                     if (!data || !data.success || !data.result) {
@@ -107,8 +102,8 @@ export default {
                     self.$user.clearToken();
                     router.navigate('/');
                 }).catch(error => {
-                    hasResponse = true;
-                    app.preloader.hide();
+                    self.logouting = false;
+                    self.$hideLoading();
 
                     if (error && error.processed) {
                         return;
diff --git a/src/views/mobile/Signup.vue b/src/views/mobile/Signup.vue
index 8c43574e..d0f9feee 100644
--- a/src/views/mobile/Signup.vue
+++ b/src/views/mobile/Signup.vue
@@ -50,7 +50,7 @@
             <f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
         </f7-list>
 
-        <f7-button large fill :class="{ 'disabled': inputIsEmpty }" :text="$t('Sign Up')" @click="signup"></f7-button>
+        <f7-button large fill :class="{ 'disabled': inputIsEmpty || signuping }" :text="$t('Sign Up')" @click="signup"></f7-button>
     </f7-page>
 </template>
 
@@ -62,7 +62,8 @@ export default {
             password: '',
             confirmPassword: '',
             email: '',
-            nickname: ''
+            nickname: '',
+            signuping: false
         };
     },
     computed: {
@@ -98,7 +99,6 @@ export default {
     methods: {
         signup() {
             const self = this;
-            const app = self.$f7;
             const router = self.$f7router;
 
             let problemMessage = self.inputEmptyProblemMessage || self.inputInvalidProblemMessage;
@@ -108,13 +108,8 @@ export default {
                 return;
             }
 
-            let hasResponse = false;
-
-            setTimeout(() => {
-                if (!hasResponse) {
-                    app.preloader.show();
-                }
-            }, 200);
+            self.signuping = true;
+            self.$showLoading(() => self.signuping);
 
             self.$services.register({
                 username: self.username,
@@ -122,8 +117,8 @@ export default {
                 email: self.email,
                 nickname: self.nickname
             }).then(response => {
-                hasResponse = true;
-                app.preloader.hide();
+                self.signuping = false;
+                self.$hideLoading();
                 const data = response.data;
 
                 if (!data || !data.success || !data.result) {
@@ -138,8 +133,8 @@ export default {
                 self.$toast('You have been successfully registered');
                 router.navigate('/');
             }).catch(error => {
-                hasResponse = true;
-                app.preloader.hide();
+                self.signuping = false;
+                self.$hideLoading();
 
                 if (error.response && error.response.data && error.response.data.errorMessage) {
                     self.$alert({ error: error.response.data });
diff --git a/src/views/mobile/users/SessionList.vue b/src/views/mobile/users/SessionList.vue
index 304c5831..9c4ccfd4 100644
--- a/src/views/mobile/users/SessionList.vue
+++ b/src/views/mobile/users/SessionList.vue
@@ -21,13 +21,12 @@ export default {
     },
     created() {
         const self = this;
-        const app = self.$f7;
         const router = self.$f7router;
 
-        app.preloader.show();
+        self.$showLoading();
 
         self.$services.getTokens().then(response => {
-            app.preloader.hide();
+            self.$hideLoading();
             const data = response.data;
 
             if (!data || !data.success || !data.result) {
@@ -39,7 +38,7 @@ export default {
 
             self.tokens = data.result;
         }).catch(error => {
-            app.preloader.hide();
+            self.$hideLoading();
 
             if (error.response && error.response.data && error.response.data.errorMessage) {
                 self.$alert({ error: error.response.data }, () => {
@@ -59,12 +58,12 @@ export default {
             const $$ = app.$;
 
             self.$confirm('Are you sure you want to logout from this session?', () => {
-                app.preloader.show();
+                self.$showLoading();
 
                 self.$services.revokeToken({
                     tokenId: token.tokenId
                 }).then(response => {
-                    app.preloader.hide();
+                    self.$hideLoading();
                     const data = response.data;
 
                     if (!data || !data.success || !data.result) {
@@ -80,7 +79,7 @@ export default {
                         }
                     });
                 }).catch(error => {
-                    app.preloader.hide();
+                    self.$hideLoading();
 
                     if (error.response && error.response.data && error.response.data.errorMessage) {
                         self.$alert({error: error.response.data});
diff --git a/src/views/mobile/users/TwoFactorAuth.vue b/src/views/mobile/users/TwoFactorAuth.vue
index 27e33092..7f9b9eff 100644
--- a/src/views/mobile/users/TwoFactorAuth.vue
+++ b/src/views/mobile/users/TwoFactorAuth.vue
@@ -4,13 +4,13 @@
 
         <f7-list v-if="status === true">
             <f7-list-item :title="$t('Status')" :after="$t('Enabled')"></f7-list-item>
-            <f7-list-button @click="regenerateBackupCode(null)">{{ $t('Regenerate Backup Codes') }}</f7-list-button>
-            <f7-list-button @click="disable(null)">{{ $t('Disable') }}</f7-list-button>
+            <f7-list-button :class="{ 'disabled': regenerating }" @click="regenerateBackupCode(null)">{{ $t('Regenerate Backup Codes') }}</f7-list-button>
+            <f7-list-button :class="{ 'disabled': disabling }" @click="disable(null)">{{ $t('Disable') }}</f7-list-button>
         </f7-list>
 
         <f7-list v-else-if="status === false">
             <f7-list-item :title="$t('Status')" :after="$t('Disabled')"></f7-list-item>
-            <f7-list-button @click="enable">{{ $t('Enable') }}</f7-list-button>
+            <f7-list-button :class="{ 'disabled': enabling }" @click="enable">{{ $t('Enable') }}</f7-list-button>
         </f7-list>
 
         <f7-sheet
@@ -38,7 +38,7 @@
                     </f7-list>
                     <f7-button large fill :class="{ 'disabled': !currentPasscodeForEnable }" :text="$t('Continue')" @click="enableConfirm"></f7-button>
                     <div class="margin-top text-align-center">
-                        <f7-link @click="showInputPasscodeSheetForEnable = false" :text="$t('Cancel')"></f7-link>
+                        <f7-link :class="{ 'disabled': enableConfirming }" @click="showInputPasscodeSheetForEnable = false" :text="$t('Cancel')"></f7-link>
                     </div>
                 </div>
             </div>
@@ -66,7 +66,7 @@
                     </f7-list>
                     <f7-button large fill :class="{ 'disabled': !currentPasswordForDisable }" :text="$t('Continue')" @click="disable(currentPasswordForDisable)"></f7-button>
                     <div class="margin-top text-align-center">
-                        <f7-link @click="showInputPasswordSheetForDisable = false" :text="$t('Cancel')"></f7-link>
+                        <f7-link :class="{ 'disabled': disabling }" @click="showInputPasswordSheetForDisable = false" :text="$t('Cancel')"></f7-link>
                     </div>
                 </div>
             </div>
@@ -94,7 +94,7 @@
                     </f7-list>
                     <f7-button large fill :class="{ 'disabled': !currentPasswordForRegenerate }" :text="$t('Continue')" @click="regenerateBackupCode(currentPasswordForRegenerate)"></f7-button>
                     <div class="margin-top text-align-center">
-                        <f7-link @click="showInputPasswordSheetForRegenerate = false" :text="$t('Cancel')"></f7-link>
+                        <f7-link :class="{ 'disabled': regenerating }" @click="showInputPasswordSheetForRegenerate = false" :text="$t('Cancel')"></f7-link>
                     </div>
                 </div>
             </div>
@@ -135,6 +135,10 @@ export default {
             currentPasswordForDisable: '',
             currentPasswordForRegenerate: '',
             currentBackupCode: '',
+            enabling: false,
+            enableConfirming: false,
+            disabling: false,
+            regenerating: false,
             showInputPasscodeSheetForEnable: false,
             showInputPasswordSheetForDisable: false,
             showInputPasswordSheetForRegenerate: false,
@@ -143,13 +147,12 @@ export default {
     },
     created() {
         const self = this;
-        const app = self.$f7;
         const router = self.$f7router;
 
-        app.preloader.show();
+        self.$showLoading();
 
         self.$services.get2FAStatus().then(response => {
-            app.preloader.hide();
+            self.$hideLoading();
             const data = response.data;
 
             if (!data || !data.success || !data.result || typeof(data.result.enable) !== 'boolean') {
@@ -161,7 +164,7 @@ export default {
 
             self.status = data.result.enable;
         }).catch(error => {
-            app.preloader.hide();
+            self.$hideLoading();
 
             if (error.response && error.response.data && error.response.data.errorMessage) {
                 self.$alert({ error: error.response.data }, () => {
@@ -177,15 +180,16 @@ export default {
     methods: {
         enable() {
             const self = this;
-            const app = self.$f7;
 
             self.new2FAQRCode = '';
             self.new2FASecret = '';
 
-            app.preloader.show();
+            self.enabling = true;
+            self.$showLoading(() => self.enabling);
 
             self.$services.enable2FA().then(response => {
-                app.preloader.hide();
+                self.enabling = false;
+                self.$hideLoading();
                 const data = response.data;
 
                 if (!data || !data.success || !data.result || !data.result.qrcode || !data.result.secret) {
@@ -198,7 +202,8 @@ export default {
 
                 self.showInputPasscodeSheetForEnable = true;
             }).catch(error => {
-                app.preloader.hide();
+                self.enabling = false;
+                self.$hideLoading();
 
                 if (error.response && error.response.data && error.response.data.errorMessage) {
                     self.$alert({error: error.response.data});
@@ -209,13 +214,16 @@ export default {
         },
         enableConfirm() {
             const self = this;
-            const app = self.$f7;
+
+            self.enableConfirming = true;
+            self.$showLoading(() => self.enableConfirming);
 
             self.$services.confirmEnable2FA({
                 secret: self.new2FASecret,
                 passcode: self.currentPasscodeForEnable
             }).then(response => {
-                app.preloader.hide();
+                self.enableConfirming = false;
+                self.$hideLoading();
                 const data = response.data;
 
                 if (!data || !data.success || !data.result || !data.result.token) {
@@ -236,7 +244,8 @@ export default {
                     self.showBackupCodeSheet = true;
                 }
             }).catch(error => {
-                app.preloader.hide();
+                self.enableConfirming = false;
+                self.$hideLoading();
 
                 if (error.response && error.response.data && error.response.data.errorMessage) {
                     self.$alert({error: error.response.data});
@@ -247,7 +256,6 @@ export default {
         },
         disable(password) {
             const self = this;
-            const app = self.$f7;
 
             if (!password) {
                 self.currentPasswordForDisable = '';
@@ -255,12 +263,14 @@ export default {
                 return;
             }
 
-            app.preloader.show();
+            self.disabling = true;
+            self.$showLoading(() => self.disabling);
 
             self.$services.disable2FA({
                 password: password
             }).then(response => {
-                app.preloader.hide();
+                self.disabling = false;
+                self.$hideLoading();
                 const data = response.data;
 
                 if (!data || !data.success || !data.result) {
@@ -272,7 +282,8 @@ export default {
                 self.showInputPasswordSheetForDisable = false;
                 self.$toast('Two factor authentication has been disabled');
             }).catch(error => {
-                app.preloader.hide();
+                self.disabling = false;
+                self.$hideLoading();
 
                 if (error.response && error.response.data && error.response.data.errorMessage) {
                     self.$alert({error: error.response.data});
@@ -283,7 +294,6 @@ export default {
         },
         regenerateBackupCode(password) {
             const self = this;
-            const app = self.$f7;
 
             if (!password) {
                 self.currentPasswordForRegenerate = '';
@@ -291,12 +301,14 @@ export default {
                 return;
             }
 
-            app.preloader.show();
+            self.regenerating = true;
+            self.$showLoading(() => self.regenerating);
 
             self.$services.regenerate2FARecoveryCode({
                 password: password
             }).then(response => {
-                app.preloader.hide();
+                self.regenerating = false;
+                self.$hideLoading();
                 const data = response.data;
 
                 if (!data || !data.success || !data.result || !data.result.recoveryCodes || !data.result.recoveryCodes.length) {
@@ -309,7 +321,8 @@ export default {
                 self.currentBackupCode = data.result.recoveryCodes.join('\n');
                 self.showBackupCodeSheet = true;
             }).catch(error => {
-                app.preloader.hide();
+                self.regenerating = false;
+                self.$hideLoading();
 
                 if (error.response && error.response.data && error.response.data.errorMessage) {
                     self.$alert({error: error.response.data});
diff --git a/src/views/mobile/users/UserProfile.vue b/src/views/mobile/users/UserProfile.vue
index 555a246a..e102e44f 100644
--- a/src/views/mobile/users/UserProfile.vue
+++ b/src/views/mobile/users/UserProfile.vue
@@ -41,7 +41,7 @@
             <f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
         </f7-list>
 
-        <f7-button large fill :class="{ 'disabled': inputIsNotChanged }" :text="$t('Update')" @click="update"></f7-button>
+        <f7-button large fill :class="{ 'disabled': inputIsNotChanged || updating }" :text="$t('Update')" @click="update"></f7-button>
 
         <f7-sheet
             style="height:auto; --f7-sheet-bg-color: #fff;"
@@ -63,7 +63,7 @@
                             @input="currentPassword = $event.target.value"
                         ></f7-list-input>
                     </f7-list>
-                    <f7-button large fill :class="{ 'disabled': !currentPassword }" :text="$t('Continue')" @click="update"></f7-button>
+                    <f7-button large fill :class="{ 'disabled': !currentPassword || updating }" :text="$t('Continue')" @click="update"></f7-button>
                 </div>
             </div>
         </f7-sheet>
@@ -81,6 +81,7 @@ export default {
             email: '',
             oldNickname: '',
             nickname: '',
+            updating: false,
             showInputPasswordSheet: false
         };
     },
@@ -114,13 +115,12 @@ export default {
     },
     created() {
         const self = this;
-        const app = self.$f7;
         const router = self.$f7router;
 
-        app.preloader.show();
+        self.$showLoading();
 
         self.$services.getProfile().then(response => {
-            app.preloader.hide();
+            self.$hideLoading();
             const data = response.data;
 
             if (!data || !data.success || !data.result) {
@@ -136,7 +136,7 @@ export default {
             self.email = self.oldEmail
             self.nickname = self.oldNickname;
         }).catch(error => {
-            app.preloader.hide();
+            self.$hideLoading();
 
             if (error.response && error.response.data && error.response.data.errorMessage) {
                 self.$alert({ error: error.response.data }, () => {
@@ -152,7 +152,6 @@ export default {
     methods: {
         update() {
             const self = this;
-            const app = self.$f7;
             const router = self.$f7router;
 
             self.showInputPasswordSheet = false;
@@ -169,13 +168,8 @@ export default {
                 return;
             }
 
-            let hasResponse = false;
-
-            setTimeout(() => {
-                if (!hasResponse) {
-                    app.preloader.show();
-                }
-            }, 200);
+            self.updating = true;
+            self.$showLoading(() => self.updating);
 
             self.$services.updateProfile({
                 password: self.password,
@@ -183,8 +177,8 @@ export default {
                 email: self.email,
                 nickname: self.nickname
             }).then(response => {
-                hasResponse = true;
-                app.preloader.hide();
+                self.updating = false;
+                self.$hideLoading();
                 self.currentPassword = '';
 
                 const data = response.data;
@@ -205,8 +199,8 @@ export default {
                 self.$toast('Your profile has been successfully updated');
                 router.back('/settings', { force: true });
             }).catch(error => {
-                hasResponse = true;
-                app.preloader.hide();
+                self.updating = false;
+                self.$hideLoading();
                 self.currentPassword = '';
 
                 if (error.response && error.response.data && error.response.data.errorMessage) {