access request v2

appv2/src/UI/App.tsx

@@ -35,6 +35,7 @@ import { Browser } from "@capacitor/browser";
 import { LayerPickerBasic } from './Map/LayerPickerBasic';
 import { NewRecord } from './Map/Buttons/NewRecord';
 import NewRecordDialog from './Map/Buttons/NewRecordDialog';
+import AccessRequestPage from './Overlay/AccessRequest/AccessRequestPage';
 
 // URL listener so that the auth saga can redirect to the correct page
 const URL_LISTENER = (props) => {
@@ -147,11 +148,12 @@ const OverlayContentMemo = React.memo((props: any) => {
         path="/Batch/list/:id"
         render={(props) => <BatchView match={props.match as any} history={undefined} location={undefined} />}
       />
-      <Route path="/Batch/new" render={(props) => <BatchCreateNew />} />
-      <Route path="/Batch/templates" render={(props) => <BatchTemplates />} />
-      <Route path="/Reports" render={(props) => <EmbeddedReportsPage />} />
-      <Route path="/Training" render={(props) => <TrainingPage />} />
-      <Route path="/Legend" render={(props) => <LegendsPopup />} />
+      <Route path="/Batch/new" render={(props) => <BatchCreateNew/>}/>
+      <Route path="/Batch/templates" render={(props) => <BatchTemplates/>}/>
+      <Route path="/Reports" render={(props) => <EmbeddedReportsPage/>}/>
+      <Route path="/Training" render={(props) => <TrainingPage/>}/>
+      <Route path="/Legend" render={(props) => <LegendsPopup/>}/>
+      <Route path="/AccessRequest" render={(props) => <AccessRequestPage/>}/>
       <ThemeProvider theme={theme}>
         <Route path="/Admin" render={(props) => <UserAccessPage />} />
       </ThemeProvider>

appv2/src/UI/Header/Header.tsx

@@ -2,7 +2,7 @@ import VpnKeyIcon from '@mui/icons-material/VpnKey';
 import LogoutIcon from '@mui/icons-material/Logout';
 import React, { useCallback, useEffect, useRef } from 'react';
 import './Header.css';
-import { IconButton } from '@mui/material';
+import { Avatar, Box, IconButton, ListItemIcon, Menu, MenuItem } from '@mui/material';
 import { useDispatch, useSelector } from 'react-redux';
 import { AUTH_SIGNIN_REQUEST, AUTH_SIGNOUT_REQUEST, TOGGLE_PANEL } from 'state/actions';
 import { Route, useHistory } from 'react-router';
@@ -116,34 +116,24 @@ const ButtonWrapper = (props: any) => {
 const LoginButton = () => {
   const dispatch = useDispatch();
   return (
-    <div className="LoginButton">
-      <IconButton
-        onClick={() => {
-          dispatch({ type: AUTH_SIGNIN_REQUEST });
-        }}
-        size="large"
-        color="inherit"
-        aria-label="login">
+    <MenuItem onClick={() => { dispatch({ type: AUTH_SIGNIN_REQUEST }); }}>
+      <ListItemIcon>
         <VpnKeyIcon />
-      </IconButton>
-    </div>
+      </ListItemIcon>
+      Login
+    </MenuItem>
   );
 };
 
 const LogoutButton = () => {
   const dispatch = useDispatch();
   return (
-    <div className="LogoutButton">
-      <IconButton
-        onClick={() => {
-          dispatch({ type: AUTH_SIGNOUT_REQUEST });
-        }}
-        size="large"
-        color="inherit"
-        aria-label="logout">
+    <MenuItem onClick={() => { dispatch({ type: AUTH_SIGNOUT_REQUEST }); }}>
+      <ListItemIcon>
         <LogoutIcon />
-      </IconButton>
-    </div>
+      </ListItemIcon>
+      Logout
+    </MenuItem>
   );
 };
 
@@ -212,8 +202,81 @@ const AdminPanelMemo = React.memo((props) => {
 });
 
 const LoginOrOutMemo = React.memo((props) => {
+  const dispatch = useDispatch();
+  const history = useHistory();
   const authenticated = useSelector((state: any) => state?.Auth?.authenticated);
-  return <>{authenticated ? <LogoutButton /> : <LoginButton />}</>;
+  const activated = useSelector((state: any) => state?.UserInfo?.activated);
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const openMenu = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+    // setOpen(false);
+    console.log("closing");
+  };
+
+  const navToUpdateRequest = () => {
+    history.push({
+      pathname: '/AccessRequest',
+      state: {
+        updateInfo: true
+      }
+    });
+    dispatch({
+      type: TOGGLE_PANEL,
+      payload: { panelOpen: true, fullScreen: true }
+    });
+  }
+
+  const requestAccess = async () => {
+    if (!authenticated) {
+      dispatch({ type: AUTH_SIGNIN_REQUEST });
+    } else {
+      history.push('/AccessRequest');
+      dispatch({
+        type: TOGGLE_PANEL,
+        payload: { panelOpen: true, fullScreen: true }
+      });
+    }
+  };
+
+  return <Box sx={{ flexGrow: 0, float: 'right', marginRight: '1rem' }}>
+    <IconButton onClick={handleClick} size="small">
+      <Avatar></Avatar>
+    </IconButton>
+    <Menu
+      anchorEl={anchorEl}
+      open={openMenu}
+      onClose={handleClose}
+      PaperProps={{
+        elevation: 3
+      }}
+      transformOrigin={{ horizontal: 'right', vertical: 'top' }}>
+        {activated &&
+        <MenuItem onClick={navToUpdateRequest}>
+          <ListItemIcon>
+            <AssignmentIcon />
+          </ListItemIcon>
+          Update My Info
+        </MenuItem>
+        }
+        {!activated &&
+          <MenuItem onClick={requestAccess}>
+            <ListItemIcon>
+              <AssignmentIcon />
+            </ListItemIcon>
+            Request Access
+          </MenuItem>
+        }
+        {authenticated ? (
+          <LogoutButton />
+        ) : (
+          <LoginButton />
+        )}
+    </Menu>
+  </Box>;
 });