feat(website): Show Account if LoggedIn (#1109)

* feat(website): Show `Account` if LoggedIn, `Login` otherwise Instead of current `User` in nav bar * Format * Rename `Account` -> `My account` per comments * feat(website): login menu button redirects back to current page * fix formatting
loculus-project · Feb 26, 2024 · 949c590 · 949c590
1 parent 2e40ed6
commit 949c590
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git a/website/src/components/Navigation/Navigation.astro b/website/src/components/Navigation/Navigation.astro
@@ -1,17 +1,30 @@
 ---
 import { SandwichMenu } from './SandwichMenu.tsx';
 import { cleanOrganism } from './cleanOrganism';
+import { getAuthUrl } from '../../middleware/authMiddleware';
 import { navigationItems } from '../../routes';
 
 const { organism, knownOrganisms } = cleanOrganism(Astro.params.organism);
+
+const isLoggedIn = Astro.locals.session.isLoggedIn;
+
+const loginUrl = await getAuthUrl(Astro.url.toString());
 ---
 
 <div class='flex justify-end'>
     <div class='subtitle hidden sm:flex sm:z-6 gap-4'>
-        {navigationItems.top(organism?.key).map(({ text, path }) => <a href={path}>{text}</a>)}
+        {navigationItems.top(organism?.key, isLoggedIn, loginUrl).map(({ text, path }) => <a href={path}>{text}</a>)}
     </div>
 
     <div class='sm:hidden fixed z-0'>
-        <SandwichMenu top={16} right={28} organism={organism} knownOrganisms={knownOrganisms} client:load />
+        <SandwichMenu
+            top={16}
+            right={28}
+            organism={organism}
+            knownOrganisms={knownOrganisms}
+            isLoggedIn={isLoggedIn}
+            loginUrl={loginUrl}
+            client:load
+        />
     </div>
 </div>
diff --git a/website/src/components/Navigation/SandwichMenu.tsx b/website/src/components/Navigation/SandwichMenu.tsx
@@ -11,9 +11,11 @@ type SandwichMenuProps = {
     right: number;
     organism: Organism | undefined;
     knownOrganisms: Organism[];
+    isLoggedIn: boolean;
+    loginUrl: string | undefined;
 };
 
-export const SandwichMenu: FC<SandwichMenuProps> = ({ top, right, organism, knownOrganisms }) => {
+export const SandwichMenu: FC<SandwichMenuProps> = ({ top, right, organism, knownOrganisms, isLoggedIn, loginUrl }) => {
     const { isOpen, toggle: toggleMenu, close: closeMenu } = useOffCanvas();
 
     return (
@@ -48,7 +50,7 @@ export const SandwichMenu: FC<SandwichMenuProps> = ({ top, right, organism, know
                                     path={routes.organismStartPage(organism.key)}
                                 />
                             ))}
-                            {navigationItems.top(organism?.key).map(({ text, path }) => (
+                            {navigationItems.top(organism?.key, isLoggedIn, loginUrl).map(({ text, path }) => (
                                 <OffCanvasNavItem key={path} text={text} level={1} path={path} />
                             ))}
                         </div>

diff --git a/website/src/routes.ts b/website/src/routes.ts
@@ -175,7 +175,7 @@ export const navigationItems = {
     ],
 };
 
-function topNavigationItems(organism: string | undefined) {
+function topNavigationItems(organism: string | undefined, isLoggedIn: boolean, loginUrl: string | undefined) {
     if (organism === undefined) {
         return [
             {
@@ -186,10 +186,9 @@ function topNavigationItems(organism: string | undefined) {
                 text: 'Submit',
                 path: routes.organismSelectorPage('submit'),
             },
-            {
-                text: 'User',
-                path: routes.userOverviewPage(),
-            },
+            ...(isLoggedIn
+                ? [{ text: 'My account', path: routes.userOverviewPage() }]
+                : [{ text: 'Login', path: loginUrl! }]),
             {
                 text: 'Datasets',
                 path: routes.datasetsPage(),
@@ -210,10 +209,9 @@ function topNavigationItems(organism: string | undefined) {
             text: 'Revise',
             path: routes.revisePage(organism),
         },
-        {
-            text: 'User',
-            path: routes.userOverviewPage(organism),
-        },
+        ...(isLoggedIn
+            ? [{ text: 'My account', path: routes.userOverviewPage(organism) }]
+            : [{ text: 'Login', path: loginUrl! }]),
         {
             text: 'Datasets',
             path: routes.datasetsPage(),