// screens-auth.jsx — premium onboarding/auth flow // Replaces the basic OnboardingScreen exported from screens-teams.jsx. // Loaded AFTER screens-teams.jsx so the global is overridden. // // Flow: // intro (3 slides) → welcome // welcome → login | register // login: 'login' (smart unified field) → 'login-pwd' → biometric → empty // forgot → forgot-otp → forgot-new // register: 'reg-method' → 'reg-id' → 'reg-pwd' → 'reg-otp' → // 'reg-success' → 'reg-name' → 'reg-role' → empty // plus: google one-tap (skips OTP) const { useState: useStateA, useEffect: useEffectA } = React; function GoogleGlyphA({ size = 18 }) { return ( ); } // Decorative blob background — subtle, premium ornament function AuthBg() { return (
); } function OnboardingScreen({ nav }) { const [step, setStep] = useStateA('intro'); const [introIdx, setIntroIdx] = useStateA(0); const [mode, setMode] = useStateA('register'); // 'register' | 'login' | 'forgot' const [identifier, setIdentifier] = useStateA(''); const [idType, setIdType] = useStateA('email'); const [password, setPassword] = useStateA(''); const [showPwd, setShowPwd] = useStateA(false); const [name, setName] = useStateA(''); const [otp, setOtp] = useStateA(['', '', '', '', '', '']); const [agreed, setAgreed] = useStateA(true); const [resend, setResend] = useStateA(24); const [loading, setLoading] = useStateA(false); const [pickedRole, setPickedRole] = useStateA(null); useEffectA(() => { if (step !== 'reg-otp' && step !== 'forgot-otp') return; setResend(24); const t = setInterval(() => setResend(r => (r > 0 ? r - 1 : 0)), 1000); return () => clearInterval(t); }, [step]); // Smart auto-detect: email if contains @ or letters, phone if all digits const isEmailLike = (s) => /[a-zA-Z@]/.test(s); const detected = isEmailLike(identifier) ? 'email' : 'phone'; const idValid = detected === 'email' ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(identifier) : identifier.replace(/\D/g, '').length === 10; const pwdStrength = (() => { let s = 0; if (password.length >= 8) s++; if (/[A-Z]/.test(password)) s++; if (/[0-9]/.test(password)) s++; if (/[^A-Za-z0-9]/.test(password)) s++; return s; })(); const fakeSubmit = (next, ms = 800) => { setLoading(true); setTimeout(() => { setLoading(false); setStep(next); }, ms); }; // ─── Reusable bits ──────────────────────────────────────── const BackChip = ({ to }) => ( ); const stepNames = { 'reg-method': 'Method', 'reg-id': 'Identity', 'reg-pwd': 'Password', 'reg-otp': 'Verify', 'reg-name': 'Profile', 'reg-role': 'Role', }; const stepIdx = { 'reg-method': 1, 'reg-id': 2, 'reg-pwd': 3, 'reg-otp': 4, 'reg-name': 5, 'reg-role': 6 }; const Stepper = ({ current, total = 6 }) => (
{Array.from({ length: total }).map((_, i) => (
))}
STEP {current} OF {total} {stepNames[step]?.toUpperCase()}
); // ─── INTRO CAROUSEL ───────────────────────────────────────── const slides = [ { bg: 'linear-gradient(160deg,#EEF2FF 0%,#fff 60%)', eyebrow: 'ALL-IN-ONE', title: 'Your school life,\nin one app.', sub: 'Fees, attendance, transport, homework — track everything for every child you care for.', visual: ( Pay fees 92% PRESENT ), }, { bg: 'linear-gradient(160deg,#FFF1EE 0%,#fff 60%)', eyebrow: 'INSTANT PAYMENTS', title: 'UPI fees, no\nlate-night panics.', sub: 'Pay term fees in seconds. Get e-receipts and an annual statement — DPDPA-grade secure.', visual: ( FEES DUE ₹18,500 Pay with UPI ), }, { bg: 'linear-gradient(160deg,#F0FDF4 0%,#fff 60%)', eyebrow: 'STAY CONNECTED', title: 'Live bus tracking\n& teacher chat.', sub: 'Know exactly when the bus is 8 minutes away. Message teachers without losing receipts in WhatsApp.', visual: ( Bus 8 min away Route 14 · On time ), }, ]; if (step === 'intro') { const s = slides[introIdx]; return (
S
{s.visual}
{s.eyebrow}
{s.title}
{s.sub}
{/* Pagination dots */}
{slides.map((_, i) => (
setIntroIdx(i)} style={{ width: i === introIdx ? 22 : 6, height: 6, borderRadius: 99, background: i === introIdx ? 'var(--p600)' : 'var(--n200)', transition: 'all .2s', cursor: 'pointer', }}>
))}
); } // ─── WELCOME ──────────────────────────────────────────────── if (step === 'welcome') { return (
S
SCHOLIQ
Sign in to keep
school life simple.
One identity for parents, students, teachers, drivers — across every school you belong to.
{/* Trust strip */}
{['var(--p600)', 'var(--c500)', 'var(--success)', 'var(--warning)'].map((c, i) => (
{['P', 'A', 'S', 'V'][i]}
))}
Trusted by 1,200+ schools across India
{/* Primary — Google */} {/* Divider */}
OR
By continuing you agree to Scholiq's Terms and Privacy Policy.
🇮🇳 DPDPA-compliant · data stays in India.
); } // ─── LOGIN · smart unified field ──────────────────────────── if (step === 'login') { return (
Welcome back 👋
Use the email or phone you signed up with
Email or phone
setIdentifier(e.target.value)} placeholder="you@school.in or 98765 43210" style={{ flex: 1, border: 'none', outline: 'none', fontSize: 15, fontWeight: 600, fontFamily: 'inherit' }}/> {idValid && }
{identifier && !idValid && (
{detected === 'email' ? 'Looks like an email — finish typing it' : `${identifier.replace(/\D/g, '').length}/10 digits`}
)}
OR
New to Scholiq?
); } // ─── LOGIN · password ──────────────────────────────────────── if (step === 'login-pwd') { return (
{(identifier[0] || 'P').toUpperCase()}
Signing in as
{detected === 'phone' ? `+91 ${identifier.replace(/(\d{5})(\d{5})/, '$1 $2')}` : identifier}
Enter your password
Password
setPassword(e.target.value)} placeholder="Enter your password" style={{ flex: 1, border: 'none', outline: 'none', fontSize: 15, fontWeight: 600, fontFamily: 'inherit' }}/>
); } // ─── BIOMETRIC opt-in (post-login) ────────────────────────── if (step === 'biometric') { return (
Sign in with Face ID
Skip the password next time. Your credentials stay locked on this device.
); } // ─── FORGOT password ───────────────────────────────────────── if (step === 'forgot') { return (
Reset your password
We'll send a 6-digit code to {detected === 'phone' ? `+91 ${identifier.replace(/(\d{5})(\d{5})/, '$1 $2')}` : identifier} so you can set a new one.
If you signed up with Google, use "Continue with Google" instead — your school account doesn't have a Scholiq password.
); } // ─── REGISTER · choose method ─────────────────────────────── if (step === 'reg-method') { return (
Let's set you up
Pick how you'd like to sign up — takes under a minute.
Already have an account?
); } // ─── REGISTER · enter id ──────────────────────────────────── if (step === 'reg-id') { const usingEmail = idType === 'email'; const idValidNow = usingEmail ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(identifier) : identifier.replace(/\D/g, '').length === 10; return (
What's your {usingEmail ? 'email' : 'mobile number'}?
We'll send a 6-digit code {usingEmail ? 'to your inbox' : 'by SMS'} to confirm it's you.
{usingEmail ? 'Email address' : 'Mobile number'}
{usingEmail ? (
setIdentifier(e.target.value)} placeholder="you@school.in" style={{ flex: 1, border: 'none', outline: 'none', fontSize: 15, fontWeight: 600, fontFamily: 'inherit' }}/> {idValidNow && }
) : (
🇮🇳 +91 setIdentifier(e.target.value.replace(/\D/g, '').slice(0, 10))} placeholder="98765 43210" style={{ flex: 1, border: 'none', outline: 'none', fontSize: 15, fontWeight: 600, fontFamily: 'inherit', letterSpacing: '.05em' }}/> {idValidNow && }
)}
{usingEmail ? 'We\'ll never spam you. Used only for sign-in and important alerts.' : `${identifier.replace(/\D/g, '').length}/10 · standard SMS rates may apply`}
); } // ─── REGISTER · password ──────────────────────────────────── if (step === 'reg-pwd') { const strengthLabel = ['Too weak', 'Weak', 'Okay', 'Strong', 'Very strong'][pwdStrength]; const strengthColor = pwdStrength <= 1 ? 'var(--c500)' : pwdStrength === 2 ? 'var(--warning)' : pwdStrength === 3 ? 'var(--p500)' : 'var(--success)'; return (
Create a password
Pick something memorable — you'll use this with your {idType} to sign in.
Password {password && {strengthLabel.toUpperCase()}}
setPassword(e.target.value)} placeholder="At least 8 characters" style={{ flex: 1, border: 'none', outline: 'none', fontSize: 15, fontWeight: 600, fontFamily: 'inherit' }}/>
{/* Strength meter */}
{[0, 1, 2, 3].map(i => (
i ? strengthColor : 'var(--n100)', transition: 'background .2s', }}>
))}
{/* Checklist as tighter chips */}
{[ { ok: password.length >= 8, lab: '8+ characters' }, { ok: /[A-Z]/.test(password), lab: 'Uppercase letter' }, { ok: /[0-9]/.test(password), lab: 'A number' }, { ok: /[^A-Za-z0-9]/.test(password), lab: 'A symbol' }, ].map((r, i) => (
{r.lab}
))}
); } // ─── REGISTER · OTP gate ──────────────────────────────────── if (step === 'reg-otp') { const allFilled = otp.every(d => d); return (
Verify it's you
Enter the 6-digit code we sent to{' '} {idType === 'phone' ? `+91 ${identifier.replace(/(\d{5})(\d{5})/, '$1 $2')}` : identifier} {' · '}
{otp.map((d, i) => ( { const v = e.target.value.replace(/\D/g, ''); const newOtp = [...otp]; newOtp[i] = v; setOtp(newOtp); if (v && i < 5) document.getElementById(`otp-${i + 1}`)?.focus(); }} onPaste={e => { const v = (e.clipboardData?.getData('text') || '').replace(/\D/g, '').slice(0, 6).split(''); if (v.length === 6) { e.preventDefault(); setOtp([...v]); document.getElementById('otp-5')?.focus(); } }} onKeyDown={e => { if (e.key === 'Backspace' && !d && i > 0) document.getElementById(`otp-${i - 1}`)?.focus(); }} id={`otp-${i}`} autoFocus={i === 0} style={{ flex: 1, height: 60, fontSize: 26, fontWeight: 800, textAlign: 'center', fontFamily: 'var(--mono)', background: '#fff', border: `2px solid ${d ? 'var(--p500)' : 'var(--n200)'}`, borderRadius: 12, color: 'var(--n900)', boxShadow: d ? '0 0 0 4px var(--p100)' : 'none', transition: 'all .2s', }} /> ))}
{/* Auto-detect SMS hint */} {idType === 'phone' && (
We'll auto-fill the code when SMS arrives
)}
One-time only. We won't ask again unless you sign in from a new device.
{resend > 0 ? <>Didn't get it? Resend in 0:{String(resend).padStart(2, '0')} : } {idType === 'phone' && resend === 0 && <> · }
); } // ─── REGISTER · success state ──────────────────────────────── if (step === 'reg-success') { setTimeout(() => step === 'reg-success' && setStep('reg-name'), 1600); return (
{/* Pulse ring */}
Verified ✨
Account created. Just a few more details.
); } // ─── REGISTER · name + photo ──────────────────────────────── if (step === 'reg-name') { return (
What should we call you?
Schools use this name to find you on invites and rosters.
{/* Avatar picker */}
Tap to add a photo (optional)
Full name
setName(e.target.value)} placeholder="e.g. Priya Reddy" style={{ flex: 1, border: 'none', outline: 'none', fontSize: 15, fontWeight: 600, fontFamily: 'inherit' }}/>
VERIFIED
{idType === 'phone' ? `+91 ${identifier.replace(/(\d{5})(\d{5})/, '$1 $2')}` : identifier}
); } // ─── REGISTER · pick role hint ────────────────────────────── if (step === 'reg-role') { const roles = [ { id: 'parent', emoji: '👨‍👩‍👧', lab: "I'm a parent", sub: 'Track my children at school' }, { id: 'student', emoji: '🎓', lab: "I'm a student", sub: 'See my homework, attendance, results' }, { id: 'teacher', emoji: '👩‍🏫', lab: "I'm a teacher", sub: 'Manage classes & grade work' }, { id: 'driver', emoji: '🚌', lab: "I'm a driver", sub: 'Run my school bus route' }, ]; return (
How will you use Scholiq?
Helps us tailor your home screen. You can have multiple roles later.
{roles.map(r => ( ))}
); } // ─── EMPTY · invitations ──────────────────────────────────── if (step === 'empty') { return (
{/* Header with greeting */}
{(name[0] || identifier[0] || 'U').toUpperCase()}
Welcome to Scholiq
{name || 'Hello there'} 👋
Add your first team
Schools, tuition centres, and transport operators will invite you. Accept below or use a code.
{/* Pending invitations */}
PENDING INVITATIONS · 2 Last 7 days
🏫
Delhi Public School, Hyderabad
Invited as Parent · for Aarav Reddy, Class 8-B
From Mrs. Reddy (Class teacher) · 2 days ago
NEW
📚
Aakash Tuitions
Invited as Parent · for Aarav · Maths batch
5 days ago
{/* No invitation? */}
NO INVITATION YET?
Want Scholiq for your school?
); } return null; } window.OnboardingScreen = OnboardingScreen;