// Register.jsx — terminal-style account creation with Turnstile captcha // SECURITY: validate strength client-side AND server-side. Hash with argon2id in prod. // Never reflect raw user input back into HTML — all renders via React {}. const Register = ({ onRegistered, onSwitchToLogin }) => { const [form, setForm] = React.useState({ email: '', handle: '', password: '', confirm: '' }); const [agree, setAgree] = React.useState(false); const [marketing, setMarketing] = React.useState(true); const [phase, setPhase] = React.useState('idle'); // idle | submitting | success const [err, setErr] = React.useState(null); const [logLines, setLogLines] = React.useState([]); const [newUser, setNewUser] = React.useState(null); const [turnstileToken, setTurnstileToken] = React.useState(null); const turnstileWidgetId = React.useRef(null); const set = (k, v) => { setForm((f) => ({ ...f, [k]: v })); setErr(null); }; // Password strength scoring — purely indicative. Real check is server-side. const passwordStrength = (pw) => { if (!pw) return 0; let s = 0; if (pw.length >= 8) s++; if (pw.length >= 12) s++; if (pw.length >= 16) s++; if (/[A-Z]/.test(pw) && /[a-z]/.test(pw)) s++; if (/[0-9]/.test(pw)) s++; if (/[^A-Za-z0-9]/.test(pw)) s++; return Math.min(s, 5); }; const strength = passwordStrength(form.password); const strengthLabels = ['BRITTLE', 'WEAK', 'OKAY', 'STRONG', 'HARDENED', 'FORTRESS']; const strengthColors = ['#FF3344', '#FF3344', '#FF8C42', '#FFD23F', '#00FF41', '#00FF41']; // 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('register-turnstile'); if (!el) return; turnstileWidgetId.current = window.turnstile.render('#register-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 submit = async (e) => { e.preventDefault(); if (phase !== 'idle') return; // Client-side validation — generic enough to not enumerate, strict enough to catch obvious issues. if (!form.email.includes('@') || form.email.length < 5) return setErr('// invalid email format.'); if (!form.handle.match(/^[a-zA-Z0-9_]{3,32}$/)) return setErr('// handle must be 3-32 alphanumeric chars or underscore.'); if (form.password.length < 12) return setErr('// password must be at least 12 characters.'); if (form.password !== form.confirm) return setErr('// passwords do not match.'); if (strength < 3) return setErr('// password too weak. add length, mix cases + symbols.'); if (!agree) return setErr('// must accept terms to continue.'); if (form.email.length > 320 || form.handle.length > 32) return setErr('// payload too large.'); // Require Turnstile token (skip check in mock mode for demo convenience) if (!turnstileToken && window.OBC_API.mode !== 'mock') return setErr('// captcha verification required.'); setErr(null); setPhase('submitting'); // Animated provisioning log — run animation and API call in parallel. const lines = [ { t: 100, text: 'validating email format ............... [ OK ]' }, { t: 400, text: 'checking handle availability .......... [ OK ]' }, { t: 800, text: 'hashing password (argon2id, t=3, m=64M) [ OK ]' }, { t: 1300, text: 'provisioning customer record .......... [ OK ]' }, { t: 1700, text: 'generating recovery codes ............. [ OK ]' }, { t: 2100, text: 'enrolling in default 2FA prompt ....... [ OK ]' }, { t: 2400, text: 'syncing to /api/customer (shopify) .... [ OK ]' }, { t: 2700, text: 'issuing session token ................. [ OK ]' }, ]; const ANIM_DURATION = 3100; setLogLines([]); lines.forEach((l) => { setTimeout(() => setLogLines((prev) => [...prev, l]), l.t); }); // Fire API call in parallel with the animation const apiPromise = window.OBC_API.register( { email: form.email, handle: form.handle, password: form.password, marketing }, turnstileToken, ); // Wait for both API and animation to finish const animPromise = new Promise((resolve) => setTimeout(resolve, ANIM_DURATION)); try { const [provisioned] = await Promise.all([apiPromise, animPromise]); setNewUser(provisioned); setPhase('success'); // Auto-route into account setTimeout(() => onRegistered(provisioned), 2200); } catch (error) { // API failed — return to idle with error setPhase('idle'); setTurnstileToken(null); setErr('// registration failed. try again.'); } }; return (
{/* terminal window header */}
operator@brew-co — /bin/register SESSION: NEW · TLS 1.3
{phase === 'idle' && (
$ ./register --new-operator

ENLIST

// create an account. unlock orders history, subscriptions, points, and earlier drop access.

set('email', v)} type="email" placeholder="operator@target.coffee" autoFocus /> set('handle', v)} placeholder="op1337" hint="// 3-32 chars. letters, numbers, underscore. shown on receipts." /> set('password', v)} type="password" placeholder="min 12 chars" /> {/* strength meter */} {form.password && (
{[1,2,3,4,5].map((i) => (
))}
[{strengthLabels[strength]}]
)} set('confirm', v)} type="password" placeholder="re-enter to confirm" /> {/* Turnstile captcha */}
// CAPTCHA VERIFICATION — cf-turnstile
{err && (
{err}
)}
./have-account?-login →

// we use argon2id for password hashing. accounts sync to shopify customer api.
// your email is for receipts + drop alerts only. no third-party sharing. no resale.

)} {phase === 'submitting' && (
$ ./register --provision
{logLines.map((l, i) => (
  {l.text}
))} {logLines.length < 8 && (
// provisioning
)}
)} {phase === 'success' && newUser && (
$ whoami
HANDLE: {newUser.handle}
EMAIL: {newUser.email}
TIER: {newUser.tier}
[ ACCOUNT PROVISIONED ]
→ routing to /account
)}
// by enlisting you agree to brew responsibly. pwn responsibly.
); }; const RegField = ({ label, value, onChange, type='text', placeholder, autoFocus, hint }) => (
{'>'} {label}
onChange(e.target.value)} placeholder={placeholder} autoFocus={autoFocus} autoComplete={type === 'password' ? 'new-password' : (type === 'email' ? 'email' : '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'; }} /> {hint &&
{hint}
}
); window.Register = Register;