commit c85395f21d7e27ba16f4b9005e7f2f2452cdd7f8
author Dixsie Wolmers <dixsie@ibm.com> Wed Feb 26 13:22:12 2020 -0600
committer Dixsie Wolmers <dixsie@ibm.com> Fri Mar 06 16:10:31 2020 +0000
tree a93812a8cc60404120b8ae3d913afed91f1181f7
parent 9fc3f90ac221bbe6b6d5b795e7fbaac68b17b7b6

Persist language settings using local storage

When user logs in, language setting will be stored in local storage.
Once stored, user does not have to re-select preferred language, but can
still update language settings on the login page.

Before a language is saved to local storage the locale = null
Renamed 'en.json' to 'en-US' because the vue i18n plugin defaults to
'en-US' when a language is not selected or null.
https://github.com/kazupon/vue-i18n/blob/v8.x/src/index.js#L67

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I577db3c4578eab30fbfae997dad0ece456fdf231

src/i18n.js

diff --git a/src/i18n.js b/src/i18n.js
index 09b3f4c..745d050 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -21,9 +21,12 @@
 }
 
 export default new VueI18n({
-  // default language is English
-  locale: 'en',
-  // locale messages with a message key that doesn't exist will fallback to English
-  fallbackLocale: 'en',
+  // Get default locale from local storage
+  locale: localStorage.getItem('storedLanguage'),
+  // Locales that don't exist will fallback to English
+  fallbackLocale: 'en-US',
+  // Falling back to fallbackLocale generates two console warnings
+  // Silent fallback suppresses console warnings when using fallback
+  silentFallbackWarn: true,
   messages: loadLocaleMessages()
 });

src/locales/en-US.json

diff --git a/src/locales/en.json b/src/locales/en-US.json
similarity index 100%
rename from src/locales/en.json
rename to src/locales/en-US.json

src/views/Login/Login.vue

diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 10ebb93..fd6e711 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -82,6 +82,7 @@
 <script>
 import { required } from 'vuelidate/lib/validators';
 import VuelidateMixin from '../../components/Mixins/VuelidateMixin.js';
+import i18n from '../../i18n';
 
 export default {
   name: 'Login',
@@ -94,9 +95,8 @@
       },
       disableSubmitButton: false,
       languages: [
-        { value: null, text: this.$t('global.form.selectAnOption') },
         {
-          value: 'en',
+          value: 'en-US',
           text: this.$t('pageLogin.form.english')
         },
         {
@@ -131,6 +131,7 @@
       this.$store
         .dispatch('authentication/login', [username, password])
         .then(() => this.$router.push('/'))
+        .then(localStorage.setItem('storedLanguage', i18n.locale))
         .catch(error => console.log(error))
         .finally(() => (this.disableSubmitButton = false));
     }