95 lines
2.5 KiB
TypeScript
95 lines
2.5 KiB
TypeScript
import { AppBar, Confirm, Layout, Logout, Menu, useLogout, UserMenu } from "react-admin";
|
|
import { LoginMethod } from "../pages/LoginPage";
|
|
import { useEffect, useState, Suspense } from "react";
|
|
import { Icons, DefaultIcon } from "./icons";
|
|
|
|
const AdminUserMenu = () => {
|
|
const [open, setOpen] = useState(false);
|
|
const logout = useLogout();
|
|
const checkLoginType = (ev: React.MouseEvent<HTMLDivElement>) => {
|
|
const loginType: LoginMethod = (localStorage.getItem("login_type") || "credentials") as LoginMethod;
|
|
if (loginType === "accessToken") {
|
|
ev.stopPropagation();
|
|
setOpen(true);
|
|
}
|
|
};
|
|
|
|
const handleConfirm = () => {
|
|
setOpen(false);
|
|
logout();
|
|
};
|
|
|
|
const handleDialogClose = () => {
|
|
setOpen(false);
|
|
localStorage.removeItem("access_token");
|
|
localStorage.removeItem("login_type");
|
|
window.location.reload();
|
|
};
|
|
|
|
return (
|
|
<UserMenu>
|
|
<div onClickCapture={checkLoginType}>
|
|
<Logout />
|
|
</div>
|
|
<Confirm
|
|
isOpen={open}
|
|
title="synapseadmin.auth.logout_acces_token_dialog.title"
|
|
content="synapseadmin.auth.logout_acces_token_dialog.content"
|
|
onConfirm={handleConfirm}
|
|
onClose={handleDialogClose}
|
|
confirm="synapseadmin.auth.logout_acces_token_dialog.confirm"
|
|
cancel="synapseadmin.auth.logout_acces_token_dialog.cancel"
|
|
/>
|
|
</UserMenu>
|
|
);
|
|
};
|
|
|
|
const AdminAppBar = () => <AppBar userMenu={<AdminUserMenu />} />;
|
|
|
|
const AdminMenu = (props) => {
|
|
const [menu, setMenu] = useState([]);
|
|
|
|
useEffect(() => {
|
|
const menuConfig = localStorage.getItem('menu');
|
|
if (menuConfig) {
|
|
setMenu(JSON.parse(menuConfig));
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<Menu {...props}>
|
|
<Menu.ResourceItems />
|
|
{menu.map((item, index) => {
|
|
const { url, icon, label } = item;
|
|
const IconComponent = Icons[icon] as React.ComponentType<any> | undefined;
|
|
|
|
return (
|
|
<Suspense key={index}>
|
|
<Menu.Item
|
|
to={url}
|
|
target="_blank"
|
|
primaryText={label}
|
|
leftIcon={IconComponent ? <IconComponent /> : <DefaultIcon />}
|
|
onClick={props.onMenuClick}
|
|
/>
|
|
</Suspense>
|
|
);
|
|
})}
|
|
</Menu>
|
|
);
|
|
};
|
|
|
|
export const AdminLayout = ({ children }) => (
|
|
<Layout appBar={AdminAppBar} menu={AdminMenu} sx={{
|
|
['& .RaLayout-appFrame']: {
|
|
minHeight: '90vh',
|
|
height: '90vh',
|
|
},
|
|
['& .RaLayout-content']: {
|
|
marginBottom: '3rem',
|
|
},
|
|
}}>
|
|
{children}
|
|
</Layout>
|
|
);
|