Update:Set device language to match the first server connected to #448

components/connection/ServerConnectForm.vue

@@ -117,6 +117,9 @@ export default {
     deviceData() {
       return this.$store.state.deviceData || {}
     },
+    deviceSettings() {
+      return this.deviceData.deviceSettings || {}
+    },
     networkConnected() {
       return this.$store.state.networkConnected
     },
@@ -800,6 +803,7 @@ export default {
 
       this.$store.commit('setServerSettings', serverSettings)
       this.$store.commit('libraries/setEReaderDevices', ereaderDevices)
+      this.$setServerLanguageCode(serverSettings.language)
 
       // Set library - Use last library if set and available fallback to default user library
       var lastLibraryId = await this.$localStore.getLastLibraryId()
@@ -816,6 +820,19 @@ export default {
 
       var serverConnectionConfig = await this.$db.setServerConnectionConfig(this.serverConfig)
 
+      // Set the device language to match the servers if this is the first server connection
+      if (!this.serverConnectionConfigs.length && serverSettings.language !== 'en-us') {
+        const deviceSettings = {
+          ...this.deviceSettings,
+          languageCode: serverSettings.language
+        }
+        const updatedDeviceData = await this.$db.updateDeviceSettings(deviceSettings)
+        if (updatedDeviceData) {
+          this.$store.commit('setDeviceData', updatedDeviceData)
+          this.$setLanguageCode(updatedDeviceData.deviceSettings?.languageCode || 'en-us')
+        }
+      }
+
       this.$store.commit('user/setUser', user)
       this.$store.commit('user/setServerConnectionConfig', serverConnectionConfig)
 

plugins/i18n.js

@@ -2,6 +2,7 @@ import Vue from "vue"
 import enUsStrings from '../strings/en-us.json'
 
 const defaultCode = 'en-us'
+let $localStore = null
 
 const languageCodeMap = {
   'cs': { label: 'Čeština', dateFnsLocale: 'cs' },
@@ -85,7 +86,7 @@ async function loadi18n(code) {
 
   translations[code] = strings
   Vue.prototype.$languageCodes.current = code
-  localStorage.setItem('lang', code)
+  $localStore.setLanguage(code)
 
   for (const key in Vue.prototype.$strings) {
     Vue.prototype.$strings[key] = strings[key] || translations[defaultCode][key]
@@ -115,16 +116,19 @@ Vue.prototype.$setServerLanguageCode = (code) => {
 
 // Initialize with language code in localStorage if valid
 async function initialize() {
-  const localLanguage = localStorage.getItem('lang')
+  const localLanguage = await $localStore.getLanguage()
   if (!localLanguage) return
 
   if (!languageCodeMap[localLanguage]) {
     console.warn('Invalid local language code', localLanguage)
-    localStorage.setItem('lang', defaultCode)
+    $localStore.setLanguage(defaultCode)
   } else {
     Vue.prototype.$languageCodes.local = localLanguage
     loadi18n(localLanguage)
   }
 }
-initialize()
 
+export default ({ app, store }, inject) => {
+  $localStore = app.$localStore
+  initialize()
+}

plugins/localStore.js

@@ -160,6 +160,25 @@ class LocalStorage {
       return false
     }
   }
+
+  async setLanguage(lang) {
+    try {
+      await Preferences.set({ key: 'lang', value: lang })
+      console.log('[LocalStorage] Set lang', lang)
+    } catch (error) {
+      console.error('[LocalStorage] Failed to set lang', error)
+    }
+  }
+
+  async getLanguage() {
+    try {
+      var obj = await Preferences.get({ key: 'lang' }) || {}
+      return obj.value || null
+    } catch (error) {
+      console.error('[LocalStorage] Failed to get lang', error)
+      return false
+    }
+  }
 }