refactor: move language manager to utils (#2735)

web/assets/js/langs.js

@@ -1,103 +0,0 @@
-const supportLangs = [
-	{
-		name: "English",
-		value: "en-US",
-		icon: "🇺🇸",
-	},
-	{
-		name: "فارسی",
-		value: "fa-IR",
-		icon: "🇮🇷",
-	},
-	{
-		name: "简体中文",
-		value: "zh-CN",
-		icon: "🇨🇳",
-	},
-	{
-		name: "繁體中文",
-		value: "zh-TW",
-		icon: "🇹🇼",
-	},
-	{
-		name: "日本語",
-		value: "ja-JP",
-		icon: "🇯🇵",
-	},
-	{
-		name: "Русский",
-		value: "ru-RU",
-		icon: "🇷🇺",
-	},
-	{
-		name: "Tiếng Việt",
-		value: "vi-VN",
-		icon: "🇻🇳",
-	},
-	{
-		name: "Español",
-		value: "es-ES",
-		icon: "🇪🇸",
-	},
-	{
-		name: "Indonesian",
-		value: "id-ID",
-		icon: "🇮🇩",
-	},
-	{
-		name: "Український",
-		value: "uk-UA",
-		icon: "🇺🇦",
-	},
-	{
-		name: "Türkçe",
-		value: "tr-TR",
-		icon: "🇹🇷",
-	},
-	{
-		name: "Português",
-		value: "pt-BR",
-		icon: "🇧🇷",
-	},
-];
-
-function getLang() {
-	let lang = CookieManager.getCookie("lang");
-
-	if (!lang) {
-		if (window.navigator) {
-			lang = window.navigator.language || window.navigator.userLanguage;
-
-			if (isSupportLang(lang)) {
-				CookieManager.setCookie("lang", lang, 150);
-			} else {
-				CookieManager.setCookie("lang", "en-US", 150);
-				window.location.reload();
-			}
-		} else {
-			CookieManager.setCookie("lang", "en-US", 150);
-			window.location.reload();
-		}
-	}
-
-	return lang;
-}
-
-function setLang(lang) {
-	if (!isSupportLang(lang)) {
-		lang = "en-US";
-	}
-
-	CookieManager.setCookie("lang", lang, 150);
-	window.location.reload();
-}
-
-function isSupportLang(lang) {
-	for (l of supportLangs) {
-		if (l.value === lang) {
-			return true;
-		}
-	}
-
-	return false;
-}

web/assets/js/util/index.js

@@ -669,4 +669,108 @@ class URLBuilder {
         
         return `${protocol}//${host}${port}${base}${path}`;
     }
+}
+
+class LanguageManager {
+    static supportedLanguages = [
+        {
+            name: "English",
+            value: "en-US",
+            icon: "🇺🇸",
+        },
+        {
+            name: "فارسی",
+            value: "fa-IR",
+            icon: "🇮🇷",
+        },
+        {
+            name: "简体中文",
+            value: "zh-CN",
+            icon: "🇨🇳",
+        },
+        {
+            name: "繁體中文",
+            value: "zh-TW",
+            icon: "🇹🇼",
+        },
+        {
+            name: "日本語",
+            value: "ja-JP",
+            icon: "🇯🇵",
+        },
+        {
+            name: "Русский",
+            value: "ru-RU",
+            icon: "🇷🇺",
+        },
+        {
+            name: "Tiếng Việt",
+            value: "vi-VN",
+            icon: "🇻🇳",
+        },
+        {
+            name: "Español",
+            value: "es-ES",
+            icon: "🇪🇸",
+        },
+        {
+            name: "Indonesian",
+            value: "id-ID",
+            icon: "🇮🇩",
+        },
+        {
+            name: "Український",
+            value: "uk-UA",
+            icon: "🇺🇦",
+        },
+        {
+            name: "Türkçe",
+            value: "tr-TR",
+            icon: "🇹🇷",
+        },
+        {
+            name: "Português",
+            value: "pt-BR",
+            icon: "🇧🇷",
+        }
+    ]
+
+    static getLanguage() {
+        let lang = CookieManager.getCookie("lang");
+    
+        if (!lang) {
+            if (window.navigator) {
+                lang = window.navigator.language || window.navigator.userLanguage;
+    
+                if (LanguageManager.isSupportLanguage(lang)) {
+                    CookieManager.setCookie("lang", lang, 150);
+                } else {
+                    CookieManager.setCookie("lang", "en-US", 150);
+                    window.location.reload();
+                }
+            } else {
+                CookieManager.setCookie("lang", "en-US", 150);
+                window.location.reload();
+            }
+        }
+    
+        return lang;
+    }
+    
+    static setLanguage(language) {
+        if (!LanguageManager.isSupportLanguage(language)) {
+            language = "en-US";
+        }
+    
+        CookieManager.setCookie("lang", language, 150);
+        window.location.reload();
+    }
+    
+    static isSupportLanguage(language) {
+        const languageFilter = LanguageManager.supportedLanguages.filter((lang) => {
+            return lang.value === language
+        })
+    
+        return languageFilter.length > 0;
+    }    
 }

