Merge pull request #1328 from gradido/set-language-on-login

fix: Set Locale after Login

frontend/src/components/LanguageSwitch.vue

@@ -12,7 +12,6 @@
   </div>
 </template>
 <script>
-import { localeChanged } from 'vee-validate'
 import locales from '../locales/'
 import { updateUserInfos } from '../graphql/mutations'
 
@@ -26,10 +25,8 @@ export default {
   },
   methods: {
     setLocale(locale) {
-      this.$i18n.locale = locale
+      this.$store.commit('language', locale)
-      this.$store.commit('language', this.$i18n.locale)
       this.currentLanguage = this.getLocaleObject(locale)
-      localeChanged(locale)
     },
     async saveLocale(locale) {
       // if (this.$i18n.locale === locale) return

frontend/src/main.js

@@ -28,7 +28,7 @@ Vue.toasted.register(
 
 loadAllRules(i18n)
 
-addNavigationGuards(router, store, apolloProvider.defaultClient, i18n)
+addNavigationGuards(router, store, apolloProvider.defaultClient)
 
 if (!store) {
   setTimeout(

frontend/src/routes/guards.js

@@ -1,6 +1,6 @@
 import { verifyLogin } from '../graphql/queries'
 
-const addNavigationGuards = (router, store, apollo, i18n) => {
+const addNavigationGuards = (router, store, apollo) => {
   // handle publisherId
   router.beforeEach((to, from, next) => {
     const publisherId = to.query.pid
@@ -21,7 +21,6 @@ const addNavigationGuards = (router, store, apollo, i18n) => {
           fetchPolicy: 'network-only',
         })
         .then((result) => {
-          i18n.locale = result.data.verifyLogin.language
           store.dispatch('login', result.data.verifyLogin)
           next({ path: '/overview' })
         })

frontend/src/store/store.js

@@ -1,11 +1,15 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import createPersistedState from 'vuex-persistedstate'
+import { localeChanged } from 'vee-validate'
+import i18n from '../i18n.js'
 
 Vue.use(Vuex)
 
 export const mutations = {
   language: (state, language) => {
+    i18n.locale = language
+    localeChanged(language)
     state.language = language
   },
   email: (state, email) => {

frontend/src/store/store.test.js

@@ -1,8 +1,18 @@
 import { mutations, actions } from './store'
 import Vuex from 'vuex'
 import Vue from 'vue'
+import i18n from '../i18n.js'
+import { localeChanged } from 'vee-validate'
 
 jest.mock('vuex')
+jest.mock('../i18n.js')
+jest.mock('vee-validate', () => {
+  return {
+    localeChanged: jest.fn(),
+  }
+})
+
+i18n.locale = 'blubb'
 
 const {
   language,
@@ -29,6 +39,14 @@ describe('Vuex store', () => {
         language(state, 'de')
         expect(state.language).toEqual('de')
       })
+
+      it('sets the i18n locale', () => {
+        expect(i18n.locale).toBe('de')
+      })
+
+      it('calls localChanged of vee-validate', () => {
+        expect(localeChanged).toBeCalledWith('de')
+      })
     })
 
     describe('email', () => {

frontend/src/views/Pages/Register.vue

@@ -191,7 +191,6 @@
 import InputEmail from '../../components/Inputs/InputEmail.vue'
 import LanguageSwitchSelect from '../../components/LanguageSwitchSelect.vue'
 import { createUser } from '../../graphql/mutations'
-import { localeChanged } from 'vee-validate'
 import { getCommunityInfoMixin } from '../../mixins/getCommunityInfo'
 
 export default {
@@ -218,8 +217,6 @@ export default {
     updateLanguage(e) {
       this.language = e
       this.$store.commit('language', this.language)
-      this.$i18n.locale = this.language
-      localeChanged(this.language)
     },
     getValidationState({ dirty, validated, valid = null }) {
       return dirty || validated ? valid : null

frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js

@@ -138,10 +138,6 @@ describe('UserCard_Language', () => {
               expect(storeCommitMock).toBeCalledWith('language', 'en')
             })
 
-            it('changes the i18n locale', () => {
-              expect(mocks.$i18n.locale).toBe('en')
-            })
-
             it('has no select field anymore', () => {
               expect(wrapper.find('select').exists()).toBeFalsy()
             })

frontend/src/views/Pages/UserProfile/UserCard_Language.vue

@@ -60,7 +60,6 @@
   </b-card>
 </template>
 <script>
-import { localeChanged } from 'vee-validate'
 import LanguageSwitchSelect from '../../../components/LanguageSwitchSelect.vue'
 import { updateUserInfos } from '../../../graphql/mutations'
 
@@ -97,8 +96,6 @@ export default {
         })
         .then(() => {
           this.$store.commit('language', this.language)
-          this.$i18n.locale = this.language
-          localeChanged(this.language)
           this.cancelEdit()
           this.$toasted.success(this.$t('settings.language.success'))
         })