added login_logout buttons w/ burnettk

spiffworkflow-frontend/src/components/NavigationBar.tsx

@@ -1,12 +1,17 @@
 import {
   Header,
   Theme,
+  Button,
   HeaderName,
   HeaderNavigation,
   HeaderMenuItem,
   HeaderMenu,
+  HeaderGlobalAction,
+  HeaderGlobalBar,
   // @ts-ignore
 } from '@carbon/react';
+// @ts-ignore
+import { Logout, Login } from '@carbon/icons-react';
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 // @ts-expect-error TS(2307) FIXME: Cannot find module '../logo.svg' or its correspond... Remove this comment to see the full error message
@@ -15,52 +20,13 @@ import UserService from '../services/UserService';
 
 // for ref: https://react-bootstrap.github.io/components/navbar/
 export default function NavigationBar() {
-  // const navElements = null;
-  //
-  // const handleLogout = () => {
-  //   UserService.doLogout();
-  // };
-  //
-  // const handleLogin = () => {
-  //   UserService.doLogin();
-  // };
-  //
-  // const loginLink = () => {
-  //   if (!UserService.isLoggedIn()) {
-  //     return (
-  //       <Navbar.Collapse className="justify-content-end">
-  //         <Navbar.Text>
-  //           <Button variant="link" onClick={handleLogin}>
-  //             Login
-  //           </Button>
-  //         </Navbar.Text>
-  //       </Navbar.Collapse>
-  //     );
-  //   }
-  //   return null;
-  // };
-  //
-  // const logoutLink = () => {
-  //   if (UserService.isLoggedIn()) {
-  //     return (
-  //       <Navbar.Collapse className="justify-content-end">
-  //         <Navbar.Text>
-  //           Signed in as: <strong>{UserService.getUsername()}</strong>
-  //         </Navbar.Text>
-  //         <Navbar.Text>
-  //           <Button
-  //             variant="link"
-  //             onClick={handleLogout}
-  //             data-qa="logout-button"
-  //           >
-  //             Logout
-  //           </Button>
-  //         </Navbar.Text>
-  //       </Navbar.Collapse>
-  //     );
-  //   }
-  //   return null;
-  // };
+  const handleLogout = () => {
+    UserService.doLogout();
+  };
+
+  const handleLogin = () => {
+    UserService.doLogin();
+  };
 
   const location = useLocation();
   const [activeKey, setActiveKey] = useState<string>('');
@@ -87,6 +53,24 @@ export default function NavigationBar() {
     return activeKey === menuItemPath;
   };
 
+  const loginAndLogoutAction = () => {
+    if (UserService.isLoggedIn()) {
+      return (
+        <>
+          <HeaderGlobalAction>{UserService.getUsername()}</HeaderGlobalAction>
+          <HeaderGlobalAction aria-label="Logout" onClick={handleLogout}>
+            <Logout />
+          </HeaderGlobalAction>
+        </>
+      );
+    }
+    return (
+      <HeaderGlobalAction aria-label="Login" onClick={handleLogin}>
+        <Login />
+      </HeaderGlobalAction>
+    );
+  };
+
   if (activeKey) {
     return (
       <div className="spiffworkflow-header-container">
@@ -112,6 +96,7 @@ export default function NavigationBar() {
                 Process Instances
               </HeaderMenuItem>
             </HeaderNavigation>
+            <HeaderGlobalBar>{loginAndLogoutAction()}</HeaderGlobalBar>
           </Header>
         </Theme>
       </div>