// become-instructor.jsx — Full-page instructor signup form // Creates auth.users + profiles (role=instructor) + instructors row in one go. const BecomeInstructorPage = ({ setPage }) => { const data = window.useSiteData(); const { categories } = data; const auth = window.useAuth(); const isMobile = window.useIsMobile(); const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); const [fullName, setFullName] = React.useState(auth.profile?.full_name || ''); const [city, setCity] = React.useState(auth.profile?.city || ''); const [state, setState] = React.useState(auth.profile?.state || ''); const [category, setCategory] = React.useState('music'); const [subject, setSubject] = React.useState('Piano'); // v19: multi-topic. Defaults to the legacy `subject` so existing form // state migrates cleanly. const [topicsSel, setTopicsSel] = React.useState(['Piano']); const [specialtiesStr, setSpecialtiesStr] = React.useState(''); const [bio, setBio] = React.useState(''); const [rate, setRate] = React.useState(75); const [experience, setExperience] = React.useState(5); const [busy, setBusy] = React.useState(false); const [error, setError] = React.useState(null); const [success, setSuccess] = React.useState(null); // Captcha only matters on the new-account path (auth.user is null). For // an already-logged-in user clicking "become an instructor", they // already passed captcha at signup — skip it. const captcha = (window.useCaptcha && !auth.user) ? window.useCaptcha() : { token: null, widget: null, required: false }; const subjects = (categories.find(c => c.id === category)?.subjects) || []; React.useEffect(() => { if (!subjects.includes(subject) && subjects.length) setSubject(subjects[0]); }, [category]); const submit = async (e) => { e.preventDefault(); setError(null); setSuccess(null); if (!city || !state) { setError('Please add your city and state.'); return; } if (state.length !== 2) { setError('State must be a 2-letter abbreviation (e.g. NY).'); return; } if (!bio.trim() || bio.length < 40) { setError('Please write a bio (40 characters minimum).'); return; } if (!rate || rate < 10) { setError('Please set a rate of $10/hr or more.'); return; } const specialties = specialtiesStr .split(',').map(s => s.trim()).filter(Boolean).slice(0, 5); setBusy(true); try { if (auth.user) { // Already logged in — just promote them to instructor const initials = (fullName.match(/\b\w/g) || []).slice(0, 2).join('').toUpperCase(); const hue = Math.floor(Math.random() * 360); // Update profile to instructor role await window.supa.from('profiles').upsert({ id: auth.user.id, role: 'instructor', full_name: fullName, avatar_initials: initials, hue, city, state: state.toUpperCase(), }); const { error: insErr } = await window.supa.from('instructors').upsert({ id: auth.user.id, user_id: auth.user.id, full_name: fullName, avatar_initials: initials, hue, subject, topics: topicsSel, category, specialties, city, state: state.toUpperCase(), bio, rate: Number(rate), experience: Number(experience), badges: [], available: true, is_sample: false, }); if (insErr) { setError(insErr.message); return; } await window.supa.auth.refreshSession(); await window.SITE_DATA.refresh(); setSuccess('Welcome aboard! Your instructor profile is live.'); setTimeout(() => setPage('dashboard'), 1200); } else { if (!email || !password) { setError('Please enter email and password.'); return; } if (captcha.required) { setError('Please complete the captcha.'); return; } const { error } = await window.AUTH.signUpInstructor({ email, password, fullName, city, state: state.toUpperCase(), subject, topics: topicsSel, category, specialties, bio, rate: Number(rate), experience: Number(experience), badges: [], captchaToken: captcha.token, }); captcha.reset && captcha.reset(); if (error) { setError(error.message); return; } await window.SITE_DATA.refresh(); // Supabase signUp has already emailed a confirm/login link — same // behavior as the admin-create flow (see MagicLinkPostCreate). The // user just clicks the email link to land on their dashboard, no // separate "send magic link" step. setSuccess('Account created! We just sent a login link to ' + email + ' — click it to access your dashboard.'); setTimeout(() => setPage('home'), 2800); } } finally { setBusy(false); } }; return (
{/* X close at top-right — Joe asked for this instead of needing to use the NavBar's home link to escape. */} {/* Hero */}

For Instructors

Teach what you love.{isMobile ? ' ' :
}Reach students nationwide.

Set your own schedule, your own rate, and connect with students who genuinely want to learn from you. No platform fee for v1 — every dollar a student pays goes to you.

Already an instructor?{' '}
{/* Form */}

{auth.user ? 'Create your instructor profile' : 'Apply to teach'}

Takes about 3 minutes. You can edit anything later from your dashboard.

{!auth.user && (
setEmail(e.target.value)} style={inputI} placeholder="you@example.com" /> setPassword(e.target.value)} style={inputI} placeholder="6+ characters" />
)}
setFullName(e.target.value)} style={inputI} placeholder="Jane Doe" /> setCity(e.target.value)} style={inputI} placeholder="Austin" /> setState(e.target.value.toUpperCase())} style={inputI} placeholder="TX" maxLength={2} />
{subjects.map(s => { const on = topicsSel.includes(s); return ( ); })}
setSpecialtiesStr(e.target.value)} style={inputI} placeholder="Classical, Jazz, Beginner-Friendly" />