3 files changed, 45 insertions, 1 deletions
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
new file mode 100644
index 00000000..4b541888
--- /dev/null
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <label for="interface-language-switcher" class='select'>
+      <select id="interface-language-switcher" v-model="language">
+        <option v-for="(langCode, i) in languageCodes" :value="langCode">
+          {{ languageNames[i] }}
+        </option>
+      </select>
+      <i class="icon-down-open"/>
+    </label>
+  </div>
+</template>
+
+<script>
+  import languagesObject from '../../i18n/messages'
+  import ISO6391 from 'iso-639-1'
+  import _ from 'lodash'
+
+  export default {
+    computed: {
+      languageCodes () {
+        return Object.keys(languagesObject)
+      },
+
+      languageNames () {
+        return _.map(this.languageCodes, ISO6391.getName)
+      },
+
+      language: {
+        get: function () { return this.$store.state.config.interfaceLanguage },
+        set: function (val) {
+          this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+          this.$i18n.locale = val
+        }
+      }
+    }
+  }
+</script>
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index d5ca33cc..f8eaad00 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -1,5 +1,6 @@
 /* eslint-env browser */
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
+import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
 import { filter, trim } from 'lodash'
 
 const settings = {
@@ -28,7 +29,8 @@ const settings = {
     }
   },
   components: {
-    StyleSwitcher
+    StyleSwitcher,
+    InterfaceLanguageSwitcher
   },
   computed: {
     user () {
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 9612876e..f500a1b0 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -84,6 +84,10 @@
         </li>
       </ul>
     </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.interfaceLanguage') }}</h2>
+      <interface-language-switcher />
+    </div>
   </div>
 </div>
 </template>