Add:Language select in account page #1103

client/layouts/default.vue

@@ -4,7 +4,7 @@
 
     <app-side-rail v-if="isShowingSideRail" class="hidden md:block" />
     <div id="app-content" class="h-full" :class="{ 'has-siderail': isShowingSideRail }">
-      <Nuxt />
+      <Nuxt :key="currentLang" />
     </div>
 
     <app-stream-container ref="streamContainer" />
@@ -31,7 +31,8 @@ export default {
       socket: null,
       isSocketConnected: false,
       isFirstSocketConnection: true,
-      socketConnectionToastId: null
+      socketConnectionToastId: null,
+      currentLang: null
     }
   },
   watch: {
@@ -519,6 +520,10 @@ export default {
         .catch((error) => {
           console.error('Failed to load tasks', error)
         })
+    },
+    changeLanguage(code) {
+      console.log('Changed lang', code)
+      this.currentLang = code
     }
   },
   beforeMount() {
@@ -527,6 +532,7 @@ export default {
   mounted() {
     this.updateBodyClass()
     this.resize()
+    this.$eventBus.$on('change-lang', this.changeLanguage)
     window.addEventListener('resize', this.resize)
     window.addEventListener('keydown', this.keyDown)
 
@@ -544,6 +550,7 @@ export default {
     }
   },
   beforeDestroy() {
+    this.$eventBus.$off('change-lang', this.changeLanguage)
     window.removeEventListener('resize', this.resize)
     window.removeEventListener('keydown', this.keyDown)
   }

client/pages/account.vue

@@ -12,8 +12,12 @@
             <ui-text-input-with-label disabled :value="usertype" :label="$strings.LabelAccountType" />
           </div>
         </div>
+        <div class="py-4">
+          <p class="px-1 text-sm font-semibold">{{ $strings.LabelLanguage }}</p>
+          <ui-dropdown v-model="selectedLanguage" :items="$languageCodeOptions" small class="max-w-48" @input="updateLocalLanguage" />
+        </div>
 
-        <div class="w-full h-px bg-primary my-4" />
+        <div class="w-full h-px bg-white/10 my-4" />
 
         <p v-if="!isGuest" class="mb-4 text-lg">{{ $strings.HeaderChangePassword }}</p>
         <form v-if="!isGuest" @submit.prevent="submitChangePassword">
@@ -42,7 +46,8 @@ export default {
       password: null,
       newPassword: null,
       confirmPassword: null,
-      changingPassword: false
+      changingPassword: false,
+      selectedLanguage: ''
     }
   },
   computed: {
@@ -66,6 +71,9 @@ export default {
     }
   },
   methods: {
+    updateLocalLanguage(lang) {
+      this.$setLanguageCode(lang)
+    },
     logout() {
       var rootSocket = this.$root.socket || {}
       const logoutPayload = {
@@ -113,6 +121,8 @@ export default {
         })
     }
   },
-  mounted() {}
+  mounted() {
+    this.selectedLanguage = this.$languageCodes.current
+  }
 }
 </script>

client/pages/config/index.vue

@@ -79,7 +79,7 @@
 
           <div class="py-2">
             <p class="px-1 text-sm font-semibold">{{ $strings.LabelLanguageDefaultServer }}</p>
-            <ui-dropdown v-model="newServerSettings.language" :items="$languageCodeOptions" small class="max-w-48" @input="updateServerLanguage" />
+            <ui-dropdown ref="langDropdown" v-model="newServerSettings.language" :items="$languageCodeOptions" small class="max-w-48" @input="updateServerLanguage" />
           </div>
         </div>
 
@@ -327,7 +327,6 @@ export default {
       })
     },
     updateServerLanguage(val) {
-      this.$setLanguageCode(val)
       this.updateSettingsKey('language', val)
     },
     updateSettingsKey(key, val) {
@@ -343,6 +342,11 @@ export default {
           console.log('Updated Server Settings', success)
           this.updatingServerSettings = false
           this.$toast.success('Server settings updated')
+
+          if (payload.language) {
+            // Updating language after save allows for re-rendering
+            this.$setLanguageCode(payload.language)
+          }
         })
         .catch((error) => {
           console.error('Failed to update server settings', error)

client/plugins/i18n.js

@@ -1,14 +1,16 @@
+import { getElementsByTagType } from "domutils"
 import Vue from "vue"
 import enUsStrings from '../strings/en-us.json'
+import itStrings from '../strings/it.json'
 import { supplant } from './utils'
 
 const defaultCode = 'en-us'
 
 const languageCodeMap = {
   'en-us': 'English',
-  'es': 'Español',
+  // 'es': 'Español',
-  'it': 'Italiano',
+  // 'it': 'Italiano',
-  'pl': 'Polski',
+  // 'pl': 'Polski',
   'zh-cn': '汉语 (简化字)'
 }
 Vue.prototype.$languageCodeOptions = Object.keys(languageCodeMap).map(code => {
@@ -26,6 +28,7 @@ Vue.prototype.$languageCodes = {
 }
 
 Vue.prototype.$strings = { ...enUsStrings }
+
 Vue.prototype.$getString = (key, subs) => {
   if (!Vue.prototype.$strings[key]) return ''
   if (subs && Array.isArray(subs) && subs.length) {
@@ -71,6 +74,7 @@ async function loadi18n(code) {
   }
 
   console.log('i18n strings=', Vue.prototype.$strings)
+  Vue.prototype.$eventBus.$emit('change-lang', code)
   return true
 }
 
@@ -98,7 +102,7 @@ async function initialize() {
   if (!languageCodeMap[localLanguage]) {
     console.warn('Invalid local language code', localLanguage)
     localStorage.setItem('lang', defaultCode)
-  } else if (localLanguage !== defaultCode) {
+  } else {
     Vue.prototype.$languageCodes.local = localLanguage
     loadi18n(localLanguage)
   }