refactor(Header): add shouldIncludeSignInButton prop to control sign-in button visibility

lukasz-hycom · lukasz-hycom · commit 88b46a842609 · 2025-12-04T16:00:12.000+01:00
diff --git a/apps/frontend/src/app/[locale]/(auth)/login/page.tsx b/apps/frontend/src/app/[locale]/(auth)/login/page.tsx
@@ -99,7 +99,7 @@ export default async function LoginPage({ params }: Readonly<Props>) {
             <body>
                 <GlobalProvider config={init} labels={init.labels} locale={locale} themes={init.themes}>
                     <div className="flex flex-col min-h-dvh">
-                        <Header data={init.common.header} />
+                        <Header data={init.common.header} shouldIncludeSignInButton={false} />
                         <div className="flex flex-col grow">
                             <AuthLayout>
                                 <SignInForm
diff --git a/apps/frontend/src/containers/Header/DesktopNavigation/DesktopNavigation.tsx b/apps/frontend/src/containers/Header/DesktopNavigation/DesktopNavigation.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useSession } from 'next-auth/react';
 import React from 'react';
 
 import { Models } from '@o2s/framework/modules';
@@ -20,7 +21,7 @@ import { Separator } from '@o2s/ui/elements/separator';
 import { Typography } from '@o2s/ui/elements/typography';
 
 import { Link as NextLink, usePathname } from '@/i18n';
-import { LOGIN_PATH, routing } from '@/i18n/routing';
+import { LOGIN_PATH } from '@/i18n/routing';
 
 import { DesktopNavigationProps } from './DesktopNavigation.types';
 
