feat: add LoginLocaleDropdownSelector

src/components/LocalesMenu.vue

@@ -1,8 +1,8 @@
 <template>
-  <b-button :id="uniqueId" class="locales-menu" href="#" variant="none" @click.prevent>
+  <b-button :id="uniqueId" class="locales-menu" href="#" :variant="null" @click.prevent>
     <span class="locales-menu__button">
       <slot v-bind="{ currentLocale, locales }">
-        <fa icon="globe" class="me-1"></fa>
+        <phosphor-icon name="globe-hemisphere-west" class="me-1" />
         {{ currentLocale.label }}
       </slot>
     </span>
@@ -33,6 +33,7 @@
 
 <script>
 import { uniqueId, find } from 'lodash'
+import { PhosphorIcon } from '@icij/murmur-next'
 
 import settings from '@/utils/settings'
 
@@ -41,6 +42,9 @@ import settings from '@/utils/settings'
  */
 export default {
   name: 'LocalesMenu',
+  components: {
+    PhosphorIcon
+  },
   props: {
     /**
      * Button size
@@ -77,15 +81,15 @@ export default {
   },
   watch: {
     currentLocale({ key }) {
-      return this.$core.loadI18Locale(key)
+      return this.$core?.loadI18Locale(key)
     }
   },
   methods: {
     async chooseLocale(locale) {
       if (this.$refs.popover?.hide) {
         this.$refs.popover.hide(new Event('forceHide'))
       }
-      await this.$core.loadI18Locale(locale)
+      await this?.$core?.loadI18Locale(locale)
     },
     dropdownItemClass({ key }) {
       return {

src/components/Login/LoginLocaleDropdownSelector.vue

@@ -0,0 +1,12 @@
+<script setup>
+import LocalesMenu from '@/components/LocalesMenu'
+</script>
+
+<template>
+  <span class="login-locale-dropdown-selector d-inline-flex gap-1 text-secondary-emphasis align-items-center">
+    <span class="p-1">
+      {{ $t('loginLocaleDropdownSelector.label') }}
+    </span>
+    <locales-menu class="p-1" popover-placement="top" />
+  </span>
+</template>

src/lang/en.json

@@ -804,6 +804,9 @@
     "logout": "You have been logged out from Datashare.",
     "login": "Login"
   },
+  "loginLocaleDropdownSelector": {
+    "label": "Switch language:"
+  },
   "userHistory": {
     "heading": "Your history",
     "description": "On this page you can retrieve the documents you opened and the searches you saved.",

src/stories/components/Login/LoginLocaleDropdownSelector.stories.js

@@ -0,0 +1,18 @@
+import LoginLocaleDropdownSelector from '@/components/Login/LoginLocaleDropdownSelector'
+
+export default {
+  title: 'Components/Login/LoginLocaleDropdownSelector',
+  component: LoginLocaleDropdownSelector,
+  tags: ['autodocs'],
+  decorators: [
+    () => ({
+      template: `
+        <div class="p-5 text-center">
+          <story />
+        </div>
+      `
+    })
+  ]
+}
+
+export const Default = {}