109 lines
3.2 KiB
TypeScript
109 lines
3.2 KiB
TypeScript
// This file is part of Moonfire NVR, a security camera network video recorder.
|
|
// Copyright (C) 2021 The Moonfire NVR Authors; see AUTHORS and LICENSE.txt.
|
|
// SPDX-License-Identifier: GPL-v3.0-or-later WITH GPL-3.0-linking-exception
|
|
|
|
import AppBar from "@material-ui/core/AppBar";
|
|
import Button from "@material-ui/core/Button";
|
|
import IconButton from "@material-ui/core/IconButton";
|
|
import Menu from "@material-ui/core/Menu";
|
|
import MenuItem from "@material-ui/core/MenuItem";
|
|
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
|
|
import Toolbar from "@material-ui/core/Toolbar";
|
|
import Typography from "@material-ui/core/Typography";
|
|
import AccountCircle from "@material-ui/icons/AccountCircle";
|
|
import MenuIcon from "@material-ui/icons/Menu";
|
|
import React from "react";
|
|
import { Session } from "./types";
|
|
|
|
const useStyles = makeStyles((theme: Theme) =>
|
|
createStyles({
|
|
title: {
|
|
flexGrow: 1,
|
|
},
|
|
})
|
|
);
|
|
|
|
interface Props {
|
|
session: Session | null;
|
|
setSession: (session: Session | null) => void;
|
|
requestLogin: () => void;
|
|
logout: () => void;
|
|
}
|
|
|
|
// https://material-ui.com/components/app-bar/
|
|
function MoonfireMenu(props: Props) {
|
|
const classes = useStyles();
|
|
const auth = props.session !== null;
|
|
const [
|
|
accountMenuAnchor,
|
|
setAccountMenuAnchor,
|
|
] = React.useState<null | HTMLElement>(null);
|
|
|
|
const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
|
|
setAccountMenuAnchor(event.currentTarget);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
console.log("handleAccountMenuClose");
|
|
setAccountMenuAnchor(null);
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
// Note this close should happen before `auth` toggles, or material-ui will
|
|
// be unhappy about the anchor element not being part of the layout.
|
|
handleClose();
|
|
props.logout();
|
|
};
|
|
|
|
return (
|
|
<AppBar position="static">
|
|
<Toolbar variant="dense">
|
|
<IconButton edge="start" color="inherit" aria-label="menu">
|
|
<MenuIcon />
|
|
</IconButton>
|
|
<Typography variant="h6" className={classes.title}>
|
|
Moonfire NVR
|
|
</Typography>
|
|
{auth || (
|
|
<Button color="inherit" onClick={props.requestLogin}>
|
|
Log in
|
|
</Button>
|
|
)}
|
|
{auth && (
|
|
<div>
|
|
<IconButton
|
|
aria-label="account of current user"
|
|
aria-controls="primary-search-account-menu"
|
|
aria-haspopup="true"
|
|
onClick={handleMenu}
|
|
color="inherit"
|
|
size="small"
|
|
>
|
|
<AccountCircle />
|
|
</IconButton>
|
|
<Menu
|
|
anchorEl={accountMenuAnchor}
|
|
getContentAnchorEl={null}
|
|
keepMounted
|
|
anchorOrigin={{
|
|
vertical: "bottom",
|
|
horizontal: "right",
|
|
}}
|
|
transformOrigin={{
|
|
vertical: "top",
|
|
horizontal: "right",
|
|
}}
|
|
open={Boolean(accountMenuAnchor)}
|
|
onClose={handleClose}
|
|
>
|
|
<MenuItem onClick={handleLogout}>Logout</MenuItem>
|
|
</Menu>
|
|
</div>
|
|
)}
|
|
</Toolbar>
|
|
</AppBar>
|
|
);
|
|
}
|
|
|
|
export default MoonfireMenu;
|