import React, { useState, useEffect } from 'react'; import { motion } from 'framer-motion'; import { useNavigate, useLocation } from 'react-router-dom'; import { useAuth } from '../context/AuthContext'; // --- Icons (Lucide React) --- const ChevronLeftIcon = ({ className }) => ( ); const AtSignIcon = ({ className }) => ( ); const GoogleIcon = ({ className }) => ( ); // --- Background Animation Component --- function FloatingPaths({ position }) { const paths = Array.from({ length: 36 }, (_, i) => ({ id: i, d: `M-${380 - i * 5 * position} -${189 + i * 6}C-${ 380 - i * 5 * position } -${189 + i * 6} -${312 - i * 5 * position} ${216 - i * 6} ${ 152 - i * 5 * position } ${343 - i * 6}C${616 - i * 5 * position} ${470 - i * 6} ${ 684 - i * 5 * position } ${875 - i * 6} ${684 - i * 5 * position} ${875 - i * 6}`, color: `rgba(255, 255, 255, ${0.1 + i * 0.03})`, width: 0.5 + i * 0.03, })); return (
Background Paths {paths.map((path) => ( ))}
); } // --- Main Login Page Component --- export default function Login() { const navigate = useNavigate(); const location = useLocation(); const { login, googleLogin, user } = useAuth(); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); const [loading, setLoading] = useState(false); const rightSideImagePath = '../login-illustration.jpg'; // Check for error in URL params useEffect(() => { const params = new URLSearchParams(location.search); const errorParam = params.get('error'); if (errorParam) { const errorMessages = { 'auth_failed': 'Authentication failed. Please try again.', 'session_error': 'Session error. Please try again.', 'save_error': 'Failed to save session. Please try again.', 'verification_failed': 'Could not verify your authentication.', 'verification_error': 'Error verifying authentication.', 'timed out': 'Database connection timed out. Please try again.', }; setError(errorMessages[errorParam] || `Error: ${errorParam}`); console.error('Login page error:', errorParam); // Clean up URL window.history.replaceState({}, '', location.pathname); } }, [location]); // Redirect if already logged in useEffect(() => { if (user) { console.log('User already logged in, redirecting to dashboard'); navigate('/dashboard'); } }, [user, navigate]); // Handle Email/Password Login const handleEmailLogin = async (e) => { e.preventDefault(); setError(''); setLoading(true); try { await login({ email, password }); navigate('/dashboard'); } catch (err) { setError(err.response?.data?.message || 'Login failed. Please check your credentials.'); } finally { setLoading(false); } }; // Handle Google Login const handleGoogleLogin = () => { console.log('Initiating Google OAuth...'); googleLogin(); }; return (
{/* --- Left Column: Art & Testimonials --- */}
{/* Gradient Overlay */}
{/* Logo */}
PopcornPing { e.target.style.display = 'none'; }} /> PopcornPing
{/* Testimonial */}

“This platform has revolutionized how we conduct creative reviews. The screen sharing quality is unmatched.”

{/* Animated Background Paths */}
{/* --- Right Column: Auth Form --- */}
Login Illustration { e.target.style.display = 'none'; }} />
{/* Background Glow Effects */}
); }