Add:Language select in account page #1103

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)