@@ -32,19 +33,14 @@ export function DesktopNavigation({
     userSlot,
     items,
     signInLabel,
-    isSignedIn,
+    shouldIncludeSignInButton = true,
 }: DesktopNavigationProps) {
+    const session = useSession();
+    const isSignedIn = !!session.data?.user;
     const pathname = usePathname();
 
-    // Check if we're on login page
-    const normalizedPathname = pathname?.split('?')[0] || '';
-    const loginPaths = [LOGIN_PATH, ...Object.values(routing.pathnames[LOGIN_PATH] || {})];
-    const isLoginPage = loginPaths.some(
-        (loginPath) => normalizedPathname === loginPath || normalizedPathname.startsWith(`${loginPath}/`),
-    );
-
-    // Show sign in button if user is not signed in, not on login page, and signInLabel is available
-    const showSignInButton = !isSignedIn && !isLoginPage && signInLabel;
+    // Show sign in button if user is not signed in, container allows it, and signInLabel is available
+    const showSignInButton = shouldIncludeSignInButton && !isSignedIn && signInLabel;
 
     const activeNavigationGroup = items.find((item) => {
         if (item.__typename === 'NavigationGroup') {
diff --git a/apps/frontend/src/containers/Header/DesktopNavigation/DesktopNavigation.types.ts b/apps/frontend/src/containers/Header/DesktopNavigation/DesktopNavigation.types.ts
@@ -10,5 +10,5 @@ export interface DesktopNavigationProps {
     userSlot?: ReactNode;
     items: CMS.Model.Header.Header['items'];
     signInLabel?: CMS.Model.Header.Header['signInLabel'];
-    isSignedIn?: boolean;
+    shouldIncludeSignInButton?: boolean;
 }
diff --git a/apps/frontend/src/containers/Header/Header.tsx b/apps/frontend/src/containers/Header/Header.tsx
@@ -20,7 +20,12 @@ import { MobileNavigation } from './MobileNavigation/MobileNavigation';
 import { NotificationInfo } from './NotificationInfo/NotificationInfo';
 import { UserInfo } from './UserInfo/UserInfo';
 
-export const Header: React.FC<HeaderProps> = ({ data, alternativeUrls, children }) => {
+export const Header: React.FC<HeaderProps> = ({
+    data,
+    alternativeUrls,
+    children,
+    shouldIncludeSignInButton = true,
+}) => {
     const session = useSession();
     const isSignedIn = !!session.data?.user;
 
@@ -83,7 +88,7 @@ export const Header: React.FC<HeaderProps> = ({ data, alternativeUrls, children
                         userSlot={UserSlot}
                         items={data.items}
                         signInLabel={data.signInLabel}
-                        isSignedIn={isSignedIn}
+                        shouldIncludeSignInButton={shouldIncludeSignInButton}
                     />
                 </div>
                 <div className="md:hidden">
@@ -97,7 +102,7 @@ export const Header: React.FC<HeaderProps> = ({ data, alternativeUrls, children
                         title={data.title}
                         mobileMenuLabel={data.mobileMenuLabel}
                         signInLabel={data.signInLabel}
-                        isSignedIn={isSignedIn}
+                        shouldIncludeSignInButton={shouldIncludeSignInButton}
                     />
                 </div>
             </>
diff --git a/apps/frontend/src/containers/Header/Header.types.ts b/apps/frontend/src/containers/Header/Header.types.ts
@@ -8,4 +8,5 @@ export interface HeaderProps {
     alternativeUrls?: {
         [key: string]: string;
     };
+    shouldIncludeSignInButton?: boolean;
 }
diff --git a/apps/frontend/src/containers/Header/MobileNavigation/MobileNavigation.tsx b/apps/frontend/src/containers/Header/MobileNavigation/MobileNavigation.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { Menu, X } from 'lucide-react';
+import { useSession } from 'next-auth/react';
 import React, { useEffect, useState } from 'react';
 
 import { Models } from '@o2s/framework/modules';
@@ -16,7 +17,7 @@ import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@o2s
 import { Typography } from '@o2s/ui/elements/typography';
 
 import { Link as NextLink, usePathname } from '@/i18n';
-import { LOGIN_PATH, routing } from '@/i18n/routing';
+import { LOGIN_PATH } from '@/i18n/routing';
 
 import { MobileNavigationProps } from './MobileNavigation.types';
 
@@ -30,19 +31,14 @@ export function MobileNavigation({
     title,
     mobileMenuLabel,
     signInLabel,
-    isSignedIn,
+    shouldIncludeSignInButton = true,
 }: MobileNavigationProps) {
+    const session = useSession();
+    const isSignedIn = !!session.data?.user;
     const pathname = usePathname();
 
-    // Check if we're on login page
-    const normalizedPathname = pathname?.split('?')[0] || '';
-    const loginPaths = [LOGIN_PATH, ...Object.values(routing.pathnames[LOGIN_PATH] || {})];
-    const isLoginPage = loginPaths.some(
-        (loginPath) => normalizedPathname === loginPath || normalizedPathname.startsWith(`${loginPath}/`),
-    );
-
-    // Show sign in button if user is not signed in, not on login page, and signInLabel is available
-    const showSignInButton = !isSignedIn && !isLoginPage && signInLabel;
+    // Show sign in button if user is not signed in, container allows it, and signInLabel is available
+    const showSignInButton = shouldIncludeSignInButton && !isSignedIn && signInLabel;
 
     const [isMenuOpen, setIsMenuOpen] = useState(false);
 
diff --git a/apps/frontend/src/containers/Header/MobileNavigation/MobileNavigation.types.ts b/apps/frontend/src/containers/Header/MobileNavigation/MobileNavigation.types.ts
@@ -12,5 +12,5 @@ export interface MobileNavigationProps {
     title?: CMS.Model.Header.Header['title'];
     mobileMenuLabel: CMS.Model.Header.Header['mobileMenuLabel'];
     signInLabel?: CMS.Model.Header.Header['signInLabel'];
-    isSignedIn?: boolean;
+    shouldIncludeSignInButton?: boolean;
 }

Original file line number	Diff line number	Diff line change
`@@ -10,5 +10,5 @@ export interface DesktopNavigationProps {`
`10`	`10`	`userSlot?: ReactNode;`
`11`	`11`	`items: CMS.Model.Header.Header['items'];`
`12`	`12`	`signInLabel?: CMS.Model.Header.Header['signInLabel'];`
`13`		`- isSignedIn?: boolean;`
	`13`	`+ shouldIncludeSignInButton?: boolean;`
`14`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,4 +8,5 @@ export interface HeaderProps {`
`8`	`8`	`alternativeUrls?: {`
`9`	`9`	`[key: string]: string;`
`10`	`10`	`};`
	`11`	`+ shouldIncludeSignInButton?: boolean;`
`11`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -12,5 +12,5 @@ export interface MobileNavigationProps {`
`12`	`12`	`title?: CMS.Model.Header.Header['title'];`
`13`	`13`	`mobileMenuLabel: CMS.Model.Header.Header['mobileMenuLabel'];`
`14`	`14`	`signInLabel?: CMS.Model.Header.Header['signInLabel'];`
`15`		`- isSignedIn?: boolean;`
	`15`	`+ shouldIncludeSignInButton?: boolean;`
`16`	`16`	`}`