marco/buildmymcpserver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): single Login/Dashboard button on marketing header
All checks were successful
Deploy to Production / deploy (push) Successful in 51s
Details

Browse Source 
Logged-out state was showing two CTAs ("Sign in" link + "Start building"
button) both going to /login — confusing because the prominent purple
button never literally said "Login". Consolidate to one button whose
label flips with auth state: "Login" when out, "Dashboard" when in.
Same slot, same colour, no header layout shift.

Defaults to "Login" while the /v1/auth/me probe is in flight so the
common (anonymous) visitor sees no flicker.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marco Sadjadi 2026-05-25 19:30:27 +02:00
parent b248adf5c0
commit 091454d273
1 changed files with 15 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
apps/web/components/marketing-auth-buttons.tsx
View File

@ -5,9 +5,14 @@ import Link from 'next/link';
import { useEffect, useState } from 'react';
/**
* Marketing-header CTAs that reflect the session: a logged-in visitor sees a
* "Dashboard" link instead of the sign-in buttons. The session cookie is
* httpOnly, so login state is probed via /v1/auth/me.
* Marketing-header CTA that reflects the session: logged-out visitors see a
* "Login" button, signed-in users see "Dashboard". Same button slot so the
* header layout doesn't shift between states.
*
* While the auth probe is in flight (`authed === null`) we default to the
* logged-out label — most marketing-page visitors are anonymous, so this
* avoids a "Dashboard → Login" flicker for them. Authed users see a single
* "Login → Dashboard" swap once the /v1/auth/me round-trip completes.
*/
export function MarketingAuthButtons() {
const [authed, setAuthed] = useState<boolean | null>(null);
@ -18,32 +23,14 @@ export function MarketingAuthButtons() {
.catch(() => setAuthed(false));
}, []);
if (authed) {
return (
<Link
href="/dashboard"
className="rounded-md bg-[--color-accent] px-3 py-1.5 text-[13px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
>
Dashboard
</Link>
);
}
const showDashboard = authed === true;
// Logged out — or still resolving — show the default sign-in CTAs.
return (
<>
<Link
href="/login"
className="hidden rounded-md px-3 py-1.5 text-[13px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg] sm:block"
>
Sign in
</Link>
<Link
href="/login"
className="rounded-md bg-[--color-accent] px-3 py-1.5 text-[13px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
>
Start building
</Link>
</>
<Link
href={showDashboard ? '/dashboard' : '/login'}
className="rounded-md bg-[--color-accent] px-3 py-1.5 text-[13px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
>
{showDashboard ? 'Dashboard' : 'Login'}
</Link>
);
}