web/html/common/js.html

@@ -7,7 +7,6 @@
 <script src="{{ .base_path }}assets/js/axios-init.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/js/util/date-util.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/js/util/index.js?{{ .cur_ver }}"></script>
-<script src="{{ .base_path }}assets/js/langs.js"></script>
 <script>
     const basePath = '{{ .base_path }}';
     axios.defaults.baseURL = basePath;

web/html/login.html

@@ -449,9 +449,9 @@
                     <a-row justify="center" class="centered">
                       <a-col :span="24">
                         <a-select ref="selectLang" v-model="lang"
-                                  @change="setLang(lang)" style="width: 200px;"
+                                  @change="LanguageManager.setLanguage(lang)" style="width: 200px;"
                                   :dropdown-class-name="themeSwitcher.currentTheme">
-                          <a-select-option :value="l.value" label="English" v-for="l in supportLangs">
+                          <a-select-option :value="l.value" label="English" v-for="l in LanguageManager.supportedLanguages">
                             <span role="img" aria-label="l.name" v-text="l.icon"></span>
                             &nbsp;&nbsp;<span v-text="l.name"></span>
                           </a-select-option>
@@ -493,7 +493,7 @@
       lang: ""
     },
     async created() {
-      this.lang = getLang();
+      this.lang = LanguageManager.getLanguage();
       this.secretEnable = await this.getSecretStatus();
     },
     methods: {

web/html/xui/settings.html

@@ -179,10 +179,10 @@
                       <template #control>
                         <a-select ref="selectLang"
                             v-model="lang"
-                            @change="setLang(lang)"
+                            @change="LanguageManager.setLanguage(lang)"
                             :dropdown-class-name="themeSwitcher.currentTheme"
                             style="width: 100%">
-                          <a-select-option :value="l.value" :label="l.value" v-for="l in supportLangs">
+                          <a-select-option :value="l.value" :label="l.value" v-for="l in LanguageManager.supportedLanguages">
                             <span role="img" :aria-label="l.name" v-text="l.icon"></span> &nbsp;&nbsp; <span v-text="l.name"></span>
                           </a-select-option>
                         </a-select>
@@ -344,7 +344,7 @@
                       <template #title>{{ i18n "pages.settings.telegramBotLanguage"}}</template>
                       <template #control>
                         <a-select ref="selectBotLang" v-model="allSetting.tgLang" :dropdown-class-name="themeSwitcher.currentTheme" style="width: 100%">
-                          <a-select-option :value="l.value" :label="l.value" v-for="l in supportLangs">
+                          <a-select-option :value="l.value" :label="l.value" v-for="l in LanguageManager.supportedLanguages">
                             <span role="img" :aria-label="l.name" v-text="l.icon"></span> &nbsp;&nbsp; <span v-text="l.name"></span>
                           </a-select-option>
                         </a-select>
@@ -672,7 +672,7 @@
       allSetting: new AllSetting(),
       saveBtnDisable: true,
       user: {},
-      lang: getLang(),
+      lang: LanguageManager.getLanguage(),
       remarkModels: { i: 'Inbound', e: 'Email', o: 'Other' },
       remarkSeparators: [' ', '-', '_', '@', ':', '~', '|', ',', '.', '/'],
       datepickerList: [{ name: 'Gregorian (Standard)', value: 'gregorian' }, { name: 'Jalalian (شمسی)', value: 'jalalian' }],