diff --git a/changes/changelog.d/386.enhancement b/changes/changelog.d/386.enhancement new file mode 100644 index 000000000..6ac08116c --- /dev/null +++ b/changes/changelog.d/386.enhancement @@ -0,0 +1 @@ +Autoselect best language based on browser configuration (#386) diff --git a/front/src/App.vue b/front/src/App.vue index 1fd000c92..58ed698aa 100644 --- a/front/src/App.vue +++ b/front/src/App.vue @@ -93,6 +93,8 @@ import axios from 'axios' import _ from 'lodash' import {mapState} from 'vuex' +import translations from '@/translations' + import Sidebar from '@/components/Sidebar' import Raven from '@/components/Raven' import ServiceMessages from '@/components/ServiceMessages' @@ -115,6 +117,7 @@ export default { }, created () { let self = this + this.autodetectLanguage() setInterval(() => { // used to redraw ago dates every minute self.$store.commit('ui/computeLastDate') @@ -138,6 +141,21 @@ export default { if (confirm) { this.$store.commit('instance/instanceUrl', null) } + }, + autodetectLanguage () { + let userLanguage = navigator.language || navigator.userLanguage + let available = _.keys(translations) + let matching = available.filter((a) => { + return userLanguage.replace('-', '_') === a + }) + let almostMatching = available.filter((a) => { + return userLanguage.replace('-', '_').split('_')[0] === a.split('_')[0] + }) + if (matching.length > 0) { + this.$language.current = matching[0] + } else if (almostMatching.length > 0) { + this.$language.current = almostMatching[0] + } } }, computed: {