refactor(auth): integrate AuthContext into LoginModal

src/components/LoginModal.tsx

@@ -5,14 +5,15 @@ import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { Label } from './ui/label';
 import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
 
 interface LoginModalProps {
   isOpen: boolean;
   onClose: () => void;
-  onLoginSuccess: (userData: { email: string; name: string }) => void;
+  // onLoginSuccess: (userData: { email: string; name: string }) => void;
 }
 
-export function LoginModal({ isOpen, onClose, onLoginSuccess }: LoginModalProps) {
+export function LoginModal({ isOpen, onClose, }: LoginModalProps) {
   const [step, setStep] = useState<'email' | 'otp'>('email');
   const [email, setEmail] = useState('');
   const [otp, setOtp] = useState(['', '', '', '', '', '']);
@@ -20,7 +21,7 @@ export function LoginModal({ isOpen, onClose, onLoginSuccess }: LoginModalProps)
   const [isLoading, setIsLoading] = useState(false);
   const [helperText, setHelperText] = useState('');
 
-  const navigate = useNavigate()
+  const { login } = useAuth(); // from AuthContext
 
   // Reset modal state when closed
   useEffect(() => {
@@ -49,7 +50,7 @@ export function LoginModal({ isOpen, onClose, onLoginSuccess }: LoginModalProps)
 
     setIsLoading(true);
     setHelperText('');
-    
+
     // Simulate API call
     setTimeout(() => {
       setStep('otp');
@@ -61,7 +62,7 @@ export function LoginModal({ isOpen, onClose, onLoginSuccess }: LoginModalProps)
 
   const handleOTPChange = (index: number, value: string) => {
     if (value.length > 1) return; // Only allow single digit
-    
+
     const newOtp = [...otp];
     newOtp[index] = value;
     setOtp(newOtp);
@@ -95,13 +96,11 @@ export function LoginModal({ isOpen, onClose, onLoginSuccess }: LoginModalProps)
       // Generate name from email for demo
       const emailParts = email.split('@')[0];
       const name = emailParts.charAt(0).toUpperCase() + emailParts.slice(1);
-      
-      onLoginSuccess({
-        email,
-        name: name.length > 8 ? name.substring(0, 8) : name
-      });
+
+      login({ email, name })
+
       setIsLoading(false);
-      navigate("/melbourne")
+      // navigate("/melbourne")
       onClose();
     }, 1500);
   };
@@ -143,7 +142,7 @@ export function LoginModal({ isOpen, onClose, onLoginSuccess }: LoginModalProps)
                 >
                   <X className="w-4 h-4 text-gray-600" />
                 </button>
-                
+
                 <h2 className="font-merchant text-2xl font-semibold text-gray-900 mb-2">
                   Login
                 </h2>
@@ -235,7 +234,7 @@ export function LoginModal({ isOpen, onClose, onLoginSuccess }: LoginModalProps)
                           />
                         ))}
                       </div>
-                      
+
                       {/* Countdown */}
                       {countdown > 0 && (
                         <p className="font-poppins text-xs text-gray-500 text-center">