locale is saved in db when session_id is available. Lists of languages is defined in locales/index.js

frontend/src/apis/loginAPI.js

@@ -1,5 +1,7 @@
 import axios from 'axios'
 import CONFIG from '../config'
+// eslint-disable-next-line no-unused-vars
+import regeneratorRuntime from 'regenerator-runtime'
 
 // control email-text sended with email verification code
 const EMAIL_TYPE = {
@@ -86,6 +88,16 @@ const loginAPI = {
     }
     return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload)
   },
+  updateLanguage: async (sessionId, email, language) => {
+    const payload = {
+      session_id: sessionId,
+      email,
+      update: {
+        'User.language': language,
+      },
+    }
+    return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload)
+  },
 }
 
 export default loginAPI

frontend/src/components/LanguageSwitch.vue

@@ -1,22 +1,59 @@
 <template>
   <div class="language-switch">
-    <b-dropdown size="sm" :text="$t('language') + ' - ' + $i18n.locale">
-      <b-dropdown-item @click.prevent="setLocale('de')">Deutsch</b-dropdown-item>
-      <b-dropdown-item @click.prevent="setLocale('en')">English</b-dropdown-item>
+    <b-dropdown size="sm" :text="currentLanguageName + ' - ' + currentLanguage">
+      <b-dropdown-item
+        v-for="lang in locales"
+        @click.prevent="saveLocale(lang.code)"
+        :key="lang.code"
+      >
+        {{ lang.name }}
+      </b-dropdown-item>
     </b-dropdown>
   </div>
 </template>
 <script>
 import { localeChanged } from 'vee-validate'
+import locales from '../locales/'
+import loginAPI from '../apis/loginAPI'
 
 export default {
-  name: 'language-switch',
+  name: 'LanguageSwitch',
+  data() {
+    return {
+      locales: locales,
+    }
+  },
   methods: {
     setLocale(locale) {
       this.$i18n.locale = locale
       this.$store.commit('language', this.$i18n.locale)
       localeChanged(locale)
     },
+    async saveLocale(locale) {
+      this.setLocale(locale)
+      if (this.$store.state.sessionId && this.$store.state.email) {
+        const result = loginAPI.updateLanguage(
+          this.$store.state.sessionId,
+          this.$store.state.email,
+          locale,
+        )
+        if (result.success) {
+          // toast success message
+        } else {
+          // toast error message
+        }
+      }
+    },
+  },
+  computed: {
+    currentLanguage() {
+      const locale = this.$store.state.language || navigator.language || 'en'
+      this.setLocale(this.$store.state.language)
+      return locale
+    },
+    currentLanguageName() {
+      return this.locales.find((l) => l.code === this.currentLanguage).name
+    },
   },
 }
 </script>

frontend/src/locales/index.js

@@ -0,0 +1,16 @@
+const locales = [
+  {
+    name: 'English',
+    code: 'en',
+    iso: 'en-US',
+    enabled: true,
+  },
+  {
+    name: 'Deutsch',
+    code: 'de',
+    iso: 'de-DE',
+    enabled: true,
+  },
+]
+
+export default locales

frontend/src/store/store.js

@@ -18,7 +18,8 @@ export const mutations = {
 export const actions = {
   login: ({ dispatch, commit }, data) => {
     commit('sessionId', data.sessionId)
-    commit('email', data.email)
+    commit('email', data.user.email)
+    commit('language', data.user.language)
   },
   logout: ({ commit, state }) => {
     commit('sessionId', null)
@@ -36,7 +37,7 @@ export const store = new Vuex.Store({
   state: {
     sessionId: null,
     email: '',
-    language: 'en',
+    language: null,
     modals: false,
   },
   getters: {},

frontend/src/views/Pages/Login.vue

@@ -111,7 +111,7 @@ export default {
       if (result.success) {
         this.$store.dispatch('login', {
           sessionId: result.result.data.session_id,
-          email: this.model.email,
+          user: result.result.data.user,
         })
         this.$router.push('/overview')
         loader.hide()