'use client'; import React, { useState, useEffect, useRef } from 'react'; import { useAuth } from '@/contexts/AuthContext'; import { RiCloseLine, RiMailLine, RiLockLine, RiUserLine, RiEyeLine, RiEyeOffLine, RiCheckboxCircleFill, RiArrowLeftLine, RiLoader4Line, } from '@remixicon/react'; type View = 'login' | 'signup' | 'verify' | 'forgot' | 'reset'; interface AuthModalProps { isOpen: boolean; onClose: () => void; } /** Wraps a promise with a timeout so it never hangs forever */ function withTimeout(promise: Promise, ms: number): Promise { return Promise.race([ promise, new Promise((_, reject) => setTimeout( () => reject(new Error('Request timed out. Please try again.')), ms ) ), ]); } export default function AuthModal({ isOpen, onClose }: AuthModalProps) { const { login, signup, verifyEmail, resendPin, resetPassword, user } = useAuth(); const [view, setView] = useState('login'); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [name, setName] = useState(''); const [pin, setPin] = useState(''); const [newPassword, setNewPassword] = useState(''); const [showPassword, setShowPassword] = useState(false); const [error, setError] = useState(''); const [successMsg, setSuccessMsg] = useState(''); const [isLoading, setIsLoading] = useState(false); const [mounted, setMounted] = useState(false); useEffect(() => { if (isOpen) { setMounted(true); setError(''); setSuccessMsg(''); } else { const t = setTimeout(() => setMounted(false), 300); return () => clearTimeout(t); } }, [isOpen]); // Close on successful login useEffect(() => { if (user && isOpen) { onClose(); } }, [user, isOpen, onClose]); const switchView = (v: View) => { setError(''); setSuccessMsg(''); setView(v); }; const handleLogin = async (e: React.FormEvent) => { e.preventDefault(); setError(''); setIsLoading(true); try { const result = await withTimeout(login(email, password), 15000); if (!result.success) { setError(result.error || 'Login failed'); } } catch (err: any) { setError(err?.message || 'Request failed'); } setIsLoading(false); }; const handleSignup = async (e: React.FormEvent) => { e.preventDefault(); setError(''); if (password.length < 6) { setError('Password must be at least 6 characters'); return; } setIsLoading(true); try { const result = await withTimeout(signup(email, password, name), 15000); if (result.success) { setSuccessMsg( 'Account created! A verification PIN has been sent to your email.' ); setView('verify'); } else { setError(result.error || 'Signup failed'); } } catch (err: any) { setError(err?.message || 'Request failed'); } setIsLoading(false); }; const handleVerify = async (e: React.FormEvent) => { e.preventDefault(); setError(''); setIsLoading(true); try { const result = await withTimeout(verifyEmail(email, pin), 15000); if (result.success) { setSuccessMsg('Email verified successfully!'); } else { setError(result.error || 'Verification failed'); } } catch (err: any) { setError(err?.message || 'Request failed'); } setIsLoading(false); }; const handleResendPin = async () => { setError(''); setIsLoading(true); try { const result = await withTimeout(resendPin(email), 15000); if (result.success) { setSuccessMsg('A new PIN has been sent to your email.'); } else { setError(result.error || 'Failed to send PIN'); } } catch (err: any) { setError(err?.message || 'Request failed'); } setIsLoading(false); }; const handleForgotSubmit = async (e: React.FormEvent) => { e.preventDefault(); setError(''); setIsLoading(true); try { const result = await withTimeout(resendPin(email), 15000); if (result.success) { setSuccessMsg('A reset PIN has been sent to your email.'); setView('reset'); } else { setError(result.error || 'Failed to send reset PIN'); } } catch (err: any) { setError(err?.message || 'Request failed'); } setIsLoading(false); }; const handleResetPassword = async (e: React.FormEvent) => { e.preventDefault(); setError(''); if (newPassword.length < 6) { setError('Password must be at least 6 characters'); return; } setIsLoading(true); try { const result = await withTimeout( resetPassword(email, pin, newPassword), 15000 ); if (result.success) { setSuccessMsg('Password reset successfully!'); } else { setError(result.error || 'Reset failed'); } } catch (err: any) { setError(err?.message || 'Request failed'); } setIsLoading(false); }; if (!isOpen && !mounted) return null; return (

{/* Backdrop */}

{/* Modal */}

{/* Close button */} {/* Header */}

{view === 'login' && 'Welcome Back'} {view === 'signup' && 'Create Account'} {view === 'verify' && 'Verify Email'} {view === 'forgot' && 'Forgot Password'} {view === 'reset' && 'Reset Password'}

{view === 'login' && 'Sign in to your 440ci account'} {view === 'signup' && 'Join the 440ci community'} {view === 'verify' && 'Enter the PIN sent to your email'} {view === 'forgot' && "We'll send you a reset PIN"} {view === 'reset' && 'Enter the PIN and your new password'}

{/* Body */}

{/* Back button for sub-views */} {(view === 'verify' || view === 'forgot' || view === 'reset') && ( )} {/* Error */} {error && (

{error}

)} {/* Success */} {successMsg && (

{successMsg}

)} {/* LOGIN */} {view === 'login' && (

setEmail(e.target.value)} placeholder="you@example.com" className="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-xl text-sm outline-none focus:border-gray-400 focus:ring-4 focus:ring-gray-100 transition-all" />

Password

setPassword(e.target.value)} placeholder="••••••••" className="w-full pl-10 pr-10 py-2.5 border border-gray-200 rounded-xl text-sm outline-none focus:border-gray-400 focus:ring-4 focus:ring-gray-100 transition-all" />

Don't have an account?{' '}

)} {/* SIGNUP */} {view === 'signup' && (

Name

setName(e.target.value)} placeholder="Your full name" className="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-xl text-sm outline-none focus:border-gray-400 focus:ring-4 focus:ring-gray-100 transition-all" />

Password

setPassword(e.target.value)} placeholder="Minimum 6 characters" className="w-full pl-10 pr-10 py-2.5 border border-gray-200 rounded-xl text-sm outline-none focus:border-gray-400 focus:ring-4 focus:ring-gray-100 transition-all" />

At least 6 characters

Already have an account?{' '}

)} {/* VERIFY EMAIL */} {view === 'verify' && (

Enter the 6-digit PIN sent to {email}

Verification PIN setPin(e.target.value.replace(/\D/g, '').slice(0, 6)) } placeholder="000000" className="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm text-center tracking-[0.5em] font-mono text-lg outline-none focus:border-gray-400 focus:ring-4 focus:ring-gray-100 transition-all" />

Didn't receive a PIN?{' '}

)} {/* FORGOT PASSWORD */} {view === 'forgot' && ( )} {/* RESET PASSWORD */} {view === 'reset' && (

Enter the reset PIN sent to {email} and your new password.

Reset PIN setPin(e.target.value.replace(/\D/g, '').slice(0, 6)) } placeholder="000000" className="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm text-center tracking-[0.5em] font-mono text-lg outline-none focus:border-gray-400 focus:ring-4 focus:ring-gray-100 transition-all" />

New Password

setNewPassword(e.target.value)} placeholder="Minimum 6 characters" className="w-full pl-10 pr-10 py-2.5 border border-gray-200 rounded-xl text-sm outline-none focus:border-gray-400 focus:ring-4 focus:ring-gray-100 transition-all" />

)}

); }