sartography/spiff-arena
1
0
Fork 0
mirror of https://github.com/sartography/spiff-arena.git synced 2025-02-04 21:53:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

added login_logout buttons w/ burnettk

Browse Source
This commit is contained in:
jasquat 2022-11-02 16:02:43 -04:00
parent 0365c699d8
commit 2936a3a826
1 changed files with 31 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
spiffworkflow-frontend/src/components/NavigationBar.tsx
View File

@ -1,12 +1,17 @@
import { import {
Header, Header,
Theme, Theme,
Button,
HeaderName, HeaderName,
HeaderNavigation, HeaderNavigation,
HeaderMenuItem, HeaderMenuItem,
HeaderMenu, HeaderMenu,
HeaderGlobalAction,
HeaderGlobalBar,
// @ts-ignore // @ts-ignore
} from '@carbon/react'; } from '@carbon/react';
// @ts-ignore
import { Logout, Login } from '@carbon/icons-react';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom'; 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 // @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/ // for ref: https://react-bootstrap.github.io/components/navbar/
export default function NavigationBar() { export default function NavigationBar() {
// const navElements = null; const handleLogout = () => {
// UserService.doLogout();
// const handleLogout = () => { };
// UserService.doLogout();
// }; const handleLogin = () => {
// UserService.doLogin();
// 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 location = useLocation(); const location = useLocation();
const [activeKey, setActiveKey] = useState<string>(''); const [activeKey, setActiveKey] = useState<string>('');
@ -87,6 +53,24 @@ export default function NavigationBar() {
return activeKey === menuItemPath; 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) { if (activeKey) {
return ( return (
<div className="spiffworkflow-header-container"> <div className="spiffworkflow-header-container">
@ -112,6 +96,7 @@ export default function NavigationBar() {
Process Instances Process Instances
</HeaderMenuItem> </HeaderMenuItem>
</HeaderNavigation> </HeaderNavigation>
<HeaderGlobalBar>{loginAndLogoutAction()}</HeaderGlobalBar>
</Header> </Header>
</Theme> </Theme>
</div> </div>