From 5f1dabc5693b9ee482674d271ac3656450b89f65 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Thu, 27 Dec 2018 23:13:29 +0100
Subject: [PATCH] Fix #644: Initial UI render using correct language from
 browser

---
 changes/changelog.d/644.bugfix |  1 +
 front/src/App.vue              | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 changes/changelog.d/644.bugfix

diff --git a/changes/changelog.d/644.bugfix b/changes/changelog.d/644.bugfix
new file mode 100644
index 000000000..798440147
--- /dev/null
+++ b/changes/changelog.d/644.bugfix
@@ -0,0 +1 @@
+Initial UI render using correct language from browser (#644)
diff --git a/front/src/App.vue b/front/src/App.vue
index ed78005eb..4d1a1be9f 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -51,6 +51,7 @@
 </template>
 
 <script>
+import Vue from 'vue'
 import axios from 'axios'
 import _ from '@/lodash'
 import {mapState} from 'vuex'
@@ -133,6 +134,8 @@ export default {
     autodetectLanguage () {
       let userLanguage = navigator.language || navigator.userLanguage
       let available = locales.locales.map(e => { return e.code })
+      let self = this
+      let candidate
       let matching = available.filter((a) => {
         return userLanguage.replace('-', '_') === a
       })
@@ -140,10 +143,20 @@ export default {
         return userLanguage.replace('-', '_').split('_')[0] === a.split('_')[0]
       })
       if (matching.length > 0) {
-        this.$language.current = matching[0]
+        candidate = matching[0]
       } else if (almostMatching.length > 0) {
-        this.$language.current = almostMatching[0]
+        candidate = almostMatching[0]
+      } else {
+        return
       }
+      import(`./translations/${candidate}.json`).then((response) =>{
+        Vue.$translations[candidate] = response.default[candidate]
+      }).finally(() => {
+        // set current language twice, otherwise we seem to have a cache somewhere
+        // and rendering does not happen
+        self.$language.current = 'noop'
+        self.$language.current = candidate
+      })
     },
     disconnect () {
       if (!this.bridge) {