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:
parent
240efb02cf
commit
30158c02b6
3 changed files with 68 additions and 1 deletions
|
|
@ -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
|
||||
============================================ */
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ export default function UserMenu() {
|
|||
|
||||
const handleSignIn = () => {
|
||||
playSound('button-click')
|
||||
navigate(Routes.register())
|
||||
navigate(Routes.login())
|
||||
}
|
||||
|
||||
const handleSignOut = () => {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue