// Login.jsx — terminal-style login with Turnstile captcha, TOTP MFA, // redacted/scramble reveal + ACCESS GRANTED flash. // SECURITY: error messages are deliberately generic. No enumeration of valid emails. const Login = ({ onLoggedIn, onSwitchToRegister }) => { const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); const [phase, setPhase] = React.useState('idle'); // idle | submitting | mfa | revealing | granted | denied const [err, setErr] = React.useState(null); const [scrambled, setScrambled] = React.useState({ handle: '', email: '', tier: '' }); const [deniedInfo, setDeniedInfo] = React.useState({ lockout: 5, attempt: 1 }); const [turnstileToken, setTurnstileToken] = React.useState(null); const [mfaCode, setMfaCode] = React.useState(''); const [mfaMode, setMfaMode] = React.useState('totp'); // totp | recovery const [mfaErr, setMfaErr] = React.useState(null); const [mfaSubmitting, setMfaSubmitting] = React.useState(false); const [resolvedUser, setResolvedUser] = React.useState(null); const turnstileWidgetId = React.useRef(null); const demo = window.OBC_DEMO_USER || { handle:'op1337', email:'operator@brew-co', tier:'ADVANCED' }; // Caps & rate-limit cosmetics — purely client-side, no real protection const [attempts, setAttempts] = React.useState(0); // DEMO ONLY — magic trigger words that simulate a failed login. // NOT a security check. In production, never branch on user input like this. const isIntruder = (val) => { const v = (val || '').toLowerCase().trim(); return v === 'intruder' || v === 'denied' || v.startsWith('intruder@') || v.startsWith('denied@'); }; // Render Turnstile widget when in idle phase React.useEffect(() => { if (phase === 'idle' && window.turnstile) { // Clean up previous widget if it exists if (turnstileWidgetId.current != null) { try { window.turnstile.remove(turnstileWidgetId.current); } catch (e) { /* noop */ } turnstileWidgetId.current = null; } const el = document.getElementById('login-turnstile'); if (!el) return; turnstileWidgetId.current = window.turnstile.render('#login-turnstile', { sitekey: '0x4AAAAAADT5ebjsA6gd7yaa', theme: 'dark', callback: (token) => setTurnstileToken(token), 'expired-callback': () => setTurnstileToken(null), 'error-callback': () => setTurnstileToken(null), }); } return () => { if (turnstileWidgetId.current != null) { try { window.turnstile.remove(turnstileWidgetId.current); } catch (e) { /* noop */ } turnstileWidgetId.current = null; } }; }, [phase]); const beginReveal = (user) => { setResolvedUser(user); setPhase('revealing'); scrambleTo('handle', user.handle || user.email, 1300); scrambleTo('email', user.email, 1500); scrambleTo('tier', user.tier || 'OPERATOR', 1100); setTimeout(() => setPhase('granted'), 1700); setTimeout(() => onLoggedIn(user), 2700); }; const triggerDenied = () => { setDeniedInfo((d) => ({ lockout: 5, attempt: attempts + 1 })); setPhase('denied'); // Countdown lockout, then unlock let n = 5; const tick = setInterval(() => { n -= 1; setDeniedInfo((d) => ({ ...d, lockout: n })); if (n <= 0) { clearInterval(tick); setTimeout(() => { setPhase('idle'); setPassword(''); setTurnstileToken(null); }, 400); } }, 1000); }; const submit = async (e) => { e.preventDefault(); if (phase !== 'idle') return; setErr(null); // Cheap client-side validation — generic messaging, no enumeration if (!email.trim() || !password) { setErr('// missing input. supply both fields.'); return; } if (email.length > 320 || password.length > 1000) { setErr('// payload too large.'); return; } // Intruder easter egg — purely client-side demo, checked before API call if (isIntruder(email) || isIntruder(password)) { setPhase('submitting'); setAttempts((a) => a + 1); setTimeout(() => triggerDenied(), 1100); return; } // Require Turnstile token (skip check in mock mode for demo convenience) if (!turnstileToken && window.OBC_API.mode !== 'mock') { setErr('// captcha verification required.'); return; } setPhase('submitting'); setAttempts((a) => a + 1); try { const result = await window.OBC_API.login(email, password, turnstileToken); // MFA required — transition to MFA phase if (result && result.mfa_required) { setPhase('mfa'); return; } // Success — begin reveal with real customer data beginReveal(result); } catch (error) { triggerDenied(); } }; const submitMfa = async (e) => { e.preventDefault(); if (mfaSubmitting) return; setMfaErr(null); const code = mfaCode.trim(); const isRecovery = mfaMode === 'recovery'; if (!code) { setMfaErr('// enter a code.'); return; } if (!isRecovery && (code.length !== 6 || !/^\d{6}$/.test(code))) { setMfaErr('// TOTP code must be 6 digits.'); return; } setMfaSubmitting(true); try { const result = await window.OBC_API.verifyMfa(code, isRecovery); if (result.ok && result.customer) { beginReveal(result.customer); } else if (result.customer) { beginReveal(result.customer); } else { setMfaErr('// verification failed. try again.'); } } catch (error) { setMfaErr('// verification failed. try again.'); } finally { setMfaSubmitting(false); } }; const scrambleTo = (key, target, dur) => { const chars = '!@#$%^&*()_+-={}[]|:;<>,.?/~`ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; const start = Date.now(); const tick = () => { const elapsed = Date.now() - start; const t = Math.min(elapsed / dur, 1); // Number of chars locked from left to right const locked = Math.floor(t * target.length); let out = ''; for (let i = 0; i < target.length; i++) { if (i < locked) out += target[i]; else if (target[i] === ' ') out += ' '; else if (target[i] === '@' || target[i] === '-' || target[i] === '.') out += target[i]; else out += chars[Math.floor(Math.random() * chars.length)]; } setScrambled((s) => ({ ...s, [key]: out })); if (t < 1) requestAnimationFrame(tick); }; tick(); }; // While submitting, show fake authentication log return (
{/* terminal window header */}
operator@brew-co — /bin/auth SESSION: NEW · TLS 1.3
{/* IDLE — login form */} {phase === 'idle' && (
$ ./auth --login

AUTHENTICATE

// identify yourself to access /account.

{/* Turnstile captcha */}
// CAPTCHA VERIFICATION — cf-turnstile
{err && (
{err}
)}
// no account?
$ ./register — or — checkout once to auto-create.

// failed attempts are rate-limited. tls everywhere. we never store passwords in plaintext.
// demo: use handle "intruder" or "denied" to simulate a failed login.

)} {/* DENIED — big red flashing access denied */} {phase === 'denied' && (
$ ./auth --execute
  resolving identity provider ........... [ OK ]
  establishing TLS session .............. [ OK ]
  hashing credentials (argon2id) ........ [ OK ]
  verifying credentials ................. [ FAIL ]
  triggering intrusion detection ........ [ ALERT ]
[ ACCESS DENIED ]
// INTRUDER DETECTED · CREDENTIALS REJECTED
// attempt #{deniedInfo.attempt} this session
// IP: redacted
// event logged to /var/log/auth.log
// ts: {new Date().toISOString().slice(0,19)}Z
{/* generic non-enumerating message — same regardless of whether user exists */} // authentication failed. invalid credentials.
// your account is not at risk if this was not you.
// cooldown: {String(Math.max(0, deniedInfo.lockout)).padStart(2,'0')}s before next attempt allowed.
)} {/* SUBMITTING — auth log animation */} {phase === 'submitting' && (
$ ./auth --execute
resolving identity provider ........... establishing TLS session .............. hashing credentials (argon2id) ........ checking 2FA token .................... verifying session signature ...........
// stand by
)} {/* MFA — TOTP / recovery code input */} {phase === 'mfa' && (
$ ./auth --mfa-verify
{'>'} session requires second factor
{'>'} {mfaMode === 'totp' ? 'enter 6-digit TOTP code from authenticator app' : 'enter 8-character recovery code'}
{mfaMode === 'totp' ? (
{'>'} TOTP CODE
{ setMfaCode(e.target.value.replace(/\D/g, '').slice(0, 6)); setMfaErr(null); }} maxLength={6} pattern="[0-9]*" inputMode="numeric" autoComplete="one-time-code" autoFocus placeholder="000000" style={{ width: '100%', background:'#0A0A0A', border:'1px solid rgba(255,255,255,0.28)', color:'#FFF', fontFamily:'inherit', fontSize: 22, padding:'14px 14px', borderRadius: 2, letterSpacing: '0.3em', textAlign: 'center', }} onFocus={(e) => { e.target.style.borderColor = '#00FF41'; e.target.style.boxShadow = '0 0 0 1px #00FF41'; }} onBlur={(e) => { e.target.style.borderColor = 'rgba(255,255,255,0.28)'; e.target.style.boxShadow = 'none'; }} />
) : (
{'>'} RECOVERY CODE
{ setMfaCode(e.target.value.toUpperCase().slice(0, 8)); setMfaErr(null); }} maxLength={8} autoComplete="off" autoFocus placeholder="ABCD1234" style={{ width: '100%', background:'#0A0A0A', border:'1px solid rgba(255,255,255,0.28)', color:'#FFF', fontFamily:'inherit', fontSize: 22, padding:'14px 14px', borderRadius: 2, letterSpacing: '0.3em', textAlign: 'center', }} onFocus={(e) => { e.target.style.borderColor = '#00FF41'; e.target.style.boxShadow = '0 0 0 1px #00FF41'; }} onBlur={(e) => { e.target.style.borderColor = 'rgba(255,255,255,0.28)'; e.target.style.boxShadow = 'none'; }} />
)} {mfaErr && (
{mfaErr}
)}
)} {/* REVEALING — scrambled identity that locks in left-to-right */} {(phase === 'revealing' || phase === 'granted') && (
$ whoami
// session id: {Math.random().toString(36).slice(2, 14).toUpperCase()}
{phase === 'granted' && (
[ ACCESS GRANTED ] → redirecting
)}
)}
{/* legal-ish strip */}
// by authenticating you agree to brew responsibly. pwn responsibly. · attempts (this session): {attempts.toString().padStart(2,'0')}
); }; const Field = ({ label, value, onChange, type='text', placeholder, autoFocus }) => (
{'>'} {label}
onChange(e.target.value)} placeholder={placeholder} autoFocus={autoFocus} autoComplete={type === 'password' ? 'current-password' : 'username'} maxLength={type === 'password' ? 256 : 320} style={{ width: '100%', background:'#0A0A0A', border:'1px solid rgba(255,255,255,0.28)', color:'#FFF', fontFamily:'inherit', fontSize: 14, padding:'12px 14px', borderRadius: 2, }} onFocus={(e) => { e.target.style.borderColor = '#00FF41'; e.target.style.boxShadow = '0 0 0 1px #00FF41'; }} onBlur={(e) => { e.target.style.borderColor = 'rgba(255,255,255,0.28)'; e.target.style.boxShadow = 'none'; }} />
); const IdentityRow = ({ label, value, accent }) => (
{label} {value}
); const Log = ({ children }) =>
  {children}
; const Ok = () => [ OK ]; const Pending = () => [OK]; const Cursor = () => _; window.Login = Login;