Implement Smart Location: auto-detect user location if preference is enabled, hide location button, and handle permission denial by resetting preference

frontend/src/components/AppHeader.vue

@@ -10,8 +10,8 @@
             </svg>
         </span>
       </button>
-      <div v-if="authStore.isAdmin" class="admin-badge">ADMIN</div>
-      <div v-if="authStore.isDriver" class="driver-badge">CONDUCTOR</div>
+      <div v-if="authStore.isAdmin" class="admin-badge">{{ t('menu.admin') }}</div>
+      <div v-if="authStore.isDriver" class="driver-badge">{{ t('menu.driver') }}</div>
       
       <ReportModal :is-open="showReportModal" @close="showReportModal = false" />
       
@@ -29,57 +29,57 @@
                 <div v-if="authStore.isAuthenticated" class="status-dot-active"></div>
               </div>
               <div class="user-info-text">
-                <span class="welcome-label">HOLA,</span>
-                <span class="user-name-highlight">{{ authStore.isAuthenticated ? authStore.userName : 'INVITADO' }}</span>
+                <span class="welcome-label">{{ t('menu.welcome') }}</span>
+                <span class="user-name-highlight">{{ authStore.isAuthenticated ? authStore.userName : t('menu.guest') }}</span>
               </div>
             </div>
           </div>
 
           <div class="menu-scroll-area">
             <div v-if="authStore.isAdmin || authStore.isDriver || authStore.isPromoter" class="sidebar-group">
-              <div class="group-label">GESTIÓN</div>
+              <div class="group-label">{{ t('menu.management') }}</div>
               <div v-if="authStore.isAdmin" class="sidebar-link" @click="navigateTo('/admin')">
                 <span class="material-icons">shield_person</span>
-                <span class="link-text">Panel Control</span>
+                <span class="link-text">{{ t('menu.adminPanel') }}</span>
               </div>
               <div v-if="authStore.isDriver && !authStore.isAdmin" class="sidebar-link" @click="navigateTo('/driver')">
                 <span class="material-icons">minor_crash</span>
-                <span class="link-text">Taxi Panel</span>
+                <span class="link-text">{{ t('menu.driverPanel') }}</span>
               </div>
             </div>
 
             <div v-if="!authStore.isAdmin" class="sidebar-group">
-              <div class="group-label">OPERACIONES</div>
+              <div class="group-label">{{ t('menu.operations') }}</div>
               <div class="sidebar-link" @click="navigateTo('/favorites')">
                 <span class="material-icons">favorite</span>
-                <span class="link-text">Favoritos</span>
+                <span class="link-text">{{ t('menu.favorites') }}</span>
               </div>
               <div class="sidebar-link" @click="toggleLanguage">
                 <span class="material-icons">translate</span>
-                <span class="link-text">{{ locale === 'es' ? 'English (EN)' : 'Español (ES)' }}</span>
+                <span class="link-text">{{ t('menu.translate') }}</span>
               </div>
             </div>
 
               <div class="sidebar-link theme-toggle-row" @click="themeStore.toggleDarkMode">
                 <span class="material-icons">{{ themeStore.isDarkMode ? 'light_mode' : 'dark_mode' }}</span>
-                <span class="link-text">{{ themeStore.isDarkMode ? 'Modo Claro' : 'Modo Oscuro' }}</span>
+                <span class="link-text">{{ themeStore.isDarkMode ? t('menu.lightMode') : t('menu.darkMode') }}</span>
               </div>
 
             <div v-if="!authStore.isAdmin" class="sidebar-group">
-              <div class="group-label">SOPORTE</div>
+              <div class="group-label">{{ t('menu.support') }}</div>
               <div class="sidebar-link report-link-solid" @click="openReportModal">
                 <span class="material-icons">report_problem</span>
-                <span class="link-text">Enviar Reporte</span>
+                <span class="link-text">{{ t('menu.sendReport') }}</span>
               </div>
             </div>
           </div>
 
           <div class="sidebar-footer-fixed">
             <button v-if="!authStore.isAuthenticated" class="session-btn login-solid" @click="navigateTo('/login')">
-                <span class="material-icons">login</span> INICIAR SESIÓN
+                <span class="material-icons">login</span> {{ t('menu.login') }}
             </button>
             <button v-else class="session-btn logout-solid" @click="handleLogout">
-                <span class="material-icons">logout</span> CERRAR SESIÓN
+                <span class="material-icons">logout</span> {{ t('menu.logout') }}
             </button>
             <div class="sibu-tag-footer">SIBU SYSTEM v1.2.0</div>
           </div>

frontend/src/components/ReportModal.vue

