Language switcher in login and register (#22)

Author: luiggibcn

apps/web/src/components/auth/LanguagePills.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="flex items-center gap-1">
+    <button
+      v-for="lang in availableLangs"
+      :key="lang.code"
+      @click="select(lang)"
+      class="w-8 h-8 flex items-center justify-center rounded-full text-base transition-all cursor-pointer"
+      :class="current === lang.code
+        ? 'bg-white/15 ring-1 ring-white/30 scale-110'
+        : 'hover:bg-white/10 opacity-60 hover:opacity-100'"
+      :aria-label="lang.name"
+      :title="lang.name"
+    >
+      {{ lang.flag }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { mainLanguages } from '@/locales'
+import { setLocale } from '@/plugins/i18n'
+import type { Language, Locale } from '@billsplit/types'
+
+const { locale } = useI18n()
+
+const availableLangs = computed(() => mainLanguages.filter(l => l.available))
+const current = computed(() => locale.value)
+
+const select = (lang: Language) => {
+  setLocale(lang.code as Locale)
+}
+</script>

apps/web/src/views/sign-in.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="min-h-screen bg-black flex items-center justify-center px-4 py-8">
+  <div class="min-h-screen bg-black flex items-center justify-center px-4 py-8 relative">
+    <div class="absolute top-4 right-4">
+      <LanguagePills />
+    </div>
     <div class="w-full max-w-lg">
       <!-- Logo y título -->
        <HeaderAuth :welcome-title="t('auth.welcomeTitle')" :welcome-subtitle="t('auth.welcomeSubtitle')" />
@@ -271,6 +274,7 @@ import { useAuthStore } from '@/stores/auth.store'
 import { useI18n } from 'vue-i18n'
 import { redirectTo } from '@/utils'
 import HeaderAuth from '@/components/auth/HeaderAuth.vue'
+import LanguagePills from '@/components/auth/LanguagePills.vue'
 import ErrorSuccessMessage from '@/components/auth/ErrorSuccessMessage.vue'
 import Divider from '@/components/auth/Divider.vue'
 import TC from '@/components/auth/TC.vue'

apps/web/src/views/sign-up.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="min-h-screen bg-black flex items-center justify-center px-4 py-8">
+  <div class="min-h-screen bg-black flex items-center justify-center px-4 py-8 relative">
+    <div class="absolute top-4 right-4">
+      <LanguagePills />
+    </div>
     <div class="w-full max-w-lg">
       <HeaderAuth :welcome-title="t('auth.welcomeTitle')" :welcome-subtitle="t('auth.welcomeSubtitle')" />
 
@@ -231,6 +234,7 @@ import { useAuthStore } from '@/stores/auth.store'
 import { useAuth } from '@/composables/useAuth'
 import { useI18n } from 'vue-i18n'
 import HeaderAuth from '@/components/auth/HeaderAuth.vue'
+import LanguagePills from '@/components/auth/LanguagePills.vue'
 import ErrorSuccessMessage from '@/components/auth/ErrorSuccessMessage.vue'
 import Divider from '@/components/auth/Divider.vue'
 import TC from '@/components/auth/TC.vue'