From 4411eca743956d07e56722364aef9d63f766d05d Mon Sep 17 00:00:00 2001
From: Michael Quigley <michael@quigley.com>
Date: Tue, 3 Dec 2024 11:36:42 -0500
Subject: [PATCH] login/logout infrastructure improvements (#724, #802)

---
 ui100/src/ApiConsole.tsx |  3 +--
 ui100/src/Login.tsx      |  4 ++--
 ui100/src/NavBar.tsx     | 11 +++++++++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/ui100/src/ApiConsole.tsx b/ui100/src/ApiConsole.tsx
index ccf844cc..64ba699d 100644
--- a/ui100/src/ApiConsole.tsx
+++ b/ui100/src/ApiConsole.tsx
@@ -56,12 +56,11 @@ const ApiConsole = ({ user, logout }: ApiConsoleProps) => {
 
     return (
         <div>
-            <NavBar version={version} />
+            <NavBar logout={logout} version={version} />
             <Box>
                 <div style={{position: "relative", width: "100%", height: "500px"}}>
                     <GraphCanvas nodes={nodes} edges={edges} theme={reagraphTheme} labelFontUrl={"https://fonts.googleapis.com/css?family=Poppins"}/>
                 </div>
-                <Button onClick={logout}>Log Out</Button>
             </Box>
         </div>
     );
diff --git a/ui100/src/Login.tsx b/ui100/src/Login.tsx
index 11b7856c..b710128c 100644
--- a/ui100/src/Login.tsx
+++ b/ui100/src/Login.tsx
@@ -27,7 +27,7 @@ const Login = ({ onLogin }: LoginProps) => {
     }
 
     return (
-        <Typography>
+        <Typography component="div">
             <Container maxWidth="xs">
                 <Box sx={{ marginTop: 8, display: "flex", flexDirection: "column", alignItems: "center"}}>
                     <h2>welcome to zrok...</h2>
@@ -59,7 +59,7 @@ const Login = ({ onLogin }: LoginProps) => {
                         <Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>
                             Log In
                         </Button>
-                        <Box component="h3">{message}</Box>
+                        <Box component="h3" style={{ color: "red" }}>{message}</Box>
                     </Box>
                 </Box>
             </Container>
diff --git a/ui100/src/NavBar.tsx b/ui100/src/NavBar.tsx
index 0d022144..0d9e1497 100644
--- a/ui100/src/NavBar.tsx
+++ b/ui100/src/NavBar.tsx
@@ -1,11 +1,13 @@
-import {AppBar, Box, IconButton, Toolbar, Typography} from "@mui/material";
+import {AppBar, Box, Button, Grid2, IconButton, Toolbar, Typography} from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
+import LogoutIcon from "@mui/icons-material/Logout";
 
 interface NavBarProps {
+    logout: () => void;
     version: string;
 }
 
-const NavBar = ({ version }: NavBarProps) => {
+const NavBar = ({ logout, version }: NavBarProps) => {
     return (
         <Box ssx={{ flexGrow: 1 }}>
             <AppBar position="static">
@@ -16,6 +18,11 @@ const NavBar = ({ version }: NavBarProps) => {
                     <Typography variant="h6" sx={{ flexGrow: 1 }} display={{ xs: "none", sm: "none", md: "block" }}>
                         zrok { version !== "" ? " | " + version : ""}
                     </Typography>
+                    <Grid2 container sx={{ flexGrow: 1 }}>
+                        <Grid2 display="flex" justifyContent="right" size="grow">
+                            <Button color="inherit" onClick={logout}><LogoutIcon /></Button>
+                        </Grid2>
+                    </Grid2>
                 </Toolbar>
             </AppBar>
         </Box>