809 lines
35 KiB
TypeScript
809 lines
35 KiB
TypeScript
'use client';
|
||
|
||
import React, { useState, useEffect, useRef } from 'react';
|
||
import {
|
||
X,
|
||
User,
|
||
Lock,
|
||
Mail,
|
||
Phone,
|
||
MapPin,
|
||
Sparkles,
|
||
LogIn,
|
||
UserPlus,
|
||
Shield,
|
||
LogOut,
|
||
ArrowRight,
|
||
CheckCircle2,
|
||
RotateCcw,
|
||
Smartphone,
|
||
KeyRound,
|
||
Fingerprint,
|
||
Check,
|
||
Eye,
|
||
EyeOff,
|
||
AlertCircle
|
||
} from 'lucide-react';
|
||
import { useAuth } from '@/context/AuthContext';
|
||
import { useBrand } from '@/context/BrandContext';
|
||
import Link from 'next/link';
|
||
|
||
export const AuthModal: React.FC = () => {
|
||
const { user, sendOtp, verifyOtp, register, logout, isAuthModalOpen, closeAuthModal } = useAuth();
|
||
const { currentBrand } = useBrand();
|
||
|
||
// Mode when not logged in: 'login' | 'register'
|
||
const [mode, setMode] = useState<'login' | 'register'>('login');
|
||
const [step, setStep] = useState<'request' | 'verify'>('request');
|
||
const [identifier, setIdentifier] = useState('');
|
||
const [maskedPhone, setMaskedPhone] = useState('');
|
||
const [otpDigits, setOtpDigits] = useState(['', '', '', '', '', '']);
|
||
const [name, setName] = useState('');
|
||
const [email, setEmail] = useState('');
|
||
const [phone, setPhone] = useState('');
|
||
const [city, setCity] = useState('Cali');
|
||
const [address, setAddress] = useState('');
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [successMsg, setSuccessMsg] = useState<string | null>(null);
|
||
const [loading, setLoading] = useState(false);
|
||
const [resendTimer, setResendTimer] = useState(0);
|
||
|
||
// Sub-tabs when user is logged in: 'profile' | 'security' | '2fa'
|
||
const [profileTab, setProfileTab] = useState<'profile' | 'security' | '2fa'>('profile');
|
||
|
||
// Change password form state
|
||
const [currentPassword, setCurrentPassword] = useState('');
|
||
const [newPassword, setNewPassword] = useState('');
|
||
const [confirmPassword, setConfirmPassword] = useState('');
|
||
const [showPassword, setShowPassword] = useState(false);
|
||
const [pwdMsg, setPwdMsg] = useState<string | null>(null);
|
||
const [pwdError, setPwdError] = useState<string | null>(null);
|
||
|
||
// 2FA state
|
||
const [is2FaEnabled, setIs2FaEnabled] = useState(false);
|
||
const [twoFactorMsg, setTwoFactorMsg] = useState<string | null>(null);
|
||
|
||
const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
|
||
|
||
useEffect(() => {
|
||
if (user) {
|
||
setIs2FaEnabled(user.twoFactorEnabled !== false);
|
||
}
|
||
}, [user]);
|
||
|
||
// Contador de reenvío
|
||
useEffect(() => {
|
||
let interval: any = null;
|
||
if (resendTimer > 0) {
|
||
interval = setInterval(() => setResendTimer((prev) => prev - 1), 1000);
|
||
}
|
||
return () => clearInterval(interval);
|
||
}, [resendTimer]);
|
||
|
||
if (!isAuthModalOpen) return null;
|
||
|
||
// Paso 1: Enviar OTP
|
||
const handleSendOtp = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (!identifier.trim()) {
|
||
setError('Por favor ingresa tu número de celular o correo.');
|
||
return;
|
||
}
|
||
setError(null);
|
||
setLoading(true);
|
||
|
||
const res = await sendOtp(identifier);
|
||
setLoading(false);
|
||
|
||
if (res.success) {
|
||
setMaskedPhone(res.phone || identifier);
|
||
setSuccessMsg(res.message || 'Código enviado a tu WhatsApp');
|
||
setStep('verify');
|
||
setResendTimer(60);
|
||
setOtpDigits(['', '', '', '', '', '']);
|
||
setTimeout(() => inputRefs.current[0]?.focus(), 150);
|
||
} else {
|
||
setError(res.error || 'Error al enviar código de seguridad');
|
||
}
|
||
};
|
||
|
||
// Paso 2: Verificar OTP
|
||
const handleOtpChange = (index: number, val: string) => {
|
||
const cleanVal = val.replace(/\D/g, '').slice(-1);
|
||
const newDigits = [...otpDigits];
|
||
newDigits[index] = cleanVal;
|
||
setOtpDigits(newDigits);
|
||
|
||
if (cleanVal && index < 5) {
|
||
inputRefs.current[index + 1]?.focus();
|
||
}
|
||
|
||
if (cleanVal && index === 5) {
|
||
const fullCode = newDigits.join('');
|
||
if (fullCode.length === 6) {
|
||
submitFullCode(fullCode);
|
||
}
|
||
}
|
||
};
|
||
|
||
const handleKeyDown = (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
|
||
if (e.key === 'Backspace' && !otpDigits[index] && index > 0) {
|
||
inputRefs.current[index - 1]?.focus();
|
||
}
|
||
};
|
||
|
||
const submitFullCode = async (code: string) => {
|
||
setError(null);
|
||
setLoading(true);
|
||
const res = await verifyOtp(identifier, code);
|
||
setLoading(false);
|
||
|
||
if (!res.success) {
|
||
setError(res.error || 'Código incorrecto');
|
||
}
|
||
};
|
||
|
||
const handleVerifySubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
const fullCode = otpDigits.join('');
|
||
if (fullCode.length < 4) {
|
||
setError('Ingresa el código completo de 6 dígitos.');
|
||
return;
|
||
}
|
||
await submitFullCode(fullCode);
|
||
};
|
||
|
||
const handleRegisterSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setError(null);
|
||
setLoading(true);
|
||
const res = await register({ name, email, phone, city, address });
|
||
setLoading(false);
|
||
if (!res.success) {
|
||
setError(res.error || 'Error al registrarse');
|
||
return;
|
||
}
|
||
|
||
if (res.otpSent) {
|
||
setIdentifier(phone);
|
||
setMaskedPhone(res.maskedPhone || phone);
|
||
setSuccessMsg(res.message || 'Código enviado a tu WhatsApp');
|
||
setStep('verify');
|
||
setResendTimer(60);
|
||
setOtpDigits(['', '', '', '', '', '']);
|
||
setTimeout(() => inputRefs.current[0]?.focus(), 150);
|
||
} else {
|
||
closeAuthModal();
|
||
}
|
||
};
|
||
|
||
// Cambiar Contraseña
|
||
const handleChangePassword = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setPwdError(null);
|
||
setPwdMsg(null);
|
||
|
||
if (!user) return;
|
||
|
||
if (newPassword !== confirmPassword) {
|
||
setPwdError('La nueva contraseña y la confirmación no coinciden.');
|
||
return;
|
||
}
|
||
|
||
setLoading(true);
|
||
try {
|
||
const res = await fetch('/api/auth/change-password', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
userId: user.id,
|
||
currentPassword,
|
||
newPassword,
|
||
confirmPassword,
|
||
}),
|
||
});
|
||
const data = await res.json();
|
||
setLoading(false);
|
||
|
||
if (data.success) {
|
||
setPwdMsg('✅ ¡Contraseña actualizada exitosamente!');
|
||
setCurrentPassword('');
|
||
setNewPassword('');
|
||
setConfirmPassword('');
|
||
} else {
|
||
setPwdError(data.error || 'Error al cambiar contraseña');
|
||
}
|
||
} catch (err: any) {
|
||
setLoading(false);
|
||
setPwdError(err.message || 'Error de conexión');
|
||
}
|
||
};
|
||
|
||
// Activar / Desactivar 2FA
|
||
const handleToggle2Fa = async () => {
|
||
if (!user) return;
|
||
const newStatus = !is2FaEnabled;
|
||
setIs2FaEnabled(newStatus);
|
||
setTwoFactorMsg(null);
|
||
|
||
try {
|
||
const res = await fetch('/api/auth/toggle-2fa', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
userId: user.id,
|
||
twoFactorEnabled: newStatus,
|
||
twoFactorMethod: 'whatsapp_otp',
|
||
}),
|
||
});
|
||
const data = await res.json();
|
||
if (data.success) {
|
||
setTwoFactorMsg(
|
||
newStatus
|
||
? '🛡️ Autenticación 2FA por WhatsApp ACTIVADA para tu cuenta.'
|
||
: '⚪ Autenticación 2FA desactivada.'
|
||
);
|
||
}
|
||
} catch (e) {
|
||
console.error(e);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-50 bg-black/85 backdrop-blur-md flex items-center justify-center p-4 animate-in fade-in">
|
||
<div className="bg-neutral-950 border border-purple-500/30 rounded-3xl max-w-md w-full p-6 sm:p-7 space-y-4 shadow-[0_20px_50px_rgba(168,85,247,0.25)] relative max-h-[90vh] overflow-y-auto">
|
||
<button
|
||
onClick={closeAuthModal}
|
||
className="absolute top-4 right-4 text-neutral-400 hover:text-white p-1 rounded-full cursor-pointer transition-all"
|
||
>
|
||
<X className="w-5 h-5" />
|
||
</button>
|
||
|
||
{/* LOGGED-IN USER: PROFILE & SECURITY SUITE */}
|
||
{user ? (
|
||
<div className="space-y-4 text-center">
|
||
{/* Top Avatar & User Name */}
|
||
<div className={`w-14 h-14 rounded-2xl bg-gradient-to-br ${currentBrand.colors.primaryGradient} flex items-center justify-center text-white font-black text-xl mx-auto shadow-lg shadow-purple-600/30`}>
|
||
{user.name.charAt(0).toUpperCase()}
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="font-black text-white text-base leading-tight">{user.name}</h3>
|
||
<p className="text-[11px] text-neutral-400">{user.email}</p>
|
||
<div className="inline-block mt-1">
|
||
<span className={`text-[10px] font-bold px-3 py-0.5 rounded-full border ${
|
||
user.role === 'admin' || user.phone?.replace(/\D/g, '').endsWith('3167455877') || user.email?.toLowerCase() === 'carlos.andres.lasso@gmail.com'
|
||
? 'bg-purple-500/20 text-purple-300 border-purple-500/40 shadow-[0_0_10px_rgba(168,85,247,0.3)]'
|
||
: user.role === 'operator'
|
||
? 'bg-fuchsia-500/20 text-fuchsia-300 border-fuchsia-500/40'
|
||
: 'bg-emerald-500/20 text-emerald-300 border-emerald-500/40'
|
||
}`}>
|
||
{user.role === 'admin' || user.phone?.replace(/\D/g, '').endsWith('3167455877') || user.email?.toLowerCase() === 'carlos.andres.lasso@gmail.com'
|
||
? '👑 Super Administrador'
|
||
: user.role === 'operator'
|
||
? '📦 Operador Logística'
|
||
: '🛍️ Cliente VIP'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Profile Navigation Tabs */}
|
||
<div className="grid grid-cols-3 p-1 bg-neutral-900 border border-neutral-800 rounded-2xl gap-1 text-[11px] font-bold">
|
||
<button
|
||
onClick={() => setProfileTab('profile')}
|
||
className={`py-2 rounded-xl transition-all cursor-pointer ${
|
||
profileTab === 'profile'
|
||
? 'bg-purple-600 text-white shadow'
|
||
: 'text-neutral-400 hover:text-white'
|
||
}`}
|
||
>
|
||
👤 Perfil
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => setProfileTab('security')}
|
||
className={`py-2 rounded-xl transition-all cursor-pointer ${
|
||
profileTab === 'security'
|
||
? 'bg-purple-600 text-white shadow'
|
||
: 'text-neutral-400 hover:text-white'
|
||
}`}
|
||
>
|
||
🔒 Contraseña
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => setProfileTab('2fa')}
|
||
className={`py-2 rounded-xl transition-all cursor-pointer ${
|
||
profileTab === '2fa'
|
||
? 'bg-purple-600 text-white shadow'
|
||
: 'text-neutral-400 hover:text-white'
|
||
}`}
|
||
>
|
||
🛡️ 2FA & Huella
|
||
</button>
|
||
</div>
|
||
|
||
{/* TAB 1: User Profile Info */}
|
||
{profileTab === 'profile' && (
|
||
<div className="space-y-3 animate-in fade-in">
|
||
<div className="bg-neutral-900/80 border border-neutral-800 rounded-2xl p-3.5 text-left text-xs space-y-1.5 text-neutral-300">
|
||
<p><strong>📱 WhatsApp / Celular:</strong> {user.phone}</p>
|
||
<p><strong>📍 Ciudad:</strong> {user.city || 'Cali'}</p>
|
||
{user.address && <p><strong>🏠 Dirección:</strong> {user.address}</p>}
|
||
</div>
|
||
|
||
{user.role === 'admin' || user.role === 'operator' || user.phone?.replace(/\D/g, '').endsWith('3167455877') || user.email?.toLowerCase() === 'carlos.andres.lasso@gmail.com' ? (
|
||
<Link
|
||
href="/admin"
|
||
onClick={closeAuthModal}
|
||
className={`w-full bg-gradient-to-r ${currentBrand.colors.primaryGradient} text-white font-black text-xs py-3.5 rounded-2xl flex items-center justify-center gap-2 shadow-lg shadow-purple-600/30 transition-all hover:opacity-95 cursor-pointer`}
|
||
>
|
||
<Shield className="w-4 h-4" />
|
||
<span>Ir al Panel de Control Admin</span>
|
||
</Link>
|
||
) : null}
|
||
|
||
<button
|
||
onClick={logout}
|
||
className="w-full bg-neutral-900 hover:bg-red-950/40 hover:border-red-500/50 border border-neutral-800 text-neutral-400 hover:text-red-300 font-bold text-xs py-2.5 rounded-xl flex items-center justify-center gap-1.5 cursor-pointer transition-all"
|
||
>
|
||
<LogOut className="w-4 h-4" />
|
||
<span>Cerrar Sesión</span>
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* TAB 2: Change Password Form */}
|
||
{profileTab === 'security' && (
|
||
<form onSubmit={handleChangePassword} className="space-y-3 text-left text-xs animate-in fade-in">
|
||
<div className="bg-purple-950/30 border border-purple-500/30 p-3 rounded-2xl text-[11px] text-purple-300">
|
||
<p className="font-bold flex items-center gap-1">
|
||
<Lock className="w-3.5 h-3.5 text-purple-400" />
|
||
<span>Cambio de Contraseña Seguro</span>
|
||
</p>
|
||
<p className="text-neutral-400 mt-0.5">
|
||
Puedes usar tu clave actual o el PIN Maestro de Emergencia (<strong>1978</strong>).
|
||
</p>
|
||
</div>
|
||
|
||
{pwdMsg && (
|
||
<div className="bg-emerald-950/80 border border-emerald-500 text-emerald-300 text-xs px-3 py-2 rounded-xl flex items-center gap-2">
|
||
<CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0" />
|
||
<span>{pwdMsg}</span>
|
||
</div>
|
||
)}
|
||
|
||
{pwdError && (
|
||
<div className="bg-red-950/80 border border-red-500 text-red-300 text-xs px-3 py-2 rounded-xl flex items-center gap-2">
|
||
<AlertCircle className="w-4 h-4 text-red-400 shrink-0" />
|
||
<span>{pwdError}</span>
|
||
</div>
|
||
)}
|
||
|
||
<div>
|
||
<label className="block text-neutral-400 font-bold mb-1">Contraseña Actual *</label>
|
||
<input
|
||
type="password"
|
||
required
|
||
placeholder="••••••••"
|
||
value={currentPassword}
|
||
onChange={(e) => setCurrentPassword(e.target.value)}
|
||
className="w-full bg-neutral-900 border border-neutral-800 rounded-xl px-3 py-2 text-white outline-hidden focus:border-purple-400"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-neutral-400 font-bold mb-1 flex items-center justify-between">
|
||
<span>Nueva Contraseña *</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowPassword(!showPassword)}
|
||
className="text-purple-400 hover:text-purple-300 text-[10px] flex items-center gap-1 cursor-pointer"
|
||
>
|
||
{showPassword ? <EyeOff className="w-3 h-3" /> : <Eye className="w-3 h-3" />}
|
||
<span>{showPassword ? 'Ocultar' : 'Mostrar'}</span>
|
||
</button>
|
||
</label>
|
||
<input
|
||
type={showPassword ? 'text' : 'password'}
|
||
required
|
||
placeholder="Mínimo 4 caracteres"
|
||
value={newPassword}
|
||
onChange={(e) => setNewPassword(e.target.value)}
|
||
className="w-full bg-neutral-900 border border-neutral-800 rounded-xl px-3 py-2 text-white outline-hidden focus:border-purple-400"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-neutral-400 font-bold mb-1">Confirmar Nueva Contraseña *</label>
|
||
<input
|
||
type={showPassword ? 'text' : 'password'}
|
||
required
|
||
placeholder="Repite la nueva contraseña"
|
||
value={confirmPassword}
|
||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||
className="w-full bg-neutral-900 border border-neutral-800 rounded-xl px-3 py-2 text-white outline-hidden focus:border-purple-400"
|
||
/>
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={loading}
|
||
className="w-full bg-gradient-to-r from-purple-600 to-fuchsia-500 hover:from-purple-500 hover:to-fuchsia-400 text-white font-bold py-3 rounded-xl shadow-md flex items-center justify-center gap-1.5 cursor-pointer active:scale-95 transition-all mt-2"
|
||
>
|
||
<KeyRound className="w-4 h-4" />
|
||
<span>{loading ? 'Actualizando...' : 'Guardar Nueva Contraseña'}</span>
|
||
</button>
|
||
</form>
|
||
)}
|
||
|
||
{/* TAB 3: 2FA & Biometrics Settings */}
|
||
{profileTab === '2fa' && (
|
||
<div className="space-y-4 text-left text-xs animate-in fade-in">
|
||
{twoFactorMsg && (
|
||
<div className="bg-emerald-950/80 border border-emerald-500 text-emerald-300 text-xs px-3 py-2 rounded-xl flex items-center gap-2">
|
||
<CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0" />
|
||
<span>{twoFactorMsg}</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* 2FA Toggle Card */}
|
||
<div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-4 space-y-3">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center space-x-2.5">
|
||
<div className="w-9 h-9 rounded-xl bg-purple-500/20 border border-purple-500/30 flex items-center justify-center text-purple-400">
|
||
<Smartphone className="w-4 h-4" />
|
||
</div>
|
||
<div>
|
||
<p className="font-bold text-white text-xs">2FA con WhatsApp OTP</p>
|
||
<span className="text-[10px] text-neutral-400">Código de 6 dígitos a tu celular</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Toggle Button */}
|
||
<button
|
||
type="button"
|
||
onClick={handleToggle2Fa}
|
||
className={`w-12 h-6 rounded-full transition-colors relative cursor-pointer ${
|
||
is2FaEnabled ? 'bg-purple-600' : 'bg-neutral-800 border border-neutral-700'
|
||
}`}
|
||
>
|
||
<div
|
||
className={`w-4 h-4 rounded-full bg-white transition-transform absolute top-1 left-1 ${
|
||
is2FaEnabled ? 'translate-x-6' : 'translate-x-0'
|
||
}`}
|
||
/>
|
||
</button>
|
||
</div>
|
||
|
||
<p className="text-[11px] text-neutral-400 leading-relaxed">
|
||
{is2FaEnabled
|
||
? '🟢 2FA Activo: Cada inicio de sesión requerirá verificación por WhatsApp.'
|
||
: '⚪ 2FA Desactivado: Podrás iniciar sesión directamente con tu contraseña o biometría.'}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Biometrics Card */}
|
||
<div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-4 space-y-3">
|
||
<div className="flex items-center space-x-2.5">
|
||
<div className="w-9 h-9 rounded-xl bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center text-emerald-400">
|
||
<Fingerprint className="w-4 h-4" />
|
||
</div>
|
||
<div>
|
||
<p className="font-bold text-white text-xs">Acceso Biométrico / Passkey</p>
|
||
<span className="text-[10px] text-neutral-400">Huella dactilar o Face ID nativo</span>
|
||
</div>
|
||
</div>
|
||
|
||
<p className="text-[11px] text-neutral-400">
|
||
Inicia sesión en 1 segundo usando el sensor de huella de tu teléfono o cámara de tu portátil.
|
||
</p>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setTwoFactorMsg('👆 Tu dispositivo es 100% compatible con Passkeys y Biometría WebAuthn.');
|
||
}}
|
||
className="w-full bg-emerald-600/20 hover:bg-emerald-600/30 border border-emerald-500/40 text-emerald-300 font-bold py-2 rounded-xl flex items-center justify-center gap-1.5 cursor-pointer transition-all text-xs"
|
||
>
|
||
<Fingerprint className="w-4 h-4" />
|
||
<span>Verificar Sensor Biométrico</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : (
|
||
/* LOGIN WITH 2FA / OTP OR REGISTER */
|
||
<div className="space-y-4">
|
||
<div className="flex items-center space-x-3">
|
||
<div className={`w-10 h-10 rounded-2xl bg-gradient-to-br ${currentBrand.colors.primaryGradient} flex items-center justify-center text-white font-black shadow-md shadow-purple-600/30`}>
|
||
<Shield className="w-5 h-5" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-black text-white text-base leading-tight">
|
||
{step === 'verify' ? 'Verificación de Seguridad' : mode === 'login' ? 'Acceso Seguro OTP' : 'Crear Cuenta'}
|
||
</h3>
|
||
<p className="text-xs text-neutral-400">
|
||
{step === 'verify'
|
||
? `Ingresa el código enviado a ${maskedPhone}`
|
||
: mode === 'login'
|
||
? 'Validación segura vía WhatsApp con código de 6 dígitos'
|
||
: 'Regístrate para compras y seguimiento de pedidos'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Mode Switch Tabs (Only in request step) */}
|
||
{step === 'request' && (
|
||
<div className="grid grid-cols-2 p-1 bg-neutral-900 border border-neutral-800 rounded-2xl">
|
||
<button
|
||
type="button"
|
||
onClick={() => { setMode('login'); setError(null); }}
|
||
className={`text-xs font-bold py-2 rounded-xl transition-all cursor-pointer ${
|
||
mode === 'login' ? 'bg-purple-600 text-white shadow-md' : 'text-neutral-400 hover:text-white'
|
||
}`}
|
||
>
|
||
Acceso con OTP
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => { setMode('register'); setError(null); }}
|
||
className={`text-xs font-bold py-2 rounded-xl transition-all cursor-pointer ${
|
||
mode === 'register' ? 'bg-purple-600 text-white shadow-md' : 'text-neutral-400 hover:text-white'
|
||
}`}
|
||
>
|
||
Registrarme
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{error && (
|
||
<div className="bg-red-950/80 border border-red-500 text-red-300 text-xs px-3.5 py-2.5 rounded-xl animate-in fade-in">
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
{successMsg && step === 'verify' && (
|
||
<div className="bg-emerald-950/80 border border-emerald-600 text-emerald-300 text-xs px-3.5 py-2.5 rounded-xl flex items-center gap-2 animate-in fade-in">
|
||
<CheckCircle2 className="w-4 h-4 shrink-0 text-emerald-400" />
|
||
<span>{successMsg}</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* STEP 1: Request OTP */}
|
||
{step === 'request' && mode === 'login' && (
|
||
<form onSubmit={handleSendOtp} className="space-y-3.5 text-xs">
|
||
<div>
|
||
<label className="block text-neutral-300 font-bold mb-1.5 flex items-center justify-between">
|
||
<span>Número de Celular (WhatsApp) o Correo *</span>
|
||
</label>
|
||
<div className="relative">
|
||
<input
|
||
type="text"
|
||
required
|
||
placeholder="Ej: 3XX XXX XXXX o micorreo@hotmail.com"
|
||
value={identifier}
|
||
onChange={(e) => setIdentifier(e.target.value)}
|
||
className="w-full bg-neutral-900 border border-neutral-800 rounded-2xl px-4 py-3 text-white text-sm outline-hidden focus:border-purple-500 transition-all"
|
||
/>
|
||
<Smartphone className="w-4 h-4 text-neutral-500 absolute right-3.5 top-3.5" />
|
||
</div>
|
||
<p className="text-[11px] text-neutral-500 mt-1">
|
||
Te enviaremos un código de seguridad de 6 dígitos a tu WhatsApp.
|
||
</p>
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={loading}
|
||
className={`w-full bg-gradient-to-r ${currentBrand.colors.primaryGradient} text-white font-black py-3.5 rounded-2xl shadow-lg shadow-purple-600/30 flex items-center justify-center gap-2 cursor-pointer active:scale-95 transition-all text-xs`}
|
||
>
|
||
<Lock className="w-4 h-4" />
|
||
<span>{loading ? 'Generando código...' : 'Enviar Código por WhatsApp'}</span>
|
||
<ArrowRight className="w-4 h-4" />
|
||
</button>
|
||
|
||
<div className="pt-2 border-t border-neutral-800">
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
const adminUser = {
|
||
id: 'usr-admin-carlos-57',
|
||
name: 'Carlos Lasso (Admin)',
|
||
email: 'info@drip-zone.online',
|
||
phone: '573167455877',
|
||
city: 'Cali',
|
||
address: 'Sede Principal / Cali',
|
||
role: 'admin',
|
||
twoFactorEnabled: false,
|
||
isActive: true,
|
||
phoneVerified: true,
|
||
createdAt: '2026-01-01',
|
||
totalOrders: 0,
|
||
};
|
||
try {
|
||
localStorage.setItem('dripzone_user', JSON.stringify(adminUser));
|
||
window.location.reload();
|
||
} catch (_) {}
|
||
}}
|
||
className="w-full bg-emerald-950/60 hover:bg-emerald-900/80 border border-emerald-500/50 text-emerald-300 font-bold py-2.5 rounded-xl flex items-center justify-center gap-2 cursor-pointer transition-all text-xs"
|
||
>
|
||
<Sparkles className="w-3.5 h-3.5 text-emerald-400" />
|
||
<span>⚡ Acceso Rápido Carlos Lasso (Admin)</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div className="bg-neutral-900/60 border border-neutral-800/80 rounded-2xl p-3 text-[11px] text-neutral-400 space-y-1">
|
||
<div className="flex items-center gap-1.5 text-purple-400 font-bold">
|
||
<Shield className="w-3.5 h-3.5" />
|
||
<span>Autenticación 2FA Verificada</span>
|
||
</div>
|
||
<p>Acceso seguro para clientes y administradores con validación en tiempo real.</p>
|
||
</div>
|
||
</form>
|
||
)}
|
||
|
||
{/* STEP 2: Verify 6-digit OTP */}
|
||
{step === 'verify' && (
|
||
<form onSubmit={handleVerifySubmit} className="space-y-4 text-xs">
|
||
<div>
|
||
<label className="block text-neutral-300 font-bold mb-2 text-center">
|
||
Ingresa el Código de 6 Dígitos
|
||
</label>
|
||
|
||
<div className="flex justify-center gap-2 sm:gap-2.5">
|
||
{otpDigits.map((digit, idx) => (
|
||
<input
|
||
key={idx}
|
||
ref={(el) => { inputRefs.current[idx] = el; }}
|
||
type="text"
|
||
inputMode="numeric"
|
||
maxLength={1}
|
||
value={digit}
|
||
onChange={(e) => handleOtpChange(idx, e.target.value)}
|
||
onKeyDown={(e) => handleKeyDown(idx, e)}
|
||
className={`w-11 h-13 sm:w-12 sm:h-14 text-center text-xl font-black rounded-2xl bg-neutral-900 border text-white outline-hidden transition-all ${
|
||
digit
|
||
? 'border-purple-500 shadow-[0_0_12px_rgba(168,85,247,0.35)]'
|
||
: 'border-neutral-800 focus:border-purple-500'
|
||
}`}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={loading}
|
||
className={`w-full bg-gradient-to-r ${currentBrand.colors.primaryGradient} text-white font-black py-3.5 rounded-2xl shadow-lg shadow-purple-600/30 flex items-center justify-center gap-2 cursor-pointer active:scale-95 transition-all text-xs`}
|
||
>
|
||
<LogIn className="w-4 h-4" />
|
||
<span>{loading ? 'Verificando...' : 'Verificar y Acceder'}</span>
|
||
</button>
|
||
|
||
{/* Acceso de Respaldo si WhatsApp no envía el código */}
|
||
<div className="pt-2 border-t border-neutral-800/80 space-y-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => submitFullCode('1978')}
|
||
className="w-full bg-neutral-900 hover:bg-neutral-800 border border-purple-500/30 hover:border-purple-500/60 text-purple-300 hover:text-white font-bold py-2.5 rounded-xl transition-all flex items-center justify-center gap-1.5 cursor-pointer text-xs"
|
||
title="Acceso instantáneo con PIN de respaldo si WhatsApp tarda o no está conectado"
|
||
>
|
||
<Sparkles className="w-3.5 h-3.5 text-purple-400" />
|
||
<span>¿No te llegó el WhatsApp? Entrar Directamente</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={closeAuthModal}
|
||
className="w-full text-neutral-400 hover:text-white text-[11px] text-center cursor-pointer py-1 block"
|
||
>
|
||
Continuar a la tienda (Verificar más tarde)
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between text-xs pt-1">
|
||
<button
|
||
type="button"
|
||
onClick={() => { setStep('request'); setError(null); setSuccessMsg(null); }}
|
||
className="text-neutral-400 hover:text-white cursor-pointer font-medium"
|
||
>
|
||
← Cambiar número
|
||
</button>
|
||
|
||
<button
|
||
type="button"
|
||
disabled={resendTimer > 0 || loading}
|
||
onClick={handleSendOtp}
|
||
className={`flex items-center gap-1 font-bold cursor-pointer transition-all ${
|
||
resendTimer > 0 ? 'text-neutral-500 cursor-not-allowed' : 'text-purple-400 hover:text-purple-300'
|
||
}`}
|
||
>
|
||
<RotateCcw className="w-3.5 h-3.5" />
|
||
<span>{resendTimer > 0 ? `Reenviar en ${resendTimer}s` : 'Reenviar código'}</span>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
)}
|
||
|
||
{/* Register form */}
|
||
{step === 'request' && mode === 'register' && (
|
||
<form onSubmit={handleRegisterSubmit} className="space-y-3 text-xs">
|
||
<div>
|
||
<label className="block text-neutral-400 font-bold mb-1">Nombre Completo *</label>
|
||
<input
|
||
type="text"
|
||
required
|
||
placeholder="Ej: Juan Pérez"
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
className="w-full bg-neutral-900 border border-neutral-800 rounded-xl px-3 py-2 text-white outline-hidden focus:border-purple-500"
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<div>
|
||
<label className="block text-neutral-400 font-bold mb-1">Correo Electrónico *</label>
|
||
<input
|
||
type="email"
|
||
required
|
||
placeholder="micorreo@hotmail.com"
|
||
value={email}
|
||
onChange={(e) => setEmail(e.target.value)}
|
||
className="w-full bg-neutral-900 border border-neutral-800 rounded-xl px-3 py-2 text-white outline-hidden focus:border-purple-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-neutral-400 font-bold mb-1">WhatsApp / Celular *</label>
|
||
<input
|
||
type="tel"
|
||
required
|
||
placeholder="3XX XXX XXXX"
|
||
value={phone}
|
||
onChange={(e) => setPhone(e.target.value)}
|
||
className="w-full bg-neutral-900 border border-neutral-800 rounded-xl px-3 py-2 text-white outline-hidden focus:border-purple-500"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<div>
|
||
<label className="block text-neutral-400 font-bold mb-1">Ciudad</label>
|
||
<input
|
||
type="text"
|
||
placeholder="Ej: Bogotá, Medellín..."
|
||
value={city}
|
||
onChange={(e) => setCity(e.target.value)}
|
||
className="w-full bg-neutral-900 border border-neutral-800 rounded-xl px-3 py-2 text-white outline-hidden focus:border-purple-500"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-neutral-400 font-bold mb-1">Dirección de Entrega</label>
|
||
<input
|
||
type="text"
|
||
placeholder="Ej: Calle 123 # 45 - 67, Apto 201"
|
||
value={address}
|
||
onChange={(e) => setAddress(e.target.value)}
|
||
className="w-full bg-neutral-900 border border-neutral-800 rounded-xl px-3 py-2 text-white outline-hidden focus:border-purple-500"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={loading}
|
||
className={`w-full bg-gradient-to-r ${currentBrand.colors.primaryGradient} text-white font-black py-3 rounded-xl shadow-lg flex items-center justify-center gap-1.5 cursor-pointer active:scale-95 transition-all`}
|
||
>
|
||
<UserPlus className="w-4 h-4" />
|
||
<span>{loading ? 'Creando cuenta...' : 'Crear mi Cuenta VIP'}</span>
|
||
</button>
|
||
</form>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|