// auth.jsx — splash, onboarding, sign-in, register, OTP, set-PIN, biometric (function () { const { useState, useEffect } = React; const { useApp, Tap, PrimaryButton, BottomBar, Field, BiometricScan } = window; const I = (props) => React.createElement(window.ZIcon, props); const SB = () => React.createElement(window.StatusBar, null); const ZMark = (props) => React.createElement(window.ZMark, props); function AuthShell({ children, dark }) { return
{children}
; } // ---------- SPLASH ---------- function Splash() { const app = useApp(); useEffect(() => { const t = setTimeout(() => { let on = false; try { on = !!localStorage.getItem('z-onboarded'); } catch (e) { } app.nav.replace(on ? 'lock' : 'onboarding'); }, 1800); return () => clearTimeout(t); }, []); return
ZITCH
Pay. Send. Grow.
Secured by Zitch · NDIC insured
; } // ---------- ONBOARDING ---------- function Onboarding() { const app = useApp(); const [i, setI] = useState(0); const slides = [ { icon: 'bills', t: 'Pay every bill in seconds', d: 'Airtime, data, cable TV, electricity, betting & exam pins — all in one app.' }, { icon: 'send', t: 'Send money instantly', d: 'Free transfers to Zitch and any Nigerian bank, with saved beneficiaries.' }, { icon: 'loan', t: 'Borrow & grow your money', d: 'Instant loans up to ₦500,000 and Fixed Save earning 22% p.a.' }, ]; const s = slides[i]; const last = i === slides.length - 1; return
app.nav.replace('signin')}>Skip
{s.t}
{s.d}
{slides.map((_, k) =>
)}
last ? app.nav.replace('register') : setI(i + 1)} />
Already have an account? app.nav.replace('signin')} style={{ fontWeight: 700, color: 'var(--brand)', cursor: 'pointer' }}>Sign in
; } // ---------- SIGN IN ---------- function SignIn() { const app = useApp(); const [phone, setPhone] = useState('08145872210'); const [pw, setPw] = useState(''); const [bio, setBio] = useState(false); return
Welcome back
Sign in to continue to Zitch
{/* instant biometric */} setBio(true)}>
Instant sign in
Use Face ID or fingerprint
or use password
setPhone(v.replace(/\D/g, '').slice(0, 11))} prefix={} /> } />
Forgot password?
app.enterApp()} />
New to Zitch? app.nav.replace('register')}>Create account
 {bio && { app.setBiometrics(true); app.enterApp(); }} onFallback={() => setBio(false)} onClose={() => setBio(false)} />} ; } // ---------- REGISTER ---------- function Register() { const app = useApp(); const [name, setName] = useState(''); const [phone, setPhone] = useState(''); const [email, setEmail] = useState(''); const valid = name.length > 2 && phone.length >= 10; return
app.nav.replace('signin')}>
Create your account
Join 5,000,000+ Nigerians on Zitch
} /> setPhone(v.replace(/\D/g, '').slice(0, 11))} placeholder="0801 234 5678" prefix={} /> } />
By continuing you agree to Zitch's Terms & Privacy Policy.
app.nav.replace('otp')} /> ; } // numeric keypad used by OTP & SetPin function Keypad({ onKey }) { const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', 'del']; return
{keys.map((k, i) => k !== '' && onKey(k)}>
{k === 'del' ? : k}
)}
; } // ---------- OTP ---------- function Otp() { const app = useApp(); const [code, setCode] = useState(''); useEffect(() => { if (code.length === 5) { const t = setTimeout(() => app.nav.replace('setpin'), 500); return () => clearTimeout(t); } }, [code]); return
app.nav.replace('register')}>
Verify your number
Enter the 5-digit code sent to 0801 234 5678
{[0, 1, 2, 3, 4].map(k =>
{code[k] || ''}
)}
Didn't get it? Resend in 0:24
setCode(c => k === 'del' ? c.slice(0, -1) : (c.length < 5 ? c + k : c))} />
; } // ---------- SET PIN ---------- function SetPin() { const app = useApp(); const [pin, setPin] = useState(''); const [confirm, setConfirm] = useState(null); const [err, setErr] = useState(false); const active = confirm === null ? pin : confirm; useEffect(() => { if (confirm === null && pin.length === 4) { setTimeout(() => { setConfirm(''); }, 200); } if (confirm !== null && confirm.length === 4) { if (confirm === pin) setTimeout(() => app.nav.replace('biometric'), 250); else { setErr(true); setTimeout(() => { setErr(false); setConfirm(''); }, 700); } } }, [pin, confirm]); return
{confirm === null ? 'Create a 4-digit PIN' : 'Confirm your PIN'}
{err ? PINs don't match, try again : 'You\'ll use this to authorize payments'}
{[0, 1, 2, 3].map(k =>
k ? (err ? 'var(--z-red)' : 'var(--brand)') : 'transparent', border: '2px solid ' + (active.length > k ? (err ? 'var(--z-red)' : 'var(--brand)') : 'var(--line)') }} />)}
{ if (confirm === null) setPin(p => k === 'del' ? p.slice(0, -1) : (p.length < 4 ? p + k : p)); else setConfirm(c => k === 'del' ? c.slice(0, -1) : (c.length < 4 ? c + k : c)); }} />
; } // ---------- BIOMETRIC ---------- function Biometric() { const app = useApp(); const [enroll, setEnroll] = useState(false); return
Enable Face / Touch ID
Sign in and approve payments faster and more securely with biometrics.
setEnroll(true)} />
{ app.setBiometrics(false); app.enterApp(); }}>Maybe later
 {enroll && { app.setBiometrics(true); app.enterApp(); }} onClose={() => setEnroll(false)} />} ; } // ---------- LOCK (returning user — auto biometric) ---------- function Lock() { const app = useApp(); const [bio, setBio] = useState(true); useEffect(() => { if (!app.biometrics) app.nav.replace('signin'); }, []); return
Welcome back, William
Unlock with Face ID or fingerprint
setBio(true)}>
app.nav.replace('signin')}>Use password instead
 {bio && app.enterApp()} onFallback={() => { setBio(false); app.nav.replace('signin'); }} onClose={() => setBio(false)} />} ; } Object.assign(window, { Splash, Onboarding, SignIn, Register, Otp, SetPin, Biometric, Lock }); })();