Feat/622 Enable language selection before login

src/components/TheLanguageSelector.vue

@@ -0,0 +1,51 @@
+<template>
+  <v-menu location="end">
+    <template #activator="{ props }">
+      <v-list-item
+        :class="activatorClass"
+        data-cy="language-menu"
+        v-bind="props"
+        :prepend-icon="icons.prepend"
+        :append-icon="icons.append"
+        :title="$i18n.locale"
+      />
+    </template>
+
+    <v-list data-cy="lang-list" density="compact" class="bg-surface-2 text-surface-1">
+      <v-list-item
+        v-for="(lang, i) in $i18n.availableLocales"
+        :key="`${i}-${lang}`"
+        :value="lang"
+        :title="lang"
+        :data-lang="lang"
+        @click="changeLocale(lang)"
+      />
+    </v-list>
+  </v-menu>
+</template>
+
+<script setup>
+import { setLocalStorage } from '../../utils/local-storage-utils';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+const { locale } = useI18n();
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'dark',
+  },
+  hasChevron: {
+    type: Boolean,
+    default: false,
+  }
+});
+
+const activatorClass = computed(() => props.variant === 'dark' ? `bg-surface-2 text-surface-1` : '');
+const icons = computed(() => props.hasChevron ? { prepend: 'mdi-web', append: 'mdi-chevron-right'} : { prepend: 'mdi-web mr-2', append: ''});
+
+const changeLocale = (lang) => {
+  locale.value = lang;
+  setLocalStorage('preferredLocale', lang);
+};
+</script>

src/components/TheUserMenu.vue

@@ -19,28 +19,7 @@
       </v-btn>
     </template>
     <v-list density="compact" class="bg-surface-2 text-surface-1">
-      <v-menu location="end">
-        <template #activator="{ props }">
-          <v-list-item
-            data-cy="language-menu"
-            v-bind="props"
-            :prepend-icon="`mdi-web`"
-            append-icon="mdi-chevron-right"
-            :title="$i18n.locale"
-          />
-        </template>
-
-        <v-list data-cy="lang-list" density="compact" class="bg-surface-2 text-surface-1">
-          <v-list-item
-            v-for="(lang, i) in $i18n.availableLocales"
-            :key="`${i}-${lang}`"
-            :value="lang"
-            :title="lang"
-            :data-lang="lang"
-            @click="changeLocale(lang)"
-          />
-        </v-list>
-      </v-menu>
+      <TheLanguageSelector has-chevron />
       <v-list-item
         v-for="({ text, icon, page, cyName }, i) in menuItems"
         :key="i"
@@ -59,27 +38,20 @@ import { useAuthStore } from '@/stores/auth';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { ROUTE_NAME_LOGOUT } from '@/router.js';
-import { setLocalStorage } from '../../utils/local-storage-utils';
 
+import TheLanguageSelector from './TheLanguageSelector.vue';
 
 const authStore = useAuthStore();
 
+const { t } = useI18n();
+
 defineProps({
   variant:{
       type:String,
       default:'light'
     }
 });
 
-
-const { t, locale } = useI18n();
-
-const changeLocale = (lang) => {
-  locale.value = lang;
-  setLocalStorage('preferredLocale', lang);
-};
-
-
 const menuItems = computed(() => {
   return [{ text: t('global.logout'), icon: 'logout', page: { name: ROUTE_NAME_LOGOUT }, cyName: 'Log Out' }];
 });

src/views/LoginView.vue

@@ -7,15 +7,18 @@
       <v-container id="welcome-container" fluid class="welcomeContainer">
         <nav class="d-flex justify-space-between align-center mb-2">
           <img class="cardLogo" src="/img/loginView/logo-cards-behind.svg">
-          <v-btn variant="text" class="text-h6" @click="scrollAndFocusLogin">
-            {{ buttonText }}
-            <v-icon
-              icon="mdi-account-circle"
-              color="white"
-              class="ml-2"
-              aria-hidden="true"
-            />
-          </v-btn>
+          <div class="d-flex align-center">          
+            <TheLanguageSelector variant="light" />
+            <v-btn variant="text" class="text-h6" @click="scrollAndFocusLogin">
+              {{ buttonText }}
+              <v-icon
+                icon="mdi-account-circle"
+                color="white"
+                class="ml-2"
+                aria-hidden="true"
+              />
+            </v-btn>
+          </div>
         </nav>
 
         <div class="d-flex h-75 flex-column justify-space-around align-center mt-2">
@@ -180,6 +183,7 @@ import { ROUTE_NAME_LOGIN, ROUTE_NAME_SIGNUP } from '@/router';
 import BaseSnackbar from '@/components/Global/BaseSnackbar.vue';
 import MarkdownContent from '@/components/Global/MarkdownContent.vue';
 import BaseVideo from '../components/Global/BaseVideo.vue';
+import TheLanguageSelector from '../components/TheLanguageSelector.vue';
 
 
 export default {
@@ -188,6 +192,7 @@ export default {
     BaseSnackbar,
     BaseVideo,
     MarkdownContent,
+    TheLanguageSelector
   },
   setup() {
     // Vuetify has its own translation layer that isn't very good