feat: add language selector

fixes #210

src/Pages/LoginScreen.vue

@@ -8,6 +8,22 @@
       <header class="tw-mb-9 tw-flex tw-flex-col tw-justify-center">
         <div class="tw-flex tw-items-center tw-justify-between tw-gap-6 tw-mb-6">
           <Logo class="tw-w-1/2 tw-h-auto tw-flex-none" />
+
+          <div class="tw-relative tw-shrink tw-min-w-0 tw-flex">
+            <icon-fa-language
+              class="tw-absolute tw-top-0 tw-bottom-0 tw-my-auto tw-left-2 tw-pointer-events-none"
+              role="presentation"
+            />
+            <select
+              v-model="locale"
+              class="tw-py-2 tw-pl-9 tw-pr-2 btn btn-default tw-text-left tw-min-w-0"
+              :aria-label="t('languageSelector.label')"
+            >
+              <option v-for="_locale in availableLocales" :key="_locale" :value="_locale">
+                {{ getLanguageName(_locale) }}
+              </option>
+            </select>
+          </div>
         </div>
 
         <p class="tw-text-sm tw-m-0 tw-hyphens-auto tw-text-justify">
@@ -38,9 +54,9 @@ import Logo from '../../public/assets/logo.svg?component'
 import { loginRedirect } from '@/oidc'
 import Dots from '@/components/generic/Dots.vue'
 import { useAuthStore } from '@/stores'
-import { useI18n } from '@/i18n'
+import { getLanguageName, useI18n } from '@/i18n'
 import Splash from '@/components/Splash.vue'
 
-const { locale, t } = useI18n()
+const { availableLocales, locale, t } = useI18n()
 const authStore = useAuthStore()
 </script>

src/i18n/index.ts

@@ -53,6 +53,10 @@ function updateLocale(newLocale: string): void {
   }
 }
 
+export function getLanguageName(languageCode: string) {
+  return new Intl.DisplayNames([languageCode], { type: 'language' }).of(languageCode)
+}
+
 export function useI18n() {
   // This interface is intentionally similar to the one provided by
   // Vue I18n to make it easier for newcomers already familiar with it