From f6e0092190745244ecd4c41ee18d62d9ad56c993 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 24 Jul 2021 22:02:49 +0100
Subject: [PATCH] :globe_with_meridians: Adds translations for
 language-switcher component

---
 src/assets/locales/en.json                   |  6 ++++++
 src/components/Settings/LanguageSwitcher.vue | 12 ++++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index f8f74ee9..9b69980b 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -62,6 +62,12 @@
     "item-size-large": "Large",
     "config-launcher-label": "Config"
   },
+  "language-switcher": {
+    "title": "Change Application Language",
+    "dropdown-label": "Select a Language",
+    "save-button": "Save",
+    "success-msg": "Language Updated to"
+  },
   "theme-maker": {
     "title": "Theme Configurator",
     "export-button": "Export Custom Variables",
diff --git a/src/components/Settings/LanguageSwitcher.vue b/src/components/Settings/LanguageSwitcher.vue
index 40df51a4..7def9ab3 100644
--- a/src/components/Settings/LanguageSwitcher.vue
+++ b/src/components/Settings/LanguageSwitcher.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="language-switcher">
-    <h3 class="title">Change Application Language</h3>
-    <p class="intro">Select a Language:</p>
+    <h3 class="title">{{ $t('language-switcher.title') }}</h3>
+    <p class="intro">{{ $t('language-switcher.dropdown-label') }}:</p>
     <v-select
       v-model="language"
       :selectOnTab="true"
@@ -11,7 +11,7 @@
       :input="setLangLocally()"
     />
     <Button class="save-button" :click="saveLanguage" :disallow="!language">
-      Save
+      {{ $t('language-switcher.save-button') }}
       <SaveConfigIcon />
     </Button>
     <p v-if="language">{{ language.flag }} {{ language.name }}</p>
@@ -42,20 +42,24 @@ export default {
     };
   },
   methods: {
+    /* Save language to local storage */
     saveLanguage() {
       const selectedLanguage = this.language;
       if (this.checkLocale(selectedLanguage)) {
         localStorage.setItem(localStorageKeys.LANGUAGE, selectedLanguage.code);
         this.setLangLocally();
-        const successMsg = `${selectedLanguage.flag} Language Updated to ${selectedLanguage.name}`;
+        const successMsg = `${selectedLanguage.flag} `
+          + `${this.$t('language-switcher.success-msg')} ${selectedLanguage.name}`;
         this.$toasted.show(successMsg, { className: 'toast-success' });
       }
     },
+    /* Check language is supported, before saving */
     checkLocale(selectedLanguage) {
       if (!selectedLanguage || !selectedLanguage.code) return false;
       const i18nLocales = this.$i18n.availableLocales;
       return i18nLocales.includes(selectedLanguage.code);
     },
+    /* Apply language locally */
     setLangLocally() {
       if (this.language && this.language.code) {
         this.$i18n.locale = this.language.code;