// duel-auth.jsx — GTO Duel auth (sign in / forgot / sign-up flow) + empty & error states. // Dark theme on OctopiPoker tokens. Depends on duel-shared.jsx (ScreenShell, DarkCard, Eyebrow). // Exports (to window): SignInScreen, SignUpFlow, EmptyState, ErrorScreen function CloseBar({ title, onClose }) { return (
{title}
); } function AuthInput({ label, placeholder, value, onChange, type = 'text', error, eye }) { const [show, setShow] = React.useState(false); const isPw = type === 'password'; const inputType = isPw && show ? 'text' : type; const borderColor = error ? 'var(--op-red-50)' : 'rgba(255,255,255,0.14)'; return (
); } function ErrorBanner({ text }) { return (
{text}
); } function CheckBox({ checked, onChange, children }) { return ( ); } function AuthFooter({ backLabel = 'Back', onBack, primaryLabel, onPrimary, enabled = true }) { return (
); } function GoogleBtn() { return ( ); } // ───────── Sign In (with inline error + forgot-password view) ───────── function SignInScreen({ onClose }) { const [view, setView] = React.useState('signin'); // signin | forgot const [email, setEmail] = React.useState('alma.lawson@example.com'); const [pw, setPw] = React.useState(''); const [remember, setRemember] = React.useState(false); const [error, setError] = React.useState(false); const [fEmail, setFEmail] = React.useState(''); if (view === 'forgot') { return ( } footer={ setView('signin')} primaryLabel="Send Reset Link" enabled={/.+@.+\..+/.test(fEmail)} onPrimary={() => {}} />} >

Enter your account's email address, and we'll send you a password reset link

 ); } return ( } footer={ setError(true)} />} >
{ setPw(v); setError(false); }} error={error} />
Remember me
{error &&
}
); } // ───────── Sign Up flow (choice → profile → verify → terms → success) ───────── function OTPInput({ value, onChange, len = 6 }) { const refs = React.useRef([]); const set = (i, ch) => { const d = ch.replace(/\D/g, '').slice(-1); const arr = value.split(''); arr[i] = d; const next = arr.join('').slice(0, len); onChange(next); if (d && refs.current[i + 1]) refs.current[i + 1].focus(); }; return (
{Array.from({ length: len }).map((_, i) => { const filled = !!value[i]; return ( (refs.current[i] = el)} value={value[i] || ''} inputMode="numeric" maxLength={1} onChange={(e) => set(i, e.target.value)} onKeyDown={(e) => { if (e.key === 'Backspace' && !value[i] && refs.current[i - 1]) refs.current[i - 1].focus(); }} style={{ flex: 1, minWidth: 0, aspectRatio: '1', textAlign: 'center', boxSizing: 'border-box', background: 'rgba(10,11,17,0.55)', border: `1.5px solid ${filled ? 'var(--op-exodus-70)' : 'rgba(255,255,255,0.16)'}`, borderRadius: 12, fontFamily: 'var(--op-font-display)', fontWeight: 700, fontSize: 24, color: '#fff', outline: 'none' }} /> ); })}
); } function PwRules() { const rules = ['At least 8 characters', 'One uppercase letter', 'One lowercase letter', 'One number', 'One special character (!@#$%^&*)']; return (
Your password must contain:
); } function SignUpFlow({ onClose }) { const [step, setStep] = React.useState(0); // 0 choice,1 profile,2 verify,3 terms,4 success const [email, setEmail] = React.useState(''); const [name, setName] = React.useState(''); const [pw, setPw] = React.useState(''); const [pw2, setPw2] = React.useState(''); const [code, setCode] = React.useState('4519'); const [agree, setAgree] = React.useState(false); React.useEffect(() => { if (step === 4) { const t = setTimeout(() => {}, 100); return () => clearTimeout(t); } return undefined; }, [step]); if (step === 0) { return ( }>
or
); } if (step === 1) { return ( } footer={ setStep(0)} primaryLabel="Next" enabled={!!name && pw.length >= 8 && pw === pw2} onPrimary={() => setStep(2)} />}>
1. Create your profile
 ); } if (step === 2) { return ( } footer={ setStep(1)} primaryLabel="Next" enabled={code.length === 6} onPrimary={() => setStep(3)} />}>
2. Enter verification code

Enter code we sent to {email || 'alma.lawson@example.com'}

00:23
 ); } if (step === 3) { const link = (t) => e.preventDefault()} style={{ color: 'var(--op-exodus-50)', textDecoration: 'underline' }}>{t}; return ( } footer={ setStep(0)} primaryLabel="Next" enabled={agree} onPrimary={() => setStep(4)} />}>
3. Accept our terms & policies

By clicking "I agree", you accept our {link('Terms of Service')}, {link('Privacy Policy')}, {link('Platform Acceptable Use Policy')}, {link('Forum Terms of Service (Buyer)')} and {link('Forum Terms of Service (Seller)')}

I agree ); } return ( }>
Your account was successfully created!

You'll be taken to your first duel in a moment

 ); } // ───────── Empty state ───────── function EmptyState({ icon = 'cards', title, body, ctaLabel, onClose, barTitle = 'Duel Profile' }) { const icons = { cards: , chart: , trophy: , }; return ( }>
{icons[icon]}
{title}

{body}

{ctaLabel && ( )}
); } // ───────── Error (server down) ───────── function ErrorScreen({ onClose }) { return ( }>
Something went wrong

We couldn't reach the server. Check your connection and try again — your match progress is safe.

 ); } Object.assign(window, { SignInScreen, SignUpFlow, EmptyState, ErrorScreen });