VirtWeb/virtweb_frontend/src/widgets/VirtWebAppBar.tsx

64 lines
1.7 KiB
TypeScript
Raw Normal View History

2023-09-04 13:12:00 +00:00
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();
2023-09-04 15:26:31 +00:00
window.location.href = "/";
2023-09-04 13:12:00 +00:00
};
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>
)}
/>
);
}