Shubham | Add header layout

2020-05-17 15:10:04 +05:30
parent 3e61650d96
commit 029dd7e3f2
1 changed files with 150 additions and 0 deletions
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -0,0 +1,150 @@
+import * as React from 'react';
+import {createStyles, makeStyles, Theme} from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+import Switch from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
+import MenuItem from '@material-ui/core/MenuItem';
+import Menu from '@material-ui/core/Menu';
+import {Button, ListItem} from '@material-ui/core';
+import {Link} from "react-router-dom";
+import {useOktaAuth} from "@okta/okta-react";
+
+
+const useStyles = makeStyles((theme: Theme) => createStyles({
+    root: {
+        flexGrow: 1,
+    },
+    menuButton: {
+        marginRight: theme.spacing(2),
+    },
+    title: {
+        flexGrow: 1,
+    },
+}));
+
+export default function MenuAppBar(props:any) {
+    const classes = useStyles();
+    const [auth, setAuth] = React.useState(true);
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const open = Boolean(anchorEl);
+    const [anchorEl1, setAnchorEl1] = React.useState<null | HTMLElement>(null);
+    const open1 = Boolean(anchorEl1);
+    const {authState, authService} = useOktaAuth();
+
+    const issuer= 'https://navi-2020.okta.com';
+    const redirectUri= window.location.origin+'/logged_out';
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setAuth(event.target.checked);
+    };
+
+    const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+        setAnchorEl1(null);
+    };
+    const handleLogin = () => {
+        authService.login('/dashboard');
+        handleClose();
+    }
+    const handleLogout = async () => {
+        const idToken = authState.idToken;
+        await authService.logout('/dashboard');
+        window.location.href = `${issuer}/oauth2/v1/logout?id_token_hint=${idToken}`;
+
+    }
+
+    return (
+        <div className={classes.root}>
+
+            <AppBar position="static">
+                <Toolbar>
+
+                      {authState.isAuthenticated ?
+                          <div>
+                        <IconButton
+                            edge="start"
+                            className={classes.menuButton}
+                            color="inherit"
+                            onClick={(e) => setAnchorEl1(e.currentTarget)}
+                            aria-label="menu"
+                        >
+                            <MenuIcon aria-controls="simple-menu"/>
+                        </IconButton>
+
+                            <Menu
+                                id="simple-menu"
+                                keepMounted
+                                aria-haspopup="true"
+                                anchorEl={anchorEl1}
+                                open={Boolean(anchorEl1)}
+                                anchorOrigin={{
+                                    vertical: 'top',
+                                    horizontal: 'left',
+                                }}
+                                transformOrigin={{
+                                    vertical: 'top',
+                                    horizontal: 'right',
+                                }}
+                                onClose={handleClose}
+                            >
+
+                                <MenuItem component={Link} onClick={handleClose} to="/">Home</MenuItem>
+                                <MenuItem component={Link} onClick={handleClose} to="/manifests">Show</MenuItem>
+                                <MenuItem component={Link} onClick={handleClose}
+                                          to="/manifests/create">Create</MenuItem>
+
+                            </Menu> </div>: null}
+
+                    <Typography variant="h6" className={classes.title}>
+                        {props.name}
+                    </Typography>
+                    {auth && (
+                        <div>
+                            <IconButton
+                                aria-label="account of current user"
+                                aria-controls="menu-appbar"
+                                aria-haspopup="true"
+                                onClick={handleMenu}
+                                color="inherit"
+                            >
+                                <AccountCircle/>
+                            </IconButton>
+                            <Menu
+                                id="menu-appbar"
+                                anchorEl={anchorEl}
+                                anchorOrigin={{
+                                    vertical: 'top',
+                                    horizontal: 'right',
+                                }}
+                                keepMounted
+                                transformOrigin={{
+                                    vertical: 'top',
+                                    horizontal: 'right',
+                                }}
+                                open={open}
+                                onClose={handleClose}
+                            >
+                              {authState.isAuthenticated ?<MenuItem onClick={handleClose}>Profile</MenuItem>:null}
+                                {authState.isAuthenticated ?<MenuItem onClick={handleClose}>My account</MenuItem>:null}
+                                {authState.isAuthenticated ?<MenuItem component={Link} onClick={handleClose} to="/admin">Admin</MenuItem>:null}
+                                {authState.isAuthenticated ?<MenuItem  onClick={handleLogout}>Logout</MenuItem>:null}
+
+                              {authState.isAuthenticated?null:<MenuItem  onClick={handleLogin}>Login</MenuItem>}
+
+                            </Menu>
+                        </div>
+                    )}
+                </Toolbar>
+            </AppBar>
+        </div>
+    );
+}