Add search functionality for use-permission-search and link it to the user profile

backend/controllers/user.controller.js

@@ -26,6 +26,23 @@ UserController.user_list = async function (req, res) {
   }
 };
 
+// Get list of Users with accessLevel 'admin' or 'superadmin' with GET
+UserController.admin_list = async function (req, res) {
+  const { headers } = req;
+
+  if (headers['x-customrequired-header'] !== expectedHeader) {
+    return res.sendStatus(403);
+  }
+
+  try {
+    const admins = await User.find({ accessLevel: { $in: ["admin", "superadmin"] } });
+    return res.status(200).send(admins);
+  } catch (err) {
+    return res.sendStatus(400);
+  }
+};
+
+
 // Get User by id with GET
 UserController.user_by_id = async function (req, res) {
   const { headers } = req;

backend/routers/users.router.js

@@ -6,6 +6,8 @@ const { UserController } = require('../controllers');
 // The base is /api/users
 router.get('/', UserController.user_list);
 
+router.get('/admins', UserController.admin_list);
+
 router.post('/', UserController.create);
 
 router.get('/:UserId', UserController.user_by_id);

client/src/App.jsx

@@ -18,13 +18,15 @@ import HandleAuth from './components/auth/HandleAuth';
 import EmailSent from './pages/EmailSent';
 import Events from './pages/Events';
 import ProjectLeaderDashboard from './pages/ProjectLeaderDashboard';
+import Users from './pages/Users';
 import UserAdmin from './pages/UserAdmin';
 import ProjectList from './pages/ProjectList';
 import ManageProjects from './pages/ManageProjects';
 import addProject from './components/manageProjects/addProject';
 import HealthCheck from './pages/HealthCheck';
 import SecretPassword from './pages/SecretPassword';
 import UserWelcome from './pages/UserWelcome';
+import UserPermission from './pages/UserPermission';
 
 import { ThemeProvider } from '@mui/material';
 import theme from './theme';
@@ -46,9 +48,16 @@ const routes = [
   { path: '/handleauth', name: 'handleauth', Component: HandleAuth },
   { path: '/emailsent', name: 'emailsent', Component: EmailSent },
   { path: '/events', name: 'events', Component: Events },
-  { path: '/useradmin', name: 'useradmin', Component: UserAdmin },
+  { path: '/users', name: 'users', Component: Users },
+
+  { path: '/users/user-search', name: 'useradmin', Component: UserAdmin },
+  {
+    path: '/users/permission-search',
+    name: 'useradmin',
+    Component: UserPermission,
+  },
   { path: '/projects', name: 'projects', Component: ProjectList },
-  { path: '/projects/create', name: 'projectform', Component:  addProject},
+  { path: '/projects/create', name: 'projectform', Component: addProject },
   {
     path: '/projects/:projectId',
     name: 'project',

client/src/components/Navbar.jsx

@@ -61,7 +61,7 @@ const Navbar = (props) => {
           {/* Admin auth -> Displays 2 links -> 'Users' and 'Projects'. */}
           {auth?.user?.accessLevel === 'admin' && (
             <>
-              <StyledButton component={NavLink} to="/useradmin">
+              <StyledButton component={NavLink} to="/users">
                 USERS
               </StyledButton>
               <StyledButton component={NavLink} to="/projects">

client/src/components/user-admin/UserManagement.jsx

@@ -1,13 +1,21 @@
 import React, { useState } from 'react';
-import {Box, Button, ButtonGroup, TextField, Typography, List, ListItem, ListItemButton} from '@mui/material';
-
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  TextField,
+  Typography,
+  List,
+  ListItem,
+  ListItemButton,
+} from '@mui/material';
 
 import '../../sass/UserAdmin.scss';
 
 const Buttonsx = {
   px: 2,
   py: 0.5,
-}
+};
 
 const UserManagement = ({ users, setUserToEdit }) => {
   let searchResults = [];
@@ -50,97 +58,96 @@ const UserManagement = ({ users, setUserToEdit }) => {
             );
   }
   return (
-    <Box className="container--usermanagement" sx={{px: '1.8rem', mb: 0,}}>
-      <Box sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        pt: 5,
-        height: '100%',
-        width: 1/1,
-      }}>
-        <Typography variant='h1'>User Management</Typography>
-
+    <Box className="container--usermanagement" sx={{ px: '1.8rem', mb: 0 }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          pt: 5,
+          height: '100%',
+          width: 1 / 1,
+        }}
+      >
+        <Typography variant="h1">User Search</Typography>
+
         <Box className="tab-buttons">
-          <ButtonGroup sx={{
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'center',
-            whiteSpace: 'nowrap',
-            mx: 1,
-            }}>
-              <Button
-                sx={Buttonsx}
-                type="button"
-                variant={
-                  searchResultType === 'name'
-                  ? 'contained'
-                  : 'secondary'
-                }
-                onClick={buttonSwap}
-              >
-                Results by Name
-              </Button>
-              <Button
-                sx={Buttonsx}
-                type="button"
-                variant={
-                  searchResultType === 'email'
-                  ? 'contained'
-                  : 'secondary'
-                }
-                onClick={buttonSwap}
-              >
-                Results by Email
-              </Button>
+          <ButtonGroup
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              justifyContent: 'center',
+              whiteSpace: 'nowrap',
+              mx: 1,
+            }}
+          >
+            <Button
+              sx={Buttonsx}
+              type="button"
+              variant={searchResultType === 'name' ? 'contained' : 'secondary'}
+              onClick={buttonSwap}
+            >
+              Results by Name
+            </Button>
+            <Button
+              sx={Buttonsx}
+              type="button"
+              variant={searchResultType === 'email' ? 'contained' : 'secondary'}
+              onClick={buttonSwap}
+            >
+              Results by Email
+            </Button>
           </ButtonGroup>
         </Box>
         <TextField
           type="text"
           placeholder="Enter name and / or email to find a user."
