Merge pull request #21718 from overleaf/td-bs5-nav-logged-out

[BS5] Add missing logged-out items to React nav bar

GitOrigin-RevId: 3dc681dcac46cdb68675f6034be56e2b96292c32

services/web/app/views/layout-react.pug

@@ -17,6 +17,7 @@ block append meta
 		- const canDisplaySplitTestMenu = hasFeature('saas') && (canDisplayAdminMenu || staffAccess?.splitTestMetrics || staffAccess?.splitTestManagement)
 		- const canDisplaySurveyMenu = hasFeature('saas') && canDisplayAdminMenu
 		- const enableUpgradeButton = projectDashboardReact && usersBestSubscription && usersBestSubscription.type === 'free'
+		- const showSignUpLink = hasFeature('registration-page')
 
 		meta(name="ol-navbar" data-type="json" content={
 			customLogo: settings.nav.custom_logo,
@@ -29,6 +30,8 @@ block append meta
 			suppressNavbarRight: !!suppressNavbarRight,
 			suppressNavContentLinks: !!suppressNavContentLinks,
 			showSubscriptionLink: nav.showSubscriptionLink,
+			showSignUpLink: showSignUpLink,
+			currentUrl: currentUrl,
 			sessionUser: sessionUser ? { email: sessionUser.email} : undefined,
 			adminUrl: settings.adminUrl,
 			items: cloneAndTranslateText(nav.header_extras)

services/web/frontend/extracted-translations.json

@@ -838,6 +838,7 @@
   "log_entry_maximum_entries_see_full_logs": "",
   "log_entry_maximum_entries_title": "",
   "log_hint_extra_info": "",
+  "log_in": "",
   "log_in_with_primary_email_address": "",
   "log_out": "",
   "log_out_lowercase_dot": "",
@@ -1380,6 +1381,7 @@
   "showing_x_out_of_n_projects": "",
   "showing_x_results": "",
   "showing_x_results_of_total": "",
+  "sign_up": "",
   "simple_search_mode": "",
   "single_sign_on_sso": "",
   "skip": "",

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/default-navbar.tsx

@@ -6,15 +6,12 @@ import AdminMenu from '@/features/ui/components/bootstrap-5/navbar/admin-menu'
 import type { DefaultNavbarMetadata } from '@/features/ui/components/types/default-navbar-metadata'
 import NavItemFromData from '@/features/ui/components/bootstrap-5/navbar/nav-item-from-data'
 import LoggedInItems from '@/features/ui/components/bootstrap-5/navbar/logged-in-items'
+import LoggedOutItems from '@/features/ui/components/bootstrap-5/navbar/logged-out-items'
 import HeaderLogoOrTitle from '@/features/ui/components/bootstrap-5/navbar/header-logo-or-title'
 import MaterialIcon from '@/shared/components/material-icon'
 import { useContactUsModal } from '@/shared/hooks/use-contact-us-modal'
 import { UserProvider } from '@/shared/context/user-context'
 
-function LoggedOutItems() {
-  return <span>Logged out</span>
-}
-
 function DefaultNavbar(props: DefaultNavbarMetadata) {
   const {
     customLogo,
@@ -27,6 +24,8 @@ function DefaultNavbar(props: DefaultNavbarMetadata) {
     suppressNavbarRight,
     suppressNavContentLinks,
     showSubscriptionLink,
+    showSignUpLink,
+    currentUrl,
     sessionUser,
     adminUrl,
     items,
@@ -117,7 +116,10 @@ function DefaultNavbar(props: DefaultNavbarMetadata) {
                       showSubscriptionLink={showSubscriptionLink}
                     />
                   ) : (
-                    <LoggedOutItems />
+                    <LoggedOutItems
+                      showSignUpLink={showSignUpLink}
+                      currentUrl={currentUrl}
+                    />
                   )}
                 </Nav>
               </Navbar.Collapse>

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/logged-out-items.tsx

@@ -0,0 +1,37 @@
+import { useTranslation } from 'react-i18next'
+import NavLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-link-item'
+import { sendMB } from '@/infrastructure/event-tracking'
+
+export default function LoggedOutItems({
+  showSignUpLink,
+  currentUrl,
+}: {
+  showSignUpLink: boolean
+  currentUrl: string
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      {showSignUpLink ? (
+        <NavLinkItem
+          href="/register"
+          className="primary"
+          onClick={e => {
+            sendMB('menu-clicked-register', { page: currentUrl })
+          }}
+        >
+          {t('sign_up')}
+        </NavLinkItem>
+      ) : null}
+      <NavLinkItem
+        href="/login"
+        onClick={e => {
+          sendMB('menu-clicked-login', { page: currentUrl })
+        }}
+      >
+        {t('log_in')}
+      </NavLinkItem>
+    </>
+  )
+}

services/web/frontend/js/features/ui/components/types/default-navbar-metadata.ts

@@ -14,6 +14,8 @@ export type DefaultNavbarMetadata = {
   suppressNavbarRight: boolean
   suppressNavContentLinks: boolean
   showSubscriptionLink: boolean
+  showSignUpLink: boolean
+  currentUrl: string
   sessionUser?: NavbarSessionUser
   adminUrl?: string
   items: NavbarItemData[]