feat(landing): add login/register toggle and fix sign-in routing

Add toggle link between login and register forms in CTAModal allowing
users to switch authentication modes without closing the modal.
Fix UserMenu sign-in button to navigate to login instead of register.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Quinn Ftw 2025-12-28 21:55:39 -08:00
parent 240efb02cf
commit 30158c02b6
3 changed files with 68 additions and 1 deletions

View file

@ -397,6 +397,42 @@
letter-spacing: 0.05em;
}
/* ============================================
AUTH TOGGLE (Login/Register switch)
============================================ */
.cta-auth-toggle {
margin-top: 1.25rem;
text-align: center;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.6);
}
.cta-auth-toggle-link {
background: none;
border: none;
padding: 0;
font: inherit;
font-weight: 600;
color: var(--modal-primary, #4ecdc4);
cursor: pointer;
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 2px;
transition: all 0.2s ease;
}
.cta-auth-toggle-link:hover {
color: var(--modal-gradient-to, #556ee6);
text-decoration-style: solid;
}
.cta-auth-toggle-link:focus-visible {
outline: 2px solid var(--modal-primary, #4ecdc4);
outline-offset: 2px;
border-radius: 2px;
}
/* ============================================
SUCCESS STATE
============================================ */

View file

@ -535,6 +535,37 @@ export default function CTAModal({ context, onClose }: CTAModalProps) {
>
{submissionState === 'submitting' ? config.submittingLabel : config.submitLabel}
</button>
{/* Toggle between login and register */}
{(context.type === 'login' || context.type === 'register') && (
<p className="cta-auth-toggle">
{context.type === 'login' ? (
<>
Don't have an account?{' '}
<button
type="button"
className="cta-auth-toggle-link"
onClick={() => openRegister(context.userType)}
onMouseEnter={() => playSound('button-hover')}
>
Register
</button>
</>
) : (
<>
Already have an account?{' '}
<button
type="button"
className="cta-auth-toggle-link"
onClick={() => openLogin(context.userType)}
onMouseEnter={() => playSound('button-hover')}
>
Sign In
</button>
</>
)}
</p>
)}
</form>
</>
)}

View file

@ -69,7 +69,7 @@ export default function UserMenu() {
const handleSignIn = () => {
playSound('button-click')
navigate(Routes.register())
navigate(Routes.login())
}
const handleSignOut = () => {