Merge pull request #20 from encryption4all/feat/nav-logged-in-state

feat(nav): show logged-in state in marketing header

Author: rubenhensen

src/lib/components/Header.svelte

@@ -4,12 +4,18 @@
 	import logoLight from '$lib/assets/images/logo.svg';
 	import logoDark from '$lib/assets/images/logo-dark.svg';
 
+	type AuthProp =
+		| { loggedIn: true; email: string | null; portalHref: string }
+		| { loggedIn: false; email: null; portalHref: string };
+
 	let {
 		showPricing = true,
-		showRegister = true
+		showRegister = true,
+		auth = { loggedIn: false, email: null, portalHref: '/portal/dashboard' }
 	}: {
 		showPricing?: boolean;
 		showRegister?: boolean;
+		auth?: AuthProp;
 	} = $props();
 
 	let menuOpen = $state(false);
@@ -37,7 +43,14 @@
 			{#each navLinks as link}
 				<a href={link.href}>{link.label}</a>
 			{/each}
-			<a href="/auth/login" class="nav-login">Log in</a>
+			{#if auth.loggedIn}
+				{#if auth.email}
+					<span class="nav-user" aria-label="Signed in as {auth.email}">{auth.email}</span>
+				{/if}
+				<a href={auth.portalHref} class="nav-login">My portal</a>
+			{:else}
+				<a href="/auth/login" class="nav-login">Log in</a>
+			{/if}
 		</nav>
 
 		<div class="header-actions">
@@ -58,7 +71,14 @@
 			{#each navLinks as link}
 				<a href={link.href} onclick={() => (menuOpen = false)}>{link.label}</a>
 			{/each}
-			<a href="/auth/login" onclick={() => (menuOpen = false)}>Log in</a>
+			{#if auth.loggedIn}
+				{#if auth.email}
+					<span class="mobile-user">{auth.email}</span>
+				{/if}
+				<a href={auth.portalHref} onclick={() => (menuOpen = false)}>My portal</a>
+			{:else}
+				<a href="/auth/login" onclick={() => (menuOpen = false)}>Log in</a>
+			{/if}
 		</nav>
 	{/if}
 </header>
@@ -124,6 +144,16 @@
 			font-weight: var(--pg-font-weight-bold);
 		}
 
+		.nav-user {
+			font-family: var(--pg-font-family);
+			font-size: var(--pg-font-size-sm);
+			color: var(--pg-text-secondary);
+			max-width: 240px;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
 		@media only screen and (max-width: 768px) {
 			display: none;
 		}
@@ -146,6 +176,13 @@
 		padding: 0.5rem 1.5rem 1rem;
 		border-top: 1px solid var(--pg-strong-background);
 
+		.mobile-user {
+			font-family: var(--pg-font-family);
+			font-size: var(--pg-font-size-sm);
+			color: var(--pg-text-secondary);
+			padding: 0.75rem 0 0.25rem;
+		}
+
 		a {
 			font-family: var(--pg-font-family);
 			font-size: var(--pg-font-size-lg);

src/routes/(marketing)/+layout.server.ts

@@ -1,11 +1,23 @@
 import type { LayoutServerLoad } from './$types';
 import { isEnabled } from '$lib/feature-flags';
+import { ATTR } from '$lib/server/auth/yivi';
+
+export const load: LayoutServerLoad = async ({ locals }) => {
+	const session = locals.session;
+	const auth = session
+		? {
+				loggedIn: true as const,
+				email: session.yiviAttributes?.[ATTR.email] ?? null,
+				portalHref:
+					session.userType === 'admin' ? '/admin/organizations' : '/portal/dashboard'
+			}
+		: { loggedIn: false as const, email: null, portalHref: '/portal/dashboard' };
 
-export const load: LayoutServerLoad = async () => {
 	return {
 		marketingFlags: {
 			pricing: isEnabled('pricingPage'),
 			registration: isEnabled('registration')
-		}
+		},
+		auth
 	};
 };

src/routes/(marketing)/+layout.svelte

@@ -6,7 +6,11 @@
 	let { data, children }: { data: LayoutData; children: import('svelte').Snippet } = $props();
 </script>
 
-<Header showPricing={data.marketingFlags.pricing} showRegister={data.marketingFlags.registration} />
+<Header
+	showPricing={data.marketingFlags.pricing}
+	showRegister={data.marketingFlags.registration}
+	auth={data.auth}
+/>
 <main>
 	{@render children()}
 </main>