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

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>