feat(chat): identificación por correo con registro automático
- Reemplaza campo teléfono por correo electrónico en el inicio del chat - Si el correo existe: envía OTP y abre el chat - Si no existe: ofrece crear cuenta automáticamente (pide nombre) - Si rechaza registro: vuelve al formulario inicial - Cuenta nueva se crea con contraseña aleatoria Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
536377363c
commit
a693ce2527
@@ -2,8 +2,8 @@
|
||||
class="w-full flex flex-col bg-[#111b21]"
|
||||
style="height: 100vh; height: 100dvh; height: -webkit-fill-available; max-width: 480px; margin: 0 auto;">
|
||||
|
||||
{{-- ══ PASO 1: Formulario de inicio ══ --}}
|
||||
@if ($paso === 'telefono')
|
||||
{{-- ══ PASO 1: Ingreso de correo ══ --}}
|
||||
@if ($paso === 'email')
|
||||
<div class="flex flex-col items-center justify-center flex-1 px-5 safe-top safe-bottom safe-left safe-right">
|
||||
<div class="w-full bg-[#202c33] rounded-2xl shadow-2xl p-7">
|
||||
|
||||
@@ -14,37 +14,74 @@
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="text-white text-2xl font-semibold">Chat en vivo</h1>
|
||||
<p class="text-[#8696a0] text-sm mt-1 text-center">Ingresa tu número para comenzar</p>
|
||||
<p class="text-[#8696a0] text-sm mt-1 text-center">Ingresa tu correo para comenzar</p>
|
||||
</div>
|
||||
|
||||
<form wire:submit.prevent="iniciar" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-[#8696a0] text-xs font-medium mb-1.5 uppercase tracking-wider">Teléfono *</label>
|
||||
<input wire:model.defer="telefono" type="tel" inputmode="tel" autocomplete="tel"
|
||||
placeholder="Ej: 3001234567"
|
||||
class="w-full bg-[#2a3942] text-white rounded-xl px-4 py-3.5 outline-none border border-transparent focus:border-[#00a884] transition placeholder-[#8696a0]"
|
||||
style="color-scheme: dark;">
|
||||
@error('telefono') <span class="text-red-400 text-xs mt-1 block">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[#8696a0] text-xs font-medium mb-1.5 uppercase tracking-wider">Nombre (opcional)</label>
|
||||
<input wire:model.defer="nombre" type="text" autocomplete="name"
|
||||
placeholder="Tu nombre"
|
||||
<label class="block text-[#8696a0] text-xs font-medium mb-1.5 uppercase tracking-wider">Correo electrónico *</label>
|
||||
<input wire:model.defer="email" type="email" inputmode="email" autocomplete="email"
|
||||
placeholder="tucorreo@ejemplo.com"
|
||||
class="w-full bg-[#2a3942] text-white rounded-xl px-4 py-3.5 outline-none border border-transparent focus:border-[#00a884] transition placeholder-[#8696a0]"
|
||||
style="color-scheme: dark;">
|
||||
@error('email') <span class="text-red-400 text-xs mt-1 block">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
<button type="submit"
|
||||
class="w-full bg-[#00a884] active:bg-[#06cf9c] text-white font-semibold rounded-xl transition shadow-lg"
|
||||
style="min-height: 48px;">
|
||||
<span wire:loading.remove wire:target="iniciar">Comenzar chat →</span>
|
||||
<span wire:loading wire:target="iniciar">Conectando...</span>
|
||||
<span wire:loading.remove wire:target="iniciar">Continuar →</span>
|
||||
<span wire:loading wire:target="iniciar">Verificando...</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ══ PASO 2: Verificación OTP ══ --}}
|
||||
{{-- ══ PASO 2: No existe — ofrecer registro ══ --}}
|
||||
@elseif ($paso === 'registro')
|
||||
<div class="flex flex-col items-center justify-center flex-1 px-5 safe-top safe-bottom safe-left safe-right">
|
||||
<div class="w-full bg-[#202c33] rounded-2xl shadow-2xl p-7">
|
||||
|
||||
<div class="flex flex-col items-center mb-6">
|
||||
<div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mb-4 shadow-lg">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="text-white text-lg font-semibold text-center">No encontramos tu cuenta</h1>
|
||||
<p class="text-[#8696a0] text-sm mt-2 text-center leading-relaxed">
|
||||
No existe una cuenta con el correo<br>
|
||||
<span class="text-white font-medium">{{ $email }}</span>
|
||||
</p>
|
||||
<p class="text-[#8696a0] text-sm mt-3 text-center">¿Deseas crear una cuenta?</p>
|
||||
</div>
|
||||
|
||||
<form wire:submit.prevent="crearCuenta" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-[#8696a0] text-xs font-medium mb-1.5 uppercase tracking-wider">Tu nombre *</label>
|
||||
<input wire:model.defer="nombreRegistro" type="text" autocomplete="name"
|
||||
placeholder="¿Cómo te llamas?"
|
||||
class="w-full bg-[#2a3942] text-white rounded-xl px-4 py-3.5 outline-none border border-transparent focus:border-[#00a884] transition placeholder-[#8696a0]"
|
||||
style="color-scheme: dark;">
|
||||
@error('nombreRegistro') <span class="text-red-400 text-xs mt-1 block">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
<button type="submit"
|
||||
class="w-full bg-[#00a884] active:bg-[#06cf9c] text-white font-semibold rounded-xl transition shadow-lg"
|
||||
style="min-height: 48px;">
|
||||
<span wire:loading.remove wire:target="crearCuenta">Sí, crear cuenta →</span>
|
||||
<span wire:loading wire:target="crearCuenta">Creando cuenta...</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<button wire:click="rechazarRegistro" type="button"
|
||||
class="w-full mt-3 text-[#8696a0] text-sm hover:text-white transition py-2">
|
||||
No, volver
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ══ PASO 4: Verificación OTP ══ --}}
|
||||
@elseif ($paso === 'verificacion')
|
||||
<div class="flex flex-col items-center justify-center flex-1 px-5 safe-top safe-bottom safe-left safe-right">
|
||||
<div class="w-full bg-[#202c33] rounded-2xl shadow-2xl p-7">
|
||||
@@ -92,7 +129,7 @@
|
||||
<span wire:loading.remove wire:target="reenviarCodigo">¿No llegó? Reenviar código</span>
|
||||
<span wire:loading wire:target="reenviarCodigo">Enviando...</span>
|
||||
</button>
|
||||
<button wire:click="$set('paso', 'telefono')" type="button"
|
||||
<button wire:click="$set('paso', 'email')" type="button"
|
||||
class="text-[#8696a0] text-xs hover:text-white">
|
||||
Volver
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user