Can sign out

virtweb_frontend/src/widgets/BaseAuthenticatedPage.tsx

@@ -1,3 +1,19 @@
+import { Box } from "@mui/material";
+import { VirtWebAppBar } from "./VirtWebAppBar";
+
 export function BaseAuthenticatedPage(): React.ReactElement {
-  return <>ready with login</>;
+  return (
+    <Box
+      component="div"
+      sx={{
+        minHeight: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: (theme) => theme.palette.grey[900],
+        color: (theme) => theme.palette.grey[100],
+      }}
+    >
+      <VirtWebAppBar />
+    </Box>
+  );
 }

virtweb_frontend/src/widgets/VirtWebAppBar.tsx

@@ -0,0 +1,61 @@
+import { mdiLogout, mdiServer } from "@mdi/js";
+import Icon from "@mdi/react";
+import { AppBar, IconButton, Toolbar, Typography } from "@mui/material";
+import { RouterLink } from "./RouterLink";
+import { AsyncWidget } from "./AsyncWidget";
+import { AuthApi, AuthInfo } from "../api/AuthApi";
+import React from "react";
+import { useAuth } from "../App";
+import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider";
+
+export function VirtWebAppBar(): React.ReactElement {
+  const loadingMessage = useLoadingMessage();
+
+  const auth = useAuth();
+
+  const [info, setInfo] = React.useState<null | AuthInfo>(null);
+
+  const load = async () => {
+    setInfo(await AuthApi.GetAuthInfo());
+  };
+
+  const signOut = async () => {
+    loadingMessage.show("Signing out...");
+    try {
+      await AuthApi.SignOut();
+    } catch (e) {
+      console.error(e);
+    }
+
+    auth.setSignedIn(false);
+    loadingMessage.hide();
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={0}
+      load={load}
+      errMsg="Failed to load user information!"
+      build={() => (
+        <AppBar position="sticky">
+          <Toolbar>
+            <Icon
+              path={mdiServer}
+              style={{ height: "1.2rem", marginRight: "1rem" }}
+            />
+            <Typography variant="h6" color="inherit" noWrap>
+              <RouterLink to={"/"}>VirtWeb</RouterLink>
+            </Typography>
+            <div style={{ flex: 1 }}></div>
+
+            <Typography variant="body1">{info?.id}</Typography>
+
+            <IconButton onClick={signOut}>
+              <Icon path={mdiLogout} size={1} />
+            </IconButton>
+          </Toolbar>
+        </AppBar>
+      )}
+    />
+  );
+}