Add support for multiple interface languages

2 files changed, 61 insertions, 18 deletions

diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 6997f149..e18a2a12 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -1,21 +1,39 @@
 <template>
-  <div>
-    <label for="interface-language-switcher">
+  <div class="interface-language-switcher">
+    <label>
       {{ promptText }}
     </label>
-    {{ ' ' }}
-    <Select
-      id="interface-language-switcher"
-      v-model="controlledLanguage"
-    >
-      <option
-        v-for="lang in languages"
-        :key="lang.code"
-        :value="lang.code"
+    <ol>
+      <li
+        v-for="index of controlledLanguage.keys()"
+        :key="index"
       >
-        {{ lang.name }}
-      </option>
-    </Select>
+        <Select
+          class="language-select"
+          :model-value="controlledLanguage[index]"
+          @update:modelValue="val => setLanguageAt(index, val)"
+        >
+          <option
+            v-for="lang in languages"
+            :key="lang.code"
+            :value="lang.code"
+          >
+            {{ lang.name }}
+          </option>
+        </Select>
+        <button
+          v-if="controlledLanguage.length > 1"
+          class="button-default btn"
+          @click="() => removeLanguageAt(index)"
+        >{{ $t('settings.remove_language') }}</button>
+      </li>
+      <li>
+        <button
+          class="button-default btn"
+          @click="addLanguage"
+        >{{ $t('settings.add_language') }}</button>
+      </li>
+    </ol>
   </div>
 </template>
 
@@ -34,7 +52,7 @@ export default {
       required: true
     },
     language: {
-      type: String,
+      type: [Array, String],
       required: true
     },
     setLanguage: {
@@ -48,7 +66,9 @@ export default {
     },
 
     controlledLanguage: {
-      get: function () { return this.language },
+      get: function () {
+        return Array.isArray(this.language) ? this.language : [this.language]
+      },
       set: function (val) {
         this.setLanguage(val)
       }
@@ -58,7 +78,30 @@ export default {
   methods: {
     getLanguageName (code) {
       return localeService.getLanguageName(code)
+    },
+    addLanguage () {
+      this.controlledLanguage = [...this.controlledLanguage, '']
+    },
+    setLanguageAt (index, val) {
+      const lang = [...this.controlledLanguage]
+      lang[index] = val
+      this.controlledLanguage = lang
+    },
+    removeLanguageAt (index) {
+      const lang = [...this.controlledLanguage]
+      lang.splice(index, 1)
+      this.controlledLanguage = lang
     }
   }
 }
 </script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.interface-language-switcher {
+  .language-select {
+    margin-right: 1em;
+  }
+}
+</style>
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index b86faef0..d5977461 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -43,7 +43,7 @@ const ProfileTab = {
       bannerPreview: null,
       background: null,
       backgroundPreview: null,
-      emailLanguage: this.$store.state.users.currentUser.language || ''
+      emailLanguage: this.$store.state.users.currentUser.language || ['']
     }
   },
   components: {
@@ -130,7 +130,7 @@ const ProfileTab = {
       }
 
       if (this.emailLanguage) {
-        params.language = localeService.internalToBackendLocale(this.emailLanguage)
+        params.language = localeService.internalToBackendLocaleMulti(this.emailLanguage)
       }
 
       this.$store.state.api.backendInteractor