// Sporda — Phase F · Auth + Account. 6 mobile screens + 3 desktop.
// 045 Login already shipped (ScreenLogin in screens-2.jsx).
// Shared chrome for auth screens — atmospheric top + main content
const AuthFrame = ({ title, subtitle, children, back = true }) => (
{/* Header bar */}
{back && }
Sporda
{back && }
{/* Title block */}
{title && (
{title}
{subtitle &&
{subtitle}
}
)}
{children}
);
// Form field component
const Field = ({ label, type = 'text', placeholder, value, hint, error, icon, trailing }) => (
{label &&
{label}
}
{icon && {icon}}
{trailing}
{(hint || error) &&
{error || hint}
}
);
// Big lime CTA button used across auth flows
const AuthPrimary = ({ label, sub }) => (
);
// ===========================================================================
// 046 — SIGN UP
// ===========================================================================
const ScreenSignup = () => (
Create your account.}
subtitle="Sync your follows, alerts, and watch history across devices."
>
{/* Social sign-up first — single tap path */}
{/* Divider */}
OR WITH EMAIL
{/* Email form */}
}/>
}
trailing={}
hint="Mix of upper, lower, and a number"/>
}/>
{/* Marketing opt-in */}
Email me weekend match digests · I can unsubscribe anytime
By signing up you agree to our Terms and Privacy Policy.
Already have an account? Sign in
);
// ===========================================================================
// 047 — FORGOT PASSWORD
// ===========================================================================
const ScreenForgot = () => (
Reset your password.}
subtitle="Enter the email tied to your account. We'll send a link valid for 30 minutes."
>
}/>
{/* Inline help */}
Didn't get the link?
Check your spam folder.
The link only goes to the email you signed up with.
If you used Google or Apple sign-in, there's no password to reset.
Remember it? Sign in
);
// ===========================================================================
// 048 — VERIFY EMAIL (6-digit code input)
// ===========================================================================
const ScreenVerify = () => {
const digits = ['4', '8', '2', '1', '', ''];
return (
Check your inbox.}
subtitle={<>We sent a 6-digit code to ben@rascals.co. It expires in 9:42.}
>
);
};
// ===========================================================================
// 049 — 2FA SETUP
// ===========================================================================
const Screen2FA = () => (
Protect your account.}
subtitle="Add a second factor so even a stolen password can't get in."
>
{/* Recommended */}
Recommended
Authenticator app
1Password · Authy · Google Authenticator
{/* Other options */}
Other options
{[
{ icon: , title: 'Text message (SMS)', sub: 'Less secure but works without an app' },
{ icon: , title: 'Backup codes', sub: '10 one-time codes to print or save' },
{ icon: , title: 'Passkey / hardware key', sub: 'YubiKey, FIDO2, Touch ID' },
].map((opt, i) => (
What we don't do: we never post on your behalf without your tap. Disconnecting any account here erases its tokens within 24 hours.
);
};
// ===========================================================================
// 051 — ACCOUNT DELETION CONFIRM
// ===========================================================================
const ScreenAccountDelete = () => (
Delete your account?}
subtitle="This is permanent. We're sad to see you go."
>
{/* What will happen */}
What we'll do
{[
'Delete your account and profile within 24 hours',
'Remove your followed teams, players, and leagues',
'142 watched matches will be lost',
'Connected social accounts will be disconnected',
'You\'ll be signed out on all devices',
].map((line, i) => (
{line}
))}
{/* Soft alternative */}
{/* Type to confirm */}
}
/>