Add user icon to app bar

interface/src/components/MenuAppBar.js

@@ -10,12 +10,16 @@ import Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
 import Hidden from '@material-ui/core/Hidden';
 import Divider from '@material-ui/core/Divider';
+import Grow from '@material-ui/core/Grow';
+import MenuItem from '@material-ui/core/MenuItem';
+import MenuList from '@material-ui/core/MenuList';
 
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 
+import Popper from '@material-ui/core/Popper';
 import MenuIcon from '@material-ui/icons/Menu';
 import WifiIcon from '@material-ui/icons/Wifi';
 import SystemUpdateIcon from '@material-ui/icons/SystemUpdate';
@@ -24,6 +28,10 @@ import AccountCircleIcon from '@material-ui/icons/AccountCircle';
 import SettingsInputAntennaIcon from '@material-ui/icons/SettingsInputAntenna';
 import LockIcon from '@material-ui/icons/Lock';
 
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+
+import Paper from '@material-ui/core/Paper';
+
 import { APP_NAME } from '../constants/App';
 import { withAuthenticationContext } from '../authentication/Context.js';
 
@@ -31,72 +39,69 @@ const drawerWidth = 290;
 
 const styles = theme => ({
   root: {
-    zIndex: 1,
-    width: '100%',
-    height: '100%',
-  },
-  toolbar: {
-    paddingLeft: theme.spacing.unit,
-    paddingRight:  theme.spacing.unit,
-    [theme.breakpoints.up('md')]: {
-      paddingLeft: theme.spacing.unit * 3,
-      paddingRight: theme.spacing.unit  * 3,
-    }
-  },
-  appFrame: {
-    position: 'relative',
     display: 'flex',
-    width: '100%',
+  },
-    height: '100%',
+  drawer: {
+    [theme.breakpoints.up('md')]: {
+      width: drawerWidth,
+      flexShrink: 0,
+    },
+  },
+  title: {
+    flexGrow: 1
   },
   appBar: {
-    position: 'absolute',
     marginLeft: drawerWidth,
     [theme.breakpoints.up('md')]: {
       width: `calc(100% - ${drawerWidth}px)`,
     },
   },
-  navIconHide: {
+  menuButton: {
+    marginRight: theme.spacing(2),
     [theme.breakpoints.up('md')]: {
       display: 'none',
     },
   },
+  toolbar: theme.mixins.toolbar,
   drawerPaper: {
     width: drawerWidth,
-    height: '100%',
-    [theme.breakpoints.up('md')]: {
-      width: drawerWidth,
-      position:'fixed',
-      left:0,
-      top:0,
-      overflow:'auto'
-    },
   },
   content: {
-    backgroundColor: theme.palette.background.default,
+    flexGrow: 1,
-    width:"100%",
+    padding: theme.spacing(),
-    marginTop: 56,
-    [theme.breakpoints.up('md')]: {
-      paddingLeft: drawerWidth
-    },
-    [theme.breakpoints.up('sm')]: {
-      height: 'calc(100% - 64px)',
-      marginTop: 64,
-    },
   },
+  popper: {
+    zIndex: 3300
+  }
 });
 
 class MenuAppBar extends React.Component {
   state = {
     mobileOpen: false,
+    authMenuOpen: false
   };
 
+  anchorRef = React.createRef();
+
+  handleToggle = () => {
+    this.setState({ authMenuOpen: !this.state.authMenuOpen });
+  }
+
+  handleClose = (event) => {
+    if (this.anchorRef.current && this.anchorRef.current.contains(event.target)) {
+      return;
+    }
+
+    this.setState({ authMenuOpen: false });
+  }
+
   handleDrawerToggle = () => {
     this.setState({ mobileOpen: !this.state.mobileOpen });
   };
 
   render() {
     const { classes, theme, children, sectionTitle, authenticationContext } = this.props;
+    const { mobileOpen, authMenuOpen } = this.state;
 
     const drawer = (
       <div>
@@ -138,46 +143,72 @@ class MenuAppBar extends React.Component {
             </ListItemIcon>
             <ListItemText primary="Security" />
           </ListItem>
-          <Divider />
-          <ListItem button onClick={authenticationContext.signOut}>
-            <ListItemIcon>
-              <AccountCircleIcon />
-            </ListItemIcon>
-            <ListItemText primary="Sign Out" secondary={"Signed in as: "+ authenticationContext.jwt.username} />
-          </ListItem>
         </List>
       </div>
     );
 
     return (
       <div className={classes.root}>
-        <div className={classes.appFrame}>
+        <AppBar position="fixed" className={classes.appBar}>
-          <AppBar className={classes.appBar}>
+          <Toolbar>
-            <Toolbar className={classes.toolbar} disableGutters={true}>
             <IconButton
               color="inherit"
-                aria-label="open drawer"
+              aria-label="Open drawer"
+              edge="start"
               onClick={this.handleDrawerToggle}
-                className={classes.navIconHide}
+              className={classes.menuButton}
             >
               <MenuIcon />
             </IconButton>
-              <Typography variant="h6" color="inherit" noWrap>
+            <Typography variant="h6" color="inherit" noWrap className={classes.title}>
               {sectionTitle}
             </Typography>
+            <div>
+              <IconButton
+                ref={this.anchorRef}
+                aria-owns={authMenuOpen ? 'menu-list-grow' : undefined}
+                aria-haspopup="true"
+                onClick={this.handleToggle}
+                color="inherit"
+              >
+                <AccountCircleIcon />
+              </IconButton>
+              <Popper open={authMenuOpen} anchorEl={this.anchorRef.current} transition disablePortal>
+                {({ TransitionProps, placement }) => (
+                  <Grow
+                    {...TransitionProps}
+                    style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
+                  >
+                    <Paper id="menu-list-grow">
+                      <ClickAwayListener onClickAway={this.handleClose}>
+                        <MenuList>
+                          <MenuItem button onClick={authenticationContext.signOut}>
+                            <ListItemIcon>
+                              <AccountCircleIcon />
+                            </ListItemIcon>
+                            <ListItemText primary="Sign Out" secondary={"Signed in as: " + authenticationContext.jwt.username} />
+                          </MenuItem>
+                        </MenuList>
+                      </ClickAwayListener>
+                    </Paper>
+                  </Grow>
+                )}
+              </Popper>
+            </div>
           </Toolbar>
         </AppBar>
-          <Hidden mdUp>
+        <nav className={classes.drawer}>
+          <Hidden mdUp implementation="css">
             <Drawer
               variant="temporary"
               anchor={theme.direction === 'rtl' ? 'right' : 'left'}
-              open={this.state.mobileOpen}
+              open={mobileOpen}
+              onClose={this.handleDrawerToggle}
               classes={{
                 paper: classes.drawerPaper,
               }}
-              onClose={this.handleDrawerToggle}
               ModalProps={{
-                keepMounted: true, // Better open performance on mobile.
+                keepMounted: true,
               }}
             >
               {drawer}
@@ -185,20 +216,21 @@ class MenuAppBar extends React.Component {
           </Hidden>
           <Hidden smDown implementation="css">
             <Drawer
-              variant="permanent"
-              open
               classes={{
                 paper: classes.drawerPaper,
               }}
+              variant="permanent"
+              open
             >
               {drawer}
             </Drawer>
           </Hidden>
+        </nav>
         <main className={classes.content}>
+          <div className={classes.toolbar} />
           {children}
         </main>
       </div>
-      </div>
     );
   }
 }

interface/src/forms/ManageUsersForm.js

@@ -239,7 +239,7 @@ class ManageUsersForm extends React.Component {
 }
 
 ManageUsersForm.propTypes = {
-  authenticationContex: PropTypes.object.isRequired,
+  authenticationContext: PropTypes.object.isRequired,
   classes: PropTypes.object.isRequired,
   userData: PropTypes.object,
   userDataFetched: PropTypes.bool.isRequired,

interface/src/forms/UserForm.js

@@ -45,7 +45,7 @@ class UserForm extends React.Component {
       <ValidatorForm onSubmit={onDoneEditing} ref={this.formRef}>
         <Dialog onClose={onCancelEditing} aria-labelledby="user-form-dialog-title" open={true} scroll="paper">
           <DialogTitle id="user-form-dialog-title">{creating ? 'Create' : 'Modify'} User</DialogTitle>
-          <DialogContent>
+          <DialogContent dividers={true}>
             <TextValidator
               validators={creating ? ['required', 'uniqueUsername', 'matchRegexp:^[a-zA-Z0-9_\\.]{1,24}$'] : []}
               errorMessages={creating ? ['Username is required', "That username already exists", "Must be 1-24 characters: alpha numberic, '_' or '.'"] : []}