language switcher cleanup

src/components/interface_language_switcher/interface_language_switcher.js

@@ -0,0 +1,58 @@
+import localeService from '../../services/locale/locale.service.js'
+
+import Select from '../select/select.vue'
+import ProfileSettingIndicator from 'src/components/settings_modal/helpers/profile_setting_indicator.vue'
+
+export default {
+  components: {
+    Select,
+    ProfileSettingIndicator
+  },
+  props: {
+    // List of languages (or just one language)
+    modelValue: {
+      type: [Array, String],
+      required: true
+    },
+    // Is this setting stored in user profile (true) or elsewhere (false)
+    // Doesn't affect storage, just shows an icon if true
+    profile: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    languages () {
+      return localeService.languages
+    },
+
+    controlledLanguage: {
+      get: function () {
+        return Array.isArray(this.modelValue) ? this.modelValue : [this.modelValue]
+      },
+      set: function (val) {
+        this.$emit('update:modelValue', val)
+      }
+    }
+  },
+
+  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
+    }
+  }
+}

src/components/interface_language_switcher/interface_language_switcher.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="interface-language-switcher">
     <label>
-      {{ promptText }}
+      <slot />
       <ProfileSettingIndicator :is-profile="profile" />
     </label>
     <ul class="setting-list">
@@ -45,68 +45,7 @@
   </div>
 </template>
 
-<script>
+<script src="./interface_language_switcher.js"></script>
-import localeService from '../../services/locale/locale.service.js'
-
-import Select from '../select/select.vue'
-import ProfileSettingIndicator from 'src/components/settings_modal/helpers/profile_setting_indicator.vue'
-
-export default {
-  components: {
-    // eslint-disable-next-line vue/no-reserved-component-names
-    Select,
-    ProfileSettingIndicator
-  },
-  props: {
-    promptText: {
-      type: String,
-      required: true
-    },
-    language: {
-      type: [Array, String],
-      required: true
-    },
-    profile: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update'],
-  computed: {
-    languages () {
-      return localeService.languages
-    },
-
-    controlledLanguage: {
-      get: function () {
-        return Array.isArray(this.language) ? this.language : [this.language]
-      },
-      set: function (val) {
-        this.$emit('update', val)
-      }
-    }
-  },
-
-  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">
 .interface-language-switcher {

src/components/settings_modal/tabs/general_tab.js

@@ -66,7 +66,8 @@ const GeneralTab = {
       // Chrome-likes
       Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') ||
       // Future spec, still not supported in Nightly 63 as of 08/2018
-      Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks')
+      Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'),
+      emailLanguage: this.$store.state.users.currentUser.language || ['']
     }
   },
   components: {

src/components/settings_modal/tabs/general_tab.vue

@@ -5,18 +5,20 @@
       <ul class="setting-list">
         <li>
           <interface-language-switcher
-            :prompt-text="$t('settings.interfaceLanguage')"
+            v-model="language"
-            :language="language"
             @update="val => language = val"
-          />
+          >
+            {{ $t('settings.interfaceLanguage') }}
+          </interface-language-switcher>
         </li>
         <li>
           <interface-language-switcher
-            :prompt-text="$t('settings.email_language')"
+            v-model="emailLanguage"
-            :language="emailLanguage"
             :profile="true"
-            @update="val => { emailLanguage = val; updateProfile() }"
+            @update:modelValue="updateProfile()"
-          />
+          >
+            {{ $t('settings.email_language') }}
+          </interface-language-switcher>
         </li>
         <li v-if="instanceSpecificPanelPresent">
           <BooleanSetting path="hideISP">

src/components/user_card/user_card.js

@@ -472,10 +472,6 @@ export default {
         params.header = this.newBannerFile
       }
 
-      if (this.emailLanguage) {
-        params.language = localeService.internalToBackendLocaleMulti(this.emailLanguage)
-      }
-
       this.$store.state.api.backendInteractor
         .updateProfile({ params })
         .then((user) => {