1 files changed, 17 insertions, 21 deletions
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 7ad1fe2e..6d1f83c4 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
     <label for="interface-language-switcher">
-      {{ promptText }}
+      {{ $t('settings.interfaceLanguage') }}
     </label>
     {{ ' ' }}
     <Select
       id="interface-language-switcher"
-      v-model="controlledLanguage"
+      v-model="language"
     >
       <option
         v-for="lang in languages"
@@ -20,43 +20,39 @@
 </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: {
-    promptText: {
-      type: String,
-      required: true
-    },
-    language: {
-      type: String,
-      required: true
-    },
-    setLanguage: {
-      type: Function,
-      required: true
-    }
-  },
   computed: {
     languages () {
-      return localeService.languages
+      return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
     },
 
-    controlledLanguage: {
-      get: function () { return this.language },
+    language: {
+      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
       set: function (val) {
-        this.setLanguage(val)
+        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
       }
     }
   },
 
   methods: {
     getLanguageName (code) {
-      return localeService.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)
     }
   }
 }