/** * CoinRush Auth Modal - React Component * Shared authentication modal for login/register across all pages */ const { useState, useEffect } = React; // ============================================ // AUTH MODAL COMPONENT // ============================================ function AuthModal({ isOpen, onClose, initialMode = 'login', onSuccess }) { const [mode, setMode] = useState(initialMode); const [username, setUsername] = useState(''); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [showPassword, setShowPassword] = useState(false); // Age verification const [dateOfBirth, setDateOfBirth] = useState(''); const [country, setCountry] = useState(''); const [termsAccepted, setTermsAccepted] = useState(false); const [countries, setCountries] = useState([]); const [showAgePopup, setShowAgePopup] = useState(false); const [error, setError] = useState(''); const [loading, setLoading] = useState(false); const [success, setSuccess] = useState(''); const [oauthProviders, setOauthProviders] = useState({ discord: true, google: true, twitter: true }); const isLogin = mode === 'login'; const ageVerified = dateOfBirth && country && termsAccepted; // Fetch countries list on mount useEffect(() => { fetch('/auth/countries') .then(res => res.json()) .then(data => { if (data.countries) { setCountries(data.countries); } }) .catch(() => {}); }, []); // Fetch OAuth provider availability on mount useEffect(() => { fetch('/auth/oauth/providers/status') .then(res => res.json()) .then(data => { if (data.providers) { setOauthProviders(data.providers); } }) .catch(() => {}); }, []); // Reset form when mode or open state changes useEffect(() => { if (isOpen) { setMode(initialMode); setUsername(''); setEmail(''); setPassword(''); setDateOfBirth(''); setCountry(''); setTermsAccepted(false); setShowAgePopup(false); setError(''); setSuccess(''); setShowPassword(false); } }, [isOpen, initialMode]); if (!isOpen) return null; const handleSubmit = async (e) => { e.preventDefault(); setError(''); setSuccess(''); setLoading(true); try { if (isLogin) { const res = await fetch('/auth/login-json', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ username_or_email: username, password: password }) }); if (!res.ok) { const data = await res.json().catch(() => ({ detail: 'Login failed' })); throw new Error(data.detail || 'Login failed'); } onSuccess?.(); onClose(); window.location.reload(); } else { // Validate all required fields before submitting if (!dateOfBirth) { throw new Error('Please enter your date of birth'); } if (!country) { throw new Error('Please select your country'); } if (!termsAccepted) { throw new Error('You must accept the Terms of Service'); } const res = await fetch('/auth/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: username, email: email, password: password, date_of_birth: dateOfBirth, country: country, terms_accepted: termsAccepted }) }); if (!res.ok) { const data = await res.json().catch(() => ({ detail: 'Registration failed' })); throw new Error(data.detail || 'Registration failed'); } const data = await res.json(); setSuccess(data.message || 'Account created! Check your email.'); setTimeout(() => { setMode('login'); setSuccess(''); setEmail(''); setPassword(''); }, 2500); } } catch (err) { setError(err.message || 'An error occurred'); } finally { setLoading(false); } }; const switchMode = () => { setMode(isLogin ? 'register' : 'login'); setError(''); setSuccess(''); }; return (
e.stopPropagation()}> {/* Decorative Elements */}
{/* Close Button */} {/* Logo/Brand */}
CR
COINRUSH CRYPTO CASINO
{/* Mode Tabs */}
{/* Form */}
{/* Messages */} {error && (
{error}
)} {success && (
{success}
)} {/* Username */}
setUsername(e.target.value)} required autoComplete="username" />
{/* Email (Register only) */} {!isLogin && (
setEmail(e.target.value)} required autoComplete="email" />
)} {/* Password */}
setPassword(e.target.value)} required autoComplete={isLogin ? 'current-password' : 'new-password'} />
{/* Forgot Password (Login only) */} {isLogin && (
)} {/* Age Verification Button (Register only) */} {!isLogin && ( )} {/* Submit Button */} {/* Divider */}
or continue with
{/* Social Login Buttons - Full Width Branded Buttons */}
{/* Footer */}

{isLogin ? "Don't have an account? " : "Already have an account? "}

{/* Age Verification Popup */} {showAgePopup && (
setShowAgePopup(false)}>
e.stopPropagation()}>

Age Verification

setDateOfBirth(e.target.value)} max={`${new Date().getFullYear() - 18}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(new Date().getDate()).padStart(2, '0')}`} />
)}
); } // Export for use across pages window.AuthModal = AuthModal;