SIB/frontend/src/components/auth/RegisterForm.vue

<script setup lang="ts">
import { ref } from 'vue'
import { authService } from '@/services/authService'
import { analyticsService } from '@/services/analyticsService'

const emit = defineEmits(['toggle', 'success'])

const fullName = ref('')
const email = ref('')
const password = ref('')
const isLoading = ref(false)
const errorMessage = ref('')
const successMessage = ref('')

const handleRegister = async () => {
  isLoading.value = true
  errorMessage.value = ''
  
  try {
    await authService.registerPassenger({
      full_name: fullName.value,
      email: email.value,
      password: password.value
    })
    
    analyticsService.logEvent({ 
      event_name: 'sign_up', 
      properties: { method: 'email' } 
    })
    
    successMessage.value = 'Registro exitoso. Ahora puedes entrar.'
    setTimeout(() => {
      emit('success')
    }, 2000)
  } catch (error: any) {
    errorMessage.value = error.response?.data?.detail || 'Error al crear la cuenta.'
  } finally {
    isLoading.value = false
  }
}
</script>

<template>
  <div class="register-hud">
    <div v-if="successMessage" class="bg-primary/10 border border-primary/50 p-6 rounded-3xl text-center mb-6">
      <span class="material-icons text-primary text-4xl mb-2">verified_user</span>
      <h3 class="text-white font-black uppercase text-sm mb-1">Acceso Concedido</h3>
      <p class="text-xs text-primary/80 font-bold uppercase">{{ successMessage }}</p>
    </div>

    <form v-else @submit.prevent="handleRegister" class="space-y-4">
      <div class="space-y-1.5">
        <label class="text-[10px] font-black text-primary uppercase tracking-widest ml-1">Identidad de Usuario</label>
        <div class="relative group">
          <span class="material-icons absolute left-4 top-1/2 -translate-y-1/2 text-primary/40 text-sm">badge</span>
          <input 
            type="text" 
            v-model="fullName" 
            placeholder="NOMBRE COMPLETO" 
            required 
            class="w-full pl-12 pr-4 h-14 bg-white/5 border border-white/10 rounded-2xl text-white font-bold placeholder:text-slate-600 focus:border-primary focus:ring-0 transition-all uppercase text-sm"
          />
        </div>
      </div>

      <div class="space-y-1.5">
        <label class="text-[10px] font-black text-primary uppercase tracking-widest ml-1">Terminal de Correo</label>
        <div class="relative group">
          <span class="material-icons absolute left-4 top-1/2 -translate-y-1/2 text-primary/40 text-sm">alternate_email</span>
          <input 
            type="email" 
            v-model="email" 
            placeholder="USUARIO@SIBU.COM" 
            required 
            class="w-full pl-12 pr-4 h-14 bg-white/5 border border-white/10 rounded-2xl text-white font-bold placeholder:text-slate-600 focus:border-primary focus:ring-0 transition-all uppercase text-sm"
          />
        </div>
      </div>
      
      <div class="space-y-1.5">
        <label class="text-[10px] font-black text-primary uppercase tracking-widest ml-1">Definir Código de Acceso</label>
        <div class="relative group">
          <span class="material-icons absolute left-4 top-1/2 -translate-y-1/2 text-primary/40 text-sm">security</span>
          <input 
            type="password" 
            v-model="password" 
            placeholder="MÍNIMO 8 CARACTERES" 
            required 
            minlength="8"
            class="w-full pl-12 pr-4 h-14 bg-white/5 border border-white/10 rounded-2xl text-white font-bold placeholder:text-slate-600 focus:border-primary focus:ring-0 transition-all text-sm"
          />
        </div>
      </div>
      
      <p v-if="errorMessage" class="text-xs font-bold text-red-500 uppercase tracking-tight text-center">{{ errorMessage }}</p>
      
      <button 
        type="submit" 
        class="w-full h-14 bg-primary text-slate-900 rounded-2xl font-black uppercase tracking-[0.2em] text-xs shadow-xl shadow-primary/20 active:scale-95 transition-all mt-6"
        :disabled="isLoading"
      >
        {{ isLoading ? 'Procesando Datos...' : 'Registrar Credenciales' }}
      </button>
    </form>
    
    <div class="mt-8 text-center">
      <p class="text-[11px] font-bold text-slate-500 uppercase">
        ¿Ya tienes autorización? 
        <button @click="emit('toggle')" class="text-primary hover:underline ml-1">Regresar al Login</button>
      </p>
    </div>
  </div>
</template>