From 8fa305212a8b58dce8cb881c3eaffe33a8c46094 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Mon, 9 Nov 2020 23:56:11 +0800
Subject: [PATCH] code refactor

---
 src/views/mobile/Login.vue               | 18 +++--
 src/views/mobile/Settings.vue            |  8 +-
 src/views/mobile/Signup.vue              | 68 +++++++++--------
 src/views/mobile/accounts/AccountAdd.vue | 64 ++++++++--------
 src/views/mobile/users/UserProfile.vue   | 94 +++++++++++++-----------
 5 files changed, 138 insertions(+), 114 deletions(-)

diff --git a/src/views/mobile/Login.vue b/src/views/mobile/Login.vue
index 15881561..5e1e8dbc 100644
--- a/src/views/mobile/Login.vue
+++ b/src/views/mobile/Login.vue
@@ -92,8 +92,6 @@
 <script>
 export default {
     data() {
-        const self = this;
-
         return {
             username: '',
             password: '',
@@ -103,15 +101,16 @@ export default {
             logining: false,
             verifying: false,
             show2faSheet: false,
-            twoFAVerifyType: 'passcode',
-            twoFAVerifyTypeSwitchName: 'Use a backup code',
-            allLanguages: self.$getAllLanguages()
+            twoFAVerifyType: 'passcode'
         };
     },
     computed: {
         version() {
             return 'v' + this.$version();
         },
+        allLanguages() {
+            return this.$getAllLanguages();
+        },
         isUserRegistrationEnabled() {
             return this.$isUserRegistrationEnabled();
         },
@@ -125,6 +124,13 @@ export default {
                 return !this.passcode;
             }
         },
+        twoFAVerifyTypeSwitchName() {
+            if (this.twoFAVerifyType === 'backupcode') {
+                return 'Use a passcode';
+            } else {
+                return 'Use a backup code';
+            }
+        },
         currentLanguageName() {
             const currentLocale = this.$i18n.locale;
             let lang = this.$getLanguage(currentLocale);
@@ -251,10 +257,8 @@ export default {
         switch2FAVerifyType() {
             if (this.twoFAVerifyType === 'passcode') {
                 this.twoFAVerifyType = 'backupcode';
-                this.twoFAVerifyTypeSwitchName = 'Use a passcode';
             } else {
                 this.twoFAVerifyType = 'passcode';
-                this.twoFAVerifyTypeSwitchName = 'Use a backup code';
             }
         },
         changeLanguage(locale) {
diff --git a/src/views/mobile/Settings.vue b/src/views/mobile/Settings.vue
index 532c5c14..333b4f88 100644
--- a/src/views/mobile/Settings.vue
+++ b/src/views/mobile/Settings.vue
@@ -44,11 +44,8 @@
 <script>
 export default {
     data() {
-        const self = this;
-
         return {
-            logouting: false,
-            allLanguages: self.$getAllLanguages()
+            logouting: false
         };
     },
     computed: {
@@ -59,6 +56,9 @@ export default {
             const userInfo = this.$user.getUserInfo() || {};
             return userInfo.nickname || userInfo.username || this.$t('User');
         },
+        allLanguages() {
+            return this.$getAllLanguages();
+        },
         currentLocale: {
             get: function () {
                 return this.$i18n.locale;
diff --git a/src/views/mobile/Signup.vue b/src/views/mobile/Signup.vue
index 3e0b6246..e268b9e8 100644
--- a/src/views/mobile/Signup.vue
+++ b/src/views/mobile/Signup.vue
@@ -7,8 +7,8 @@
                 clear-button
                 :label="$t('Username')"
                 :placeholder="$t('Your username')"
-                :value="username"
-                @input="username = $event.target.value"
+                :value="user.username"
+                @input="user.username = $event.target.value"
             ></f7-list-input>
 
             <f7-list-input
@@ -16,8 +16,8 @@
                 clear-button
                 :label="$t('Password')"
                 :placeholder="$t('Your password, at least 6 characters')"
-                :value="password"
-                @input="password = $event.target.value"
+                :value="user.password"
+                @input="user.password = $event.target.value"
             ></f7-list-input>
 
             <f7-list-input
@@ -25,8 +25,8 @@
                 clear-button
                 :label="$t('Confirmation Password')"
                 :placeholder="$t('Re-enter the password')"
-                :value="confirmPassword"
-                @input="confirmPassword = $event.target.value"
+                :value="user.confirmPassword"
+                @input="user.confirmPassword = $event.target.value"
             ></f7-list-input>
 
             <f7-list-input
@@ -34,8 +34,8 @@
                 clear-button
                 :label="$t('E-mail')"
                 :placeholder="$t('Your email address')"
-                :value="email"
-                @input="email = $event.target.value"
+                :value="user.email"
+                @input="user.email = $event.target.value"
             ></f7-list-input>
 
             <f7-list-input
@@ -43,15 +43,15 @@
                 clear-button
                 :label="$t('Nickname')"
                 :placeholder="$t('Your nickname')"
-                :value="nickname"
-                @input="nickname = $event.target.value"
+                :value="user.nickname"
+                @input="user.nickname = $event.target.value"
             ></f7-list-input>
 
             <f7-list-input
                 type="select"
                 :label="$t('Default Currency')"
-                :value="defaultCurrency"
-                @input="defaultCurrency = $event.target.value"
+                :value="user.defaultCurrency"
+                @input="user.defaultCurrency = $event.target.value"
             >
                 <option v-for="currency in allCurrencies"
                         :key="currency.code"
@@ -71,17 +71,21 @@ export default {
         const self = this;
 
         return {
-            username: '',
-            password: '',
-            confirmPassword: '',
-            email: '',
-            nickname: '',
-            defaultCurrency: self.$t('default.currency'),
-            signuping: false,
-            allCurrencies: self.$getAllCurrencies()
+            user: {
+                username: '',
+                password: '',
+                confirmPassword: '',
+                email: '',
+                nickname: '',
+                defaultCurrency: self.$t('default.currency')
+            },
+            signuping: false
         };
     },
     computed: {
+        allCurrencies() {
+            return this.$getAllCurrencies();
+        },
         inputIsEmpty() {
             return !!this.inputEmptyProblemMessage;
         },
@@ -89,24 +93,24 @@ export default {
             return !!this.inputInvalidProblemMessage;
         },
         inputEmptyProblemMessage() {
-            if (!this.username) {
+            if (!this.user.username) {
                 return 'Username cannot be empty';
-            } else if (!this.password) {
+            } else if (!this.user.password) {
                 return 'Password cannot be empty';
-            } else if (!this.confirmPassword) {
+            } else if (!this.user.confirmPassword) {
                 return 'Confirmation password cannot be empty';
-            } else if (!this.email) {
+            } else if (!this.user.email) {
                 return 'Email address cannot be empty';
-            } else if (!this.nickname) {
+            } else if (!this.user.nickname) {
                 return 'Nickname cannot be empty';
-            } else if (!this.defaultCurrency) {
+            } else if (!this.user.defaultCurrency) {
                 return 'Default currency cannot be empty';
             } else {
                 return null;
             }
         },
         inputInvalidProblemMessage() {
-            if (this.password && this.confirmPassword && this.password !== this.confirmPassword) {
+            if (this.user.password && this.user.confirmPassword && this.user.password !== this.user.confirmPassword) {
                 return 'Password and confirmation password do not match';
             } else {
                 return null;
@@ -129,11 +133,11 @@ export default {
             self.$showLoading(() => self.signuping);
 
             self.$services.register({
-                username: self.username,
-                password: self.password,
-                email: self.email,
-                nickname: self.nickname,
-                defaultCurrency: self.defaultCurrency
+                username: self.user.username,
+                password: self.user.password,
+                email: self.user.email,
+                nickname: self.user.nickname,
+                defaultCurrency: self.user.defaultCurrency
             }).then(response => {
                 self.signuping = false;
                 self.$hideLoading();
diff --git a/src/views/mobile/accounts/AccountAdd.vue b/src/views/mobile/accounts/AccountAdd.vue
index b61d092e..8cb8c24d 100644
--- a/src/views/mobile/accounts/AccountAdd.vue
+++ b/src/views/mobile/accounts/AccountAdd.vue
@@ -6,8 +6,8 @@
             <f7-list-input
                 type="select"
                 :label="$t('Account Category')"
-                :value="category"
-                @input="category = $event.target.value"
+                :value="account.category"
+                @input="account.category = $event.target.value"
             >
                 <option v-for="accountCategory in allAccountCategories"
                         :key="accountCategory.id"
@@ -18,8 +18,8 @@
                 type="select"
                 disabled
                 :label="$t('Account Type')"
-                :value="type"
-                @input="type = $event.target.value"
+                :value="account.type"
+                @input="account.type = $event.target.value"
             >
                 <option value="1">{{ $t('Single Account') }}</option>
                 <option value="2">{{ $t('Multi Sub Accounts') }}</option>
@@ -30,15 +30,15 @@
                 clear-button
                 :label="$t('Account Name')"
                 :placeholder="$t('Your account name')"
-                :value="name"
-                @input="name = $event.target.value"
+                :value="account.name"
+                @input="account.name = $event.target.value"
             ></f7-list-input>
 
             <f7-list-input
                 type="select"
                 :label="$t('Currency')"
-                :value="currency"
-                @input="currency = $event.target.value"
+                :value="account.currency"
+                @input="account.currency = $event.target.value"
             >
                 <option v-for="currency in allCurrencies"
                         :key="currency.code"
@@ -49,8 +49,8 @@
                 type="textarea"
                 :label="$t('Description')"
                 :placeholder="$t('Your account description (optional)')"
-                :value="comment"
-                @input="comment = $event.target.value"
+                :value="account.comment"
+                @input="account.comment = $event.target.value"
             ></f7-list-input>
 
             <f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
@@ -66,18 +66,24 @@ export default {
         const self = this;
 
         return {
-            category: 1,
-            type: 1,
-            name: '',
-            icon: "1",
-            currency: self.$user.getUserInfo() ? self.$user.getUserInfo().defaultCurrency : self.$t('default.currency'),
-            comment: '',
-            submitting: false,
-            allAccountCategories: self.$constants.account.allCategories,
-            allCurrencies: self.$getAllCurrencies()
+            account: {
+                category: 1,
+                type: 1,
+                name: '',
+                icon: "1",
+                currency: self.$user.getUserInfo() ? self.$user.getUserInfo().defaultCurrency : self.$t('default.currency'),
+                comment: ''
+            },
+            submitting: false
         };
     },
     computed: {
+        allAccountCategories() {
+            return this.$constants.account.allCategories;
+        },
+        allCurrencies() {
+            return this.$getAllCurrencies();
+        },
         inputIsEmpty() {
             return !!this.inputEmptyProblemMessage;
         },
@@ -85,13 +91,13 @@ export default {
             return !!this.inputInvalidProblemMessage;
         },
         inputEmptyProblemMessage() {
-            if (!this.category) {
+            if (!this.account.category) {
                 return 'Account category cannot be empty';
-            } else if (!this.type) {
+            } else if (!this.account.type) {
                 return 'Account type cannot be empty';
-            } else if (!this.name) {
+            } else if (!this.account.name) {
                 return 'Account name cannot be empty';
-            } else if (!this.currency) {
+            } else if (!this.account.currency) {
                 return 'Account currency cannot be empty';
             } else {
                 return null;
@@ -117,12 +123,12 @@ export default {
             self.$showLoading(() => self.signuping);
 
             self.$services.addAccount({
-                category: parseInt(self.category),
-                type: parseInt(self.type),
-                name: self.name,
-                icon: self.icon,
-                currency: self.currency,
-                comment: self.comment
+                category: parseInt(self.account.category),
+                type: parseInt(self.account.type),
+                name: self.account.name,
+                icon: self.account.icon,
+                currency: self.account.currency,
+                comment: self.account.comment
             }).then(response => {
                 self.submitting = false;
                 self.$hideLoading();
diff --git a/src/views/mobile/users/UserProfile.vue b/src/views/mobile/users/UserProfile.vue
index 44bc143e..7e066916 100644
--- a/src/views/mobile/users/UserProfile.vue
+++ b/src/views/mobile/users/UserProfile.vue
@@ -16,8 +16,8 @@
                 clear-button
                 :label="$t('Password')"
                 :placeholder="$t('Your password')"
-                :value="password"
-                @input="password = $event.target.value"
+                :value="newProfile.password"
+                @input="newProfile.password = $event.target.value"
             ></f7-list-input>
 
             <f7-list-input
@@ -25,8 +25,8 @@
                 clear-button
                 :label="$t('Confirmation Password')"
                 :placeholder="$t('Re-enter the password')"
-                :value="confirmPassword"
-                @input="confirmPassword = $event.target.value"
+                :value="newProfile.confirmPassword"
+                @input="newProfile.confirmPassword = $event.target.value"
             ></f7-list-input>
 
             <f7-list-input
@@ -34,8 +34,8 @@
                 clear-button
                 :label="$t('E-mail')"
                 :placeholder="$t('Your email address')"
-                :value="email"
-                @input="email = $event.target.value"
+                :value="newProfile.email"
+                @input="newProfile.email = $event.target.value"
             ></f7-list-input>
 
             <f7-list-input
@@ -43,15 +43,15 @@
                 clear-button
                 :label="$t('Nickname')"
                 :placeholder="$t('Your nickname')"
-                :value="nickname"
-                @input="nickname = $event.target.value"
+                :value="newProfile.nickname"
+                @input="newProfile.nickname = $event.target.value"
             ></f7-list-input>
 
             <f7-list-input
                 type="select"
                 :label="$t('Default Currency')"
-                :value="defaultCurrency"
-                @input="defaultCurrency = $event.target.value"
+                :value="newProfile.defaultCurrency"
+                @input="newProfile.defaultCurrency = $event.target.value"
             >
                 <option v-for="currency in allCurrencies"
                         :key="currency.code"
@@ -61,7 +61,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 || updating }" :text="$t('Update')" @click="update"></f7-button>
+        <f7-button large fill :class="{ 'disabled': inputIsNotChanged || inputIsInvalid || updating }" :text="$t('Update')" @click="update"></f7-button>
 
         <f7-sheet
             style="height:auto"
@@ -93,25 +93,29 @@
 <script>
 export default {
     data() {
-        const self = this;
-
         return {
+            newProfile: {
+                password: '',
+                confirmPassword: '',
+                email: '',
+                nickname: '',
+                defaultCurrency: ''
+            },
+            oldProfile: {
+                email: '',
+                nickname: '',
+                defaultCurrency: ''
+            },
             currentPassword: '',
-            password: '',
-            confirmPassword: '',
-            oldEmail: '',
-            email: '',
-            oldNickname: '',
-            nickname: '',
-            defaultCurrency: '',
-            oldDefaultCurrency: '',
             loading: true,
             updating: false,
-            showInputPasswordSheet: false,
-            allCurrencies: self.$getAllCurrencies()
+            showInputPasswordSheet: false
         };
     },
     computed: {
+        allCurrencies() {
+            return this.$getAllCurrencies();
+        },
         inputIsNotChanged() {
             return !!this.inputIsNotChangedProblemMessage;
         },
@@ -119,24 +123,30 @@ export default {
             return !!this.inputInvalidProblemMessage;
         },
         inputIsNotChangedProblemMessage() {
-            if (!this.password && !this.confirmPassword && !this.email && !this.nickname) {
+            if (!this.newProfile.password && !this.newProfile.confirmPassword && !this.newProfile.email && !this.newProfile.nickname) {
                 return 'Nothing has been modified';
-            } else if (!this.password && !this.confirmPassword &&
-                this.email === this.oldEmail &&
-                this.nickname === this.oldNickname &&
-                this.defaultCurrency === this.oldDefaultCurrency) {
+            } else if (!this.newProfile.password && !this.newProfile.confirmPassword &&
+                this.newProfile.email === this.oldProfile.email &&
+                this.newProfile.nickname === this.oldProfile.nickname &&
+                this.newProfile.defaultCurrency === this.oldProfile.defaultCurrency) {
                 return 'Nothing has been modified';
-            } else if (!this.password && this.confirmPassword) {
+            } else if (!this.newProfile.password && this.newProfile.confirmPassword) {
                 return 'Password cannot be empty';
-            } else if (this.password && !this.confirmPassword) {
+            } else if (this.newProfile.password && !this.newProfile.confirmPassword) {
                 return 'Confirmation password cannot be empty';
             } else {
                 return null;
             }
         },
         inputInvalidProblemMessage() {
-            if (this.password && this.confirmPassword && this.password !== this.confirmPassword) {
+            if (this.newProfile.password && this.newProfile.confirmPassword && this.newProfile.password !== this.newProfile.confirmPassword) {
                 return 'Password and confirmation password do not match';
+            } else if (!this.newProfile.email) {
+                return 'Email address cannot be empty';
+            } else if (!this.newProfile.nickname) {
+                return 'Nickname cannot be empty';
+            } else if (!this.newProfile.defaultCurrency) {
+                return 'Default currency cannot be empty';
             } else {
                 return null;
             }
@@ -159,13 +169,13 @@ export default {
                 return;
             }
 
-            self.oldEmail = data.result.email;
-            self.oldNickname = data.result.nickname;
-            self.oldDefaultCurrency = data.result.defaultCurrency;
+            self.oldProfile.email = data.result.email;
+            self.oldProfile.nickname = data.result.nickname;
+            self.oldProfile.defaultCurrency = data.result.defaultCurrency;
 
-            self.email = self.oldEmail
-            self.nickname = self.oldNickname;
-            self.defaultCurrency = self.oldDefaultCurrency;
+            self.newProfile.email = self.oldProfile.email
+            self.newProfile.nickname = self.oldProfile.nickname;
+            self.newProfile.defaultCurrency = self.oldProfile.defaultCurrency;
         }).catch(error => {
             self.loading = false;
 
@@ -194,7 +204,7 @@ export default {
                 return;
             }
 
-            if (self.password && !self.currentPassword) {
+            if (self.newProfile.password && !self.currentPassword) {
                 self.showInputPasswordSheet = true;
                 return;
             }
@@ -203,11 +213,11 @@ export default {
             self.$showLoading(() => self.updating);
 
             self.$services.updateProfile({
-                password: self.password,
+                password: self.newProfile.password,
                 oldPassword: self.currentPassword,
-                email: self.email,
-                nickname: self.nickname,
-                defaultCurrency: self.defaultCurrency
+                email: self.newProfile.email,
+                nickname: self.newProfile.nickname,
+                defaultCurrency: self.newProfile.defaultCurrency
             }).then(response => {
                 self.updating = false;
                 self.$hideLoading();