Set userLanguage cookie when setting interface language

3 files changed, 20 insertions, 17 deletions

diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 6d1f83c4..757ec01f 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -6,7 +6,7 @@
     {{ ' ' }}
     <Select
       id="interface-language-switcher"
-      v-model="language"
+      v-model="controlledLanguage"
     >
       <option
         v-for="lang in languages"
@@ -20,39 +20,33 @@
 </template>
 
 <script>
-import languagesObject from '../../i18n/messages'
 import localeService from '../../services/locale/locale.service.js'
-import ISO6391 from 'iso-639-1'
-import _ from 'lodash'
 import Select from '../select/select.vue'
 
 export default {
   components: {
     Select
   },
+  props: {
+    language: String,
+    setLanguage: Function
+  },
   computed: {
     languages () {
-      return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
+      return localeService.languages
     },
 
-    language: {
-      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
+    controlledLanguage: {
+      get: function () { return this.language },
       set: function (val) {
-        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+        this.setLanguage(val)
       }
     }
   },
 
   methods: {
     getLanguageName (code) {
-      const specialLanguageNames = {
-        'ja_easy': 'やさしいにほんご',
-        'zh': '简体中文',
-        'zh_Hant': '繁體中文'
-      }
-      const languageName = specialLanguageNames[code] || ISO6391.getNativeName(code)
-      const browserLocale = localeService.internalToBrowserLocale(code)
-      return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)
+      return localeService.getLanguageName(code)
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 62d86176..de925155 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -72,6 +72,12 @@ const GeneralTab = {
         !this.$store.state.users.currentUser.background_image
     },
     instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
+    language: {
+      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
+      set: function (val) {
+        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+      }
+    },
     ...SharedComputedObject()
   },
   methods: {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index a2c6bffa..5bc0f516 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -4,7 +4,10 @@
       <h2>{{ $t('settings.interface') }}</h2>
       <ul class="setting-list">
         <li>
-          <interface-language-switcher />
+          <interface-language-switcher
+            :language="language"
+            :set-language="val => language = val"
+          />
         </li>
         <li v-if="instanceSpecificPanelPresent">
           <BooleanSetting path="hideISP">