62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
|
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>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|