// screens_auth.jsx — Login, Register, Forgot Password, Welcome
// Clean Apple-native auth flow for TeamCaddy
// ─────────────────────────────────────────────────────────────
// Shared visual: logo mark
// ─────────────────────────────────────────────────────────────
function TTLogo({ size = 72, accent = '#FF3B30' }) {
return (
);
}
// ─────────────────────────────────────────────────────────────
// Field: iOS-style grouped input
// ─────────────────────────────────────────────────────────────
function AuthField({ T, icon, type = 'text', placeholder, value, onChange, trailing, autoFocus, error }) {
return (
{icon && }
onChange(e.target.value)}
placeholder={placeholder}
autoFocus={autoFocus}
style={{
flex: 1, border:'none', outline:'none', background:'transparent',
fontFamily: T.font, fontSize: 16, color: T.label, letterSpacing: -0.2,
padding: '14px 0', minWidth: 0,
}}
/>
{trailing}
);
}
// ─────────────────────────────────────────────────────────────
// Primary button
// ─────────────────────────────────────────────────────────────
function AuthButton({ T, children, onClick, disabled, variant = 'primary', icon, loading }) {
const isPrimary = variant === 'primary';
const isSocial = variant === 'social';
const isApple = variant === 'apple';
const isGhost = variant === 'ghost';
let style = {};
if (isPrimary) style = { background: T.accent, color: '#fff', border: 'none' };
if (isApple) style = { background: T.dark ? '#fff' : '#000', color: T.dark ? '#000' : '#fff', border: 'none' };
if (isSocial) style = { background: T.card, color: T.label, border: `0.5px solid ${T.sep}` };
if (isGhost) style = { background: 'transparent', color: T.accent, border: 'none' };
return (
);
}
// ─────────────────────────────────────────────────────────────
// Divider with label
// ─────────────────────────────────────────────────────────────
function OrDivider({ T }) {
return (
);
}
// ─────────────────────────────────────────────────────────────
// WELCOME / LAUNCH SCREEN
// ─────────────────────────────────────────────────────────────
function WelcomeScreen({ T, onNav }) {
return (
{/* Ambient backdrop */}
{/* Hero */}
TeamCaddy
Your team's schedule, chat, and memories — in one clean app.
{/* Floating sample chips */}
{/* CTAs */}
onNav('register')} variant="primary">Create account
onNav('login')} variant="ghost">I already have an account
Welcome back
Sign in to your TeamCaddy account.
setShow(!show)} style={{
background:'none', border:'none', padding: 4, cursor:'pointer', display:'flex',
}}>
}/>
{error && {error}
}
Sign in
onAuth()}>Continue with Apple
onAuth()}>Continue with Google
New to TeamCaddy?{' '}
);
}
// ─────────────────────────────────────────────────────────────
// REGISTER
// ─────────────────────────────────────────────────────────────
function RegisterScreen({ T, onNav, onAuth }) {
const [step, setStep] = React.useState(1); // 1: account, 2: join team
const [name, setName] = React.useState('');
const [email, setEmail] = React.useState('');
const [password, setPassword] = React.useState('');
const [show, setShow] = React.useState(false);
const [role, setRole] = React.useState('parent');
const [teamCode, setTeamCode] = React.useState('');
const [loading, setLoading] = React.useState(false);
const pwStrength = password.length === 0 ? 0
: password.length < 6 ? 1
: password.length < 10 ? 2
: /[0-9]/.test(password) && /[A-Z]/.test(password) ? 4 : 3;
const pwLabel = ['', 'Weak', 'Fair', 'Good', 'Strong'][pwStrength];
const pwColor = [T.sep, T.red, T.yellow, T.blue, T.green][pwStrength];
const canContinue = name && email && password.length >= 6;
const submit = () => {
setLoading(true);
setTimeout(() => { setLoading(false); onAuth(); }, 900);
};
return (
= 1} T={T}/>
= 2} T={T}/>
{step === 1 ? (
<>
Create your account
Takes about 30 seconds.
setShow(!show)} style={{
background:'none', border:'none', padding: 4, cursor:'pointer', display:'flex',
}}>
}/>
{password && (
)}
I'm joining as
setRole('parent')}/>
setRole('admin')}/>
By continuing, you agree to our{' '}
Terms and{' '}
Privacy Policy.
setStep(2)} disabled={!canContinue} icon="arrow-right">Continue
Already a member?{' '}
) : (
<>
{role === 'admin' ? 'Set up your team' : 'Join your team'}
{role === 'admin'
? "Create a new team or join as a coach."
: "Enter the invite code from your coach."}
{role === 'parent' ? (
<>
Team invite code
setTeamCode(v.toUpperCase())} autoFocus/>
No code? Your coach can send an invite link to your email.
) : (
<>
)}
{role === 'parent' && (
Join team
)}
)}
);
}
function StepDot({ active, T }) {
return (
);
}
function RoleCard({ T, icon, label, active, onClick }) {
return (
);
}
// ─────────────────────────────────────────────────────────────
// FORGOT PASSWORD
// ─────────────────────────────────────────────────────────────
function ForgotScreen({ T, onNav }) {
const [email, setEmail] = React.useState('');
const [sent, setSent] = React.useState(false);
const [loading, setLoading] = React.useState(false);
const submit = () => {
if (!email) return;
setLoading(true);
setTimeout(() => { setLoading(false); setSent(true); }, 700);
};
return (
{!sent ? (
<>
Forgot password?
Enter the email you signed up with and we'll send a link to reset it.
Remembered it?{' '}
) : (
<>
Check your email
We sent a password reset link to
{email}
Didn't receive it? Check spam or{' '}
.
onNav('login')}>Back to sign in
)}
);
}
Object.assign(window, { WelcomeScreen, LoginScreen, RegisterScreen, ForgotScreen });