-          variant='standard'
+          variant="standard"
           value={searchTerm}
           onChange={handleChange}
         />
-        <Box sx={{ 
-          bgcolor: searchResults.length>0? '#F5F5F5': 'transparent',
-          my: 1.2,
-          borderRadius: 1,
-          flexGrow: 1,
-          width: 1/1,
-          }}>
+        <Box
+          sx={{
+            bgcolor: searchResults.length > 0 ? '#F5F5F5' : 'transparent',
+            my: 1.2,
+            borderRadius: 1,
+            flexGrow: 1,
+            width: 1 / 1,
+          }}
+        >
           <Box>
-              <List className="search-results disablePadding">
-                {searchResults.map((u) => {
-                  return (
-                    // eslint-disable-next-line no-underscore-dangle
-                    <ListItem
+            <List className="search-results disablePadding">
+              {searchResults.map((u) => {
+                return (
+                  // eslint-disable-next-line no-underscore-dangle
+                  <ListItem
                     sx={{
                       px: 2.4,
                       py: 1,
                       borderBottom: 1.6,
                       borderBottomColor: 'grey.300',
-                    }} 
-                      key={`result_${u._id}`}>
-                      <ListItemButton
-                        sx={{
-                          px: 0.25,
-                          py: 0.36,
-                          color: 'primary.main',
-                          mx: 0.16,
-                        }}
-                        className="search-results-button"
-                        type="button"
-                        onClick={() => setUserToEdit(u)}
-                      >
-                        {searchResultType === 'name'
-                          ? `${u.name?.firstName} ${u.name?.lastName} ( ${u.email} )`
-                          : `${u.email} ( ${u.name?.firstName} ${u.name?.lastName} )`}
-                      </ListItemButton>
-                    </ListItem>
-                  );
-                })}
-              </List>
+                    }}
+                    key={`result_${u._id}`}
+                  >
+                    <ListItemButton
+                      sx={{
+                        px: 0.25,
+                        py: 0.36,
+                        color: 'primary.main',
+                        mx: 0.16,
+                      }}
+                      className="search-results-button"
+                      type="button"
+                      onClick={() => setUserToEdit(u)}
+                    >
+                      {searchResultType === 'name'
+                        ? `${u.name?.firstName} ${u.name?.lastName} ( ${u.email} )`
+                        : `${u.email} ( ${u.name?.firstName} ${u.name?.lastName} )`}
+                    </ListItemButton>
+                  </ListItem>
+                );
+              })}
+            </List>
           </Box>
         </Box>
         <Box>