From 714933df564ba8167a1f9b67a49542e257157db6 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Mon, 17 Jul 2023 23:13:54 +0800
Subject: [PATCH] code refactor

---
 src/lib/i18n.js                            | 13 ++++++++++++-
 src/views/desktop/LoginPage.vue            | 19 +++++--------------
 src/views/desktop/SignupPage.vue           | 17 ++++++-----------
 src/views/desktop/UnlockPage.vue           | 19 +++++--------------
 src/views/mobile/LoginPage.vue             | 14 +++++---------
 src/views/mobile/SettingsPage.vue          |  4 ++--
 src/views/mobile/SignupPage.vue            |  4 ++--
 src/views/mobile/UnlockPage.vue            | 14 +++++---------
 src/views/mobile/categories/PresetPage.vue |  2 +-
 9 files changed, 43 insertions(+), 63 deletions(-)

diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index 3b0384cc..549038e6 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -259,6 +259,10 @@ function getLocaleFromLanguageAlias(alias) {
     return null;
 }
 
+function getCurrentLanguageCode(i18nGlobal) {
+    return i18nGlobal.locale;
+}
+
 function getCurrentLanguageInfo(i18nGlobal) {
     const locale = getLanguageInfo(i18nGlobal.locale);
 
@@ -266,7 +270,12 @@ function getCurrentLanguageInfo(i18nGlobal) {
         return locale;
     }
 
-    return getDefaultLanguage();
+    return getLanguageInfo(getDefaultLanguage());
+}
+
+function getCurrentLanguageDisplayName(i18nGlobal) {
+    const currentLanguageInfo = getCurrentLanguageInfo(i18nGlobal);
+    return currentLanguageInfo.displayName;
 }
 
 function getDefaultCurrency(translateFn) {
@@ -917,7 +926,9 @@ export function i18nFunctions(i18nGlobal) {
         getAllLanguageInfoArray: (includeSystemDefault) => getAllLanguageInfoArray(i18nGlobal.t, includeSystemDefault),
         getLanguageInfo: getLanguageInfo,
         getDefaultLanguage: getDefaultLanguage,
+        getCurrentLanguageCode: () => getCurrentLanguageCode(i18nGlobal),
         getCurrentLanguageInfo: () => getCurrentLanguageInfo(i18nGlobal),
+        getCurrentLanguageDisplayName: () => getCurrentLanguageDisplayName(i18nGlobal),
         getDefaultCurrency: () => getDefaultCurrency(i18nGlobal.t),
         getDefaultFirstDayOfWeek: () => getDefaultFirstDayOfWeek(i18nGlobal.t),
         getCurrencyName: (currencyCode) => getCurrencyName(currencyCode, i18nGlobal.t),
diff --git a/src/views/desktop/LoginPage.vue b/src/views/desktop/LoginPage.vue
index 4fc7eba5..70fdf054 100644
--- a/src/views/desktop/LoginPage.vue
+++ b/src/views/desktop/LoginPage.vue
@@ -8,10 +8,10 @@
         </router-link>
         <v-row no-gutters class="auth-wrapper">
             <v-col cols="12" md="8" class="d-none d-md-flex align-center justify-center position-relative">
-                <div class="d-flex auth-img-footer" v-if="currentTheme !== 'dark'">
+                <div class="d-flex auth-img-footer" v-if="!isDarkMode">
                     <v-img src="img/desktop/background.svg"/>
                 </div>
-                <div class="d-flex auth-img-footer" v-if="currentTheme === 'dark'">
+                <div class="d-flex auth-img-footer" v-if="isDarkMode">
                     <v-img src="img/desktop/background-dark.svg"/>
                 </div>
                 <div class="d-flex align-center justify-center w-100 pt-10">
@@ -221,20 +221,11 @@ export default {
                 return !this.passcode;
             }
         },
-        currentTheme: {
-            get: function () {
-                return this.globalTheme.global.name.value;
-            }
+        isDarkMode() {
+            return this.globalTheme.global.name.value === 'dark';
         },
         currentLanguageName() {
-            const currentLocale = this.$i18n.locale;
-            let lang = this.$locale.getLanguageInfo(currentLocale);
-
-            if (!lang) {
-                lang = this.$locale.getLanguageInfo(this.$locale.getDefaultLanguage());
-            }
-
-            return lang.displayName;
+            return this.$locale.getCurrentLanguageDisplayName();
         }
     },
     setup() {
diff --git a/src/views/desktop/SignupPage.vue b/src/views/desktop/SignupPage.vue
index 46c20251..3e5c521a 100644
--- a/src/views/desktop/SignupPage.vue
+++ b/src/views/desktop/SignupPage.vue
@@ -8,10 +8,10 @@
         </router-link>
         <v-row no-gutters class="auth-wrapper">
             <v-col cols="12" md="4" class="d-none d-md-flex align-center justify-center position-relative">
-                <div class="d-flex auth-img-footer" v-if="currentTheme !== 'dark'">
+                <div class="d-flex auth-img-footer" v-if="!isDarkMode">
                     <v-img src="img/desktop/background.svg"/>
                 </div>
-                <div class="d-flex auth-img-footer" v-if="currentTheme === 'dark'">
+                <div class="d-flex auth-img-footer" v-if="isDarkMode">
                     <v-img src="img/desktop/background-dark.svg"/>
                 </div>
                 <div class="d-flex align-center justify-center w-100 pt-10">
@@ -272,7 +272,7 @@ export default {
                 confirmPassword: '',
                 email: '',
                 nickname: '',
-                language: self.$i18n.locale,
+                language: self.$locale.getCurrentLanguageCode(),
                 defaultCurrency: settingsStore.localeDefaultSettings.currency,
                 firstDayOfWeek: settingsStore.localeDefaultSettings.firstDayOfWeek,
             },
@@ -311,7 +311,7 @@ export default {
         },
         currentLocale: {
             get: function () {
-                return this.$i18n.locale;
+                return this.$locale.getCurrentLanguageCode();
             },
             set: function (value) {
                 const isCurrencyDefault = this.user.defaultCurrency === this.settingsStore.localeDefaultSettings.currency;
@@ -331,10 +331,8 @@ export default {
                 }
             }
         },
-        currentTheme: {
-            get: function () {
-                return this.globalTheme.global.name.value;
-            }
+        isDarkMode() {
+            return this.globalTheme.global.name.value === 'dark';
         },
         currentLanguageName() {
             const languageInfo = this.$locale.getLanguageInfo(this.currentLocale);
@@ -345,9 +343,6 @@ export default {
 
             return languageInfo.displayName;
         },
-        currentDayOfWeekName() {
-            return getNameByKeyValue(this.allWeekDays, this.user.firstDayOfWeek, 'type', 'displayName');
-        },
         inputIsEmpty() {
             return !!this.inputEmptyProblemMessage;
         },
diff --git a/src/views/desktop/UnlockPage.vue b/src/views/desktop/UnlockPage.vue
index 0b5bce2a..9a6e576f 100644
--- a/src/views/desktop/UnlockPage.vue
+++ b/src/views/desktop/UnlockPage.vue
@@ -8,10 +8,10 @@
         </router-link>
         <v-row no-gutters class="auth-wrapper">
             <v-col cols="12" md="8" class="d-none d-md-flex align-center justify-center position-relative">
-                <div class="d-flex auth-img-footer" v-if="currentTheme !== 'dark'">
+                <div class="d-flex auth-img-footer" v-if="!isDarkMode">
                     <v-img src="img/desktop/background.svg"/>
                 </div>
-                <div class="d-flex auth-img-footer" v-if="currentTheme === 'dark'">
+                <div class="d-flex auth-img-footer" v-if="isDarkMode">
                     <v-img src="img/desktop/background-dark.svg"/>
                 </div>
                 <div class="d-flex align-center justify-center w-100 pt-10">
@@ -133,20 +133,11 @@ export default {
                 && this.$user.getWebAuthnCredentialId()
                 && webauthn.isSupported();
         },
-        currentTheme: {
-            get: function () {
-                return this.globalTheme.global.name.value;
-            }
+        isDarkMode() {
+            return this.globalTheme.global.name.value === 'dark';
         },
         currentLanguageName() {
-            const currentLocale = this.$i18n.locale;
-            let lang = this.$locale.getLanguageInfo(currentLocale);
-
-            if (!lang) {
-                lang = this.$locale.getLanguageInfo(this.$locale.getDefaultLanguage());
-            }
-
-            return lang.displayName;
+            return this.$locale.getCurrentLanguageDisplayName();
         }
     },
     setup() {
diff --git a/src/views/mobile/LoginPage.vue b/src/views/mobile/LoginPage.vue
index 004321df..6bc30119 100644
--- a/src/views/mobile/LoginPage.vue
+++ b/src/views/mobile/LoginPage.vue
@@ -70,7 +70,7 @@
                     @click="changeLanguage(locale)"
                 >
                     <template #after>
-                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="$i18n.locale === locale"></f7-icon>
+                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="currentLanguageCode === locale"></f7-icon>
                     </template>
                 </f7-list-item>
             </f7-list>
@@ -183,15 +183,11 @@ export default {
                 return 'Use a backup code';
             }
         },
+        currentLanguageCode() {
+            return this.$locale.getCurrentLanguageCode();
+        },
         currentLanguageName() {
-            const currentLocale = this.$i18n.locale;
-            let lang = this.$locale.getLanguageInfo(currentLocale);
-
-            if (!lang) {
-                lang = this.$locale.getLanguageInfo(this.$locale.getDefaultLanguage());
-            }
-
-            return lang.displayName;
+            return this.$locale.getCurrentLanguageDisplayName();
         }
     },
     methods: {
diff --git a/src/views/mobile/SettingsPage.vue b/src/views/mobile/SettingsPage.vue
index b6fbe7c9..be84cc08 100644
--- a/src/views/mobile/SettingsPage.vue
+++ b/src/views/mobile/SettingsPage.vue
@@ -103,7 +103,7 @@ export default {
         const self = this;
 
         return {
-            currentLocale: self.$i18n.locale,
+            currentLocale: self.$locale.getCurrentLanguageCode(),
             logouting: false
         };
     },
@@ -196,7 +196,7 @@ export default {
     },
     methods: {
         onPageAfterIn() {
-            this.currentLocale = this.$i18n.locale;
+            this.currentLocale = this.$locale.getCurrentLanguageCode();
         },
         logout() {
             const self = this;
diff --git a/src/views/mobile/SignupPage.vue b/src/views/mobile/SignupPage.vue
index 892406c5..df42710b 100644
--- a/src/views/mobile/SignupPage.vue
+++ b/src/views/mobile/SignupPage.vue
@@ -198,7 +198,7 @@ export default {
                 confirmPassword: '',
                 email: '',
                 nickname: '',
-                language: self.$i18n.locale,
+                language: self.$locale.getCurrentLanguageCode(),
                 defaultCurrency: settingsStore.localeDefaultSettings.currency,
                 firstDayOfWeek: settingsStore.localeDefaultSettings.firstDayOfWeek,
             },
@@ -227,7 +227,7 @@ export default {
         },
         currentLocale: {
             get: function () {
-                return this.$i18n.locale;
+                return this.$locale.getCurrentLanguageCode();
             },
             set: function (value) {
                 const isCurrencyDefault = this.user.defaultCurrency === this.settingsStore.localeDefaultSettings.currency;
diff --git a/src/views/mobile/UnlockPage.vue b/src/views/mobile/UnlockPage.vue
index a23fdfbf..fa32b2c3 100644
--- a/src/views/mobile/UnlockPage.vue
+++ b/src/views/mobile/UnlockPage.vue
@@ -48,7 +48,7 @@
                     @click="changeLanguage(locale)"
                 >
                     <template #after>
-                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="$i18n.locale === locale"></f7-icon>
+                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="currentLanguageCode === locale"></f7-icon>
                     </template>
                 </f7-list-item>
             </f7-list>
@@ -94,15 +94,11 @@ export default {
                 && this.$user.getWebAuthnCredentialId()
                 && webauthn.isSupported();
         },
+        currentLanguageCode() {
+            return this.$locale.getCurrentLanguageCode();
+        },
         currentLanguageName() {
-            const currentLocale = this.$i18n.locale;
-            let lang = this.$locale.getLanguageInfo(currentLocale);
-
-            if (!lang) {
-                lang = this.$locale.getLanguageInfo(this.$locale.getDefaultLanguage());
-            }
-
-            return lang.displayName;
+            return this.$locale.getCurrentLanguageDisplayName();
         }
     },
     methods: {
diff --git a/src/views/mobile/categories/PresetPage.vue b/src/views/mobile/categories/PresetPage.vue
index c074f150..1bcaa477 100644
--- a/src/views/mobile/categories/PresetPage.vue
+++ b/src/views/mobile/categories/PresetPage.vue
@@ -71,7 +71,7 @@ export default {
 
         return {
             loadingError: null,
-            currentLocale: self.$i18n.locale,
+            currentLocale: self.$locale.getCurrentLanguageCode(),
             categoryType: 0,
             allCategories: [],
             submitting: false,