Allow to pick language unlogged and format fallback messages

Closes #479

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Footer.vue

@@ -2,6 +2,17 @@
   <footer class="footer" ref="footer">
     <img :src="`/img/pics/footer_${random}.jpg`" alt="" />
     <ul>
+      <li>
+        <b-select
+          v-if="$i18n"
+          v-model="locale"
+          :placeholder="$t('Select a language')"
+        >
+          <option v-for="(language, lang) in langs" :value="lang" :key="lang">
+            {{ language }}
+          </option>
+        </b-select>
+      </li>
       <li>
         <router-link :to="{ name: RouteName.ABOUT }">{{
           $t("About")
@@ -38,17 +49,40 @@
   </footer>
 </template>
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Vue, Watch } from "vue-property-decorator";
+import { saveLocaleData } from "@/utils/auth";
+import { loadLanguageAsync } from "@/utils/i18n";
 import RouteName from "../router/name";
+import langs from "../i18n/langs.json";
 
 @Component
 export default class Footer extends Vue {
   RouteName = RouteName;
 
+  locale: string | null = this.$i18n.locale;
+
+  langs: Record<string, string> = langs;
+
   // eslint-disable-next-line class-methods-use-this
   get random(): number {
     return Math.floor(Math.random() * 4) + 1;
   }
+
+  @Watch("locale")
+  // eslint-disable-next-line class-methods-use-this
+  async updateLocale(locale: string): Promise<void> {
+    if (locale) {
+      await loadLanguageAsync(locale);
+      saveLocaleData(locale);
+    }
+  }
+
+  @Watch("$i18n.locale", { deep: true })
+  updateLocaleFromI18n(locale: string): void {
+    if (locale) {
+      this.locale = locale;
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -92,5 +126,10 @@ footer.footer {
     text-decoration: underline;
     text-decoration-color: $secondary;
   }
+
+  ::v-deep span.select select {
+    background: $background-color;
+    color: $white;
+  }
 }
 </style>