@@ -5,7 +5,7 @@
         <div class="modal-header">
           <div class="title-with-icon">
             <span class="material-icons report-icon">report_problem</span>
-            <h2>Enviar Reporte</h2>
+            <h2>{{ t('report.title') }}</h2>
           </div>
           <button class="close-btn" @click="close">
             <span class="material-icons">close</span>
@@ -13,11 +13,11 @@
         </div>
 
         <div class="modal-body">
-          <p class="instruction">Cuéntanos qué sucede o envíanos una sugerencia. El equipo administrativo revisará tu mensaje.</p>
+          <p class="instruction">{{ t('report.instruction') }}</p>
           
           <textarea 
             v-model="message" 
-            placeholder="Escribe tu mensaje aquí..."
+            :placeholder="t('report.placeholder')"
             class="report-textarea"
             :disabled="isSending"
           ></textarea>
@@ -27,19 +27,19 @@
           </div>
 
           <div v-if="success" class="success-message">
-            ¡Reporte enviado con éxito! Gracias por tu colaboración.
+            {{ t('report.success') }}
           </div>
         </div>
 
         <div class="modal-footer">
-          <button class="cancel-btn" @click="close" :disabled="isSending">Cancelar</button>
+          <button class="cancel-btn" @click="close" :disabled="isSending">{{ t('report.cancel') }}</button>
           <button 
             class="send-btn" 
             @click="handleSend" 
             :disabled="isSending || !message.trim() || success"
           >
             <span v-if="isSending" class="spinner-small"></span>
-            <span v-else>Enviar Reporte</span>
+            <span v-else>{{ t('report.send') }}</span>
           </button>
         </div>
       </div>
@@ -50,6 +50,9 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { reportsService } from '@/services/reportsService'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 defineProps<{
   isOpen: boolean
@@ -86,7 +89,7 @@ async function handleSend() {
       close()
     }, 2000)
   } catch (e) {
-    error.value = 'Hubo un error al enviar el reporte. Por favor, intenta de nuevo.'
+    error.value = t('report.error')
   } finally {
     isSending.value = false
   }

frontend/src/components/auth/LoginForm.vue

@@ -3,8 +3,10 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { supabase } from '@/supabase'
+import { useI18n } from 'vue-i18n'
 
 const emit = defineEmits(['toggle'])
+const { t } = useI18n()
 
 const email = ref('')
 const password = ref('')
@@ -14,6 +16,7 @@ const errorMessage = ref('')
 const showPassword = ref(false)
 const router = useRouter()
 const authStore = useAuthStore()
+
 const handleLogin = async () => {
   isLoading.value = true
   errorMessage.value = ''
@@ -26,9 +29,9 @@ const handleLogin = async () => {
   } catch (error: any) {
     console.error('Error Login:', error)
     if (error.message?.includes('Invalid login credentials')) {
-      errorMessage.value = 'Correo o contraseña incorrectos.'
+      errorMessage.value = t('auth.invalidCreds')
     } else {
-      errorMessage.value = `Error: ${error.message || 'Error desconocido.'}`
+      errorMessage.value = `${t('common.error')}: ${error.message || t('common.noData')}`
     }
   } finally {
     isLoading.value = false
@@ -59,7 +62,7 @@ const handleGoogleLogin = async () => {
     // Se redirige automáticamente
   } catch (error: any) {
     console.error('Error Google Login:', error)
-    errorMessage.value = `Error con Google: ${error.message || 'Error desconocido'}`
+    errorMessage.value = `Error Google: ${error.message || t('common.error')}`
   } finally {
     isLoading.value = false
   }
@@ -76,12 +79,12 @@ const handleGoogleLogin = async () => {
       @click="handleGoogleLogin"
     >
       <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" width="20" height="20" alt="Google" />
-      <span>Continuar con Google</span>
+      <span>{{ t('auth.googleLogin') }}</span>
     </button>
 
     <div class="divider">
       <span class="divider-line"></span>
-      <span class="divider-text">o con correo</span>
+      <span class="divider-text">{{ t('auth.orEmail') }}</span>
       <span class="divider-line"></span>
     </div>
 
@@ -89,14 +92,14 @@ const handleGoogleLogin = async () => {
     <form @submit.prevent="handleLogin">
       <!-- Email -->
       <div class="field">
-        <label class="field-label" for="login-email">Correo electrónico</label>
+        <label class="field-label" for="login-email">{{ t('auth.emailLabel') }}</label>
         <div class="input-wrap">
           <span class="material-icons input-icon">alternate_email</span>
           <input
             id="login-email"
             type="email"
             v-model="email"
-            placeholder="tu@correo.com"
+            :placeholder="t('auth.emailPlaceholder')"
             required
             autocomplete="email"
             class="field-input"
@@ -106,7 +109,7 @@ const handleGoogleLogin = async () => {
 
       <!-- Contraseña -->
       <div class="field">
-        <label class="field-label" for="login-password">Contraseña</label>
+        <label class="field-label" for="login-password">{{ t('auth.passLabel') }}</label>
         <div class="input-wrap">
           <span class="material-icons input-icon">lock</span>
           <input
@@ -135,7 +138,7 @@ const handleGoogleLogin = async () => {
         <span class="keep-box" :class="{ 'keep-box--on': keepSession }">
           <span v-if="keepSession" class="material-icons keep-check">check</span>
         </span>
-        <span class="keep-label">Mantener sesión iniciada</span>
+        <span class="keep-label">{{ t('auth.keepSession') }}</span>
       </label>
 
       <!-- Error -->
@@ -147,14 +150,14 @@ const handleGoogleLogin = async () => {
       <!-- Botón enviar -->
       <button type="submit" class="submit-btn" :disabled="isLoading">
         <span v-if="isLoading" class="btn-spinner"></span>
-        <span>{{ isLoading ? 'Ingresando...' : 'Iniciar Sesión' }}</span>
+        <span>{{ isLoading ? t('auth.loggingIn') : t('auth.loginTab') }}</span>
       </button>
     </form>
 
     <!-- Switch a registro -->
     <p class="switch-text">
-      ¿No tienes cuenta?
-      <button type="button" class="switch-link" @click="emit('toggle')">Regístrate aquí</button>
+      {{ t('auth.noAccount') }}
+      <button type="button" class="switch-link" @click="emit('toggle')">{{ t('auth.registerHere') }}</button>
     </p>
   </div>
 </template>

frontend/src/components/auth/RegisterForm.vue

@@ -4,8 +4,10 @@ import { useRouter } from 'vue-router'
 import { supabase } from '@/supabase'
 import { useAuthStore } from '@/stores/auth'
 import { analyticsService } from '@/services/analyticsService'
+import { useI18n } from 'vue-i18n'
 
 const emit = defineEmits(['toggle', 'success'])
+const { t } = useI18n()
 
 const router = useRouter()
 const authStore = useAuthStore()
@@ -13,6 +15,7 @@ const authStore = useAuthStore()
 const fullName = ref('')
 const email = ref('')
 const password = ref('')
+const autoLocation = ref(false)
 const isLoading = ref(false)
 const errorMessage = ref('')
 const successMessage = ref('')
@@ -26,14 +29,14 @@ const handleRegister = async () => {
     const cleanEmail = email.value.trim().toLowerCase()
     const cleanPass = password.value
 
-    await authStore.register(cleanEmail, cleanPass, fullName.value.trim())
+    await authStore.register(cleanEmail, cleanPass, fullName.value.trim(), autoLocation.value)
 
     analyticsService.logEvent({
       event_name: 'sign_up',
       properties: { method: 'email' }
     })
 
-    successMessage.value = '¡Cuenta creada con éxito!'
+    successMessage.value = t('auth.successTitle')
 
     // Delay navigation so user can see the success card
     setTimeout(() => {
@@ -43,9 +46,9 @@ const handleRegister = async () => {
   } catch (error: any) {
     console.error('Error detallado de registro:', error)
     if (error.message?.includes('User already registered') || error.message?.includes('already exists')) {
-      errorMessage.value = 'El correo ya está registrado.'
+      errorMessage.value = t('auth.emailRegistered')
     } else {
-      errorMessage.value = `Error: ${error.message || 'Error desconocido'}`
+      errorMessage.value = `${t('common.error')}: ${error.message || t('common.noData')}`
     }
   } finally {
     isLoading.value = false
@@ -75,7 +78,7 @@ const handleGoogleRegister = async () => {
     // Redirect happens automatically
   } catch (error: any) {
     console.error('Error Google Register:', error)
-    errorMessage.value = `Error con Google: ${error.message || 'Intenta de nuevo'}`
+    errorMessage.value = `Error Google: ${error.message || t('common.error')}`
   } finally {
     isLoading.value = false
   }
@@ -88,7 +91,7 @@ const handleGoogleRegister = async () => {
     <!-- Éxito -->
     <div v-if="successMessage" class="success-card">
       <span class="material-icons success-icon">check_circle</span>
-      <h3 class="success-title">¡Registro exitoso!</h3>
+      <h3 class="success-title">{{ t('auth.successTitle') }}</h3>
       <p class="success-desc">{{ successMessage }}</p>
     </div>
 
@@ -103,12 +106,12 @@ const handleGoogleRegister = async () => {
         @click="handleGoogleRegister"
       >
         <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" width="20" height="20" alt="Google" />
-        <span>Registrarse con Google</span>
+        <span>{{ t('auth.googleRegister') }}</span>
       </button>
 
       <div class="divider">
         <span class="divider-line"></span>
-        <span class="divider-text">o con correo</span>
+        <span class="divider-text">{{ t('auth.orEmail') }}</span>
         <span class="divider-line"></span>
       </div>
 
@@ -116,14 +119,14 @@ const handleGoogleRegister = async () => {
 
       <!-- Nombre -->
       <div class="field">
-        <label class="field-label" for="reg-name">Nombre completo</label>
+        <label class="field-label" for="reg-name">{{ t('auth.fullNameLabel') }}</label>
         <div class="input-wrap">
           <span class="material-icons input-icon">person</span>
           <input
             id="reg-name"
             type="text"
             v-model="fullName"
-            placeholder="Tu nombre"
+            :placeholder="t('auth.fullNamePlaceholder')"
             required
             autocomplete="name"
             class="field-input"
@@ -133,14 +136,14 @@ const handleGoogleRegister = async () => {
 
       <!-- Email -->
       <div class="field">
-        <label class="field-label" for="reg-email">Correo electrónico</label>
+        <label class="field-label" for="reg-email">{{ t('auth.emailLabel') }}</label>
         <div class="input-wrap">
           <span class="material-icons input-icon">alternate_email</span>
           <input
             id="reg-email"
             type="email"
             v-model="email"
-            placeholder="tu@correo.com"
+            :placeholder="t('auth.emailPlaceholder')"
             required
             autocomplete="email"
             class="field-input"
@@ -150,14 +153,14 @@ const handleGoogleRegister = async () => {
 
       <!-- Contraseña -->
       <div class="field">
-        <label class="field-label" for="reg-password">Contraseña</label>
+        <label class="field-label" for="reg-password">{{ t('auth.passLabel') }}</label>
         <div class="input-wrap">
           <span class="material-icons input-icon">lock</span>
           <input
             id="reg-password"
             :type="showPassword ? 'text' : 'password'"
             v-model="password"
-            placeholder="Mínimo 8 caracteres"
+            :placeholder="t('auth.passMin8')"
             required
             minlength="8"
             autocomplete="new-password"
@@ -174,6 +177,15 @@ const handleGoogleRegister = async () => {
         </div>
       </div>
 
+      <!-- Ubicación Inteligente -->
+      <label class="keep-session">
+        <input type="checkbox" v-model="autoLocation" class="keep-checkbox" />
+        <span class="keep-box" :class="{ 'keep-box--on': autoLocation }">
+          <span v-if="autoLocation" class="material-icons keep-check">check</span>
+        </span>
+        <span class="keep-label">{{ t('auth.smartLocation') }}</span>
+      </label>
+
       <!-- Error -->
       <p v-if="errorMessage" class="error-msg">
         <span class="material-icons error-icon">error_outline</span>
@@ -183,14 +195,14 @@ const handleGoogleRegister = async () => {
       <!-- Botón enviar -->
       <button type="submit" class="submit-btn" :disabled="isLoading">
         <span v-if="isLoading" class="btn-spinner"></span>
-        <span>{{ isLoading ? 'Creando cuenta...' : 'Crear Cuenta' }}</span>
+        <span>{{ isLoading ? t('auth.creatingAccount') : t('auth.registerTab') }}</span>
       </button>
     </form>
 
     <!-- Switch a login -->
     <p class="switch-text">
-      ¿Ya tienes cuenta?
-      <button type="button" class="switch-link" @click="emit('toggle')">Inicia sesión</button>
+      {{ t('auth.hasAccount') }}
+      <button type="button" class="switch-link" @click="emit('toggle')">{{ t('auth.loginHere') }}</button>
     </p>
 
     </template>
@@ -441,4 +453,45 @@ const handleGoogleRegister = async () => {
   text-decoration: underline;
   text-underline-offset: 2px;
 }
+
+/* Mantener sesión (reutilizado para Smart Location) */
+.keep-session {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  cursor: pointer;
+  margin-top: 0.25rem;
+}
+
+.keep-checkbox {
+  display: none;
+}
+
+.keep-box {
+  width: 1.125rem;
+  height: 1.125rem;
+  border: 1.5px solid var(--border-color);
+  border-radius: 0.375rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.keep-box--on {
+  background: var(--active-color);
+  border-color: var(--active-color);
+}
+
+.keep-check {
+  font-size: 0.875rem;
+  color: #101820;
+}
+
+.keep-label {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
 </style>