Disable admin toggling for self as admin or superadmin

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

@@ -16,8 +16,9 @@ import {
   InputLabel,
 } from '@mui/material';
 import '../../sass/UserAdmin.scss';
+import useAuth from '../../hooks/useAuth';
+
 
-// child of UserAdmin. Displays form to update users.
 const EditUsers = ({
   userToEdit,
   backToSearch,
@@ -30,6 +31,7 @@ const EditUsers = ({
   const [projectValue, setProjectValue] = useState(''); // State and handler for form in EditUsers
   const [isActive, setIsActive] = useState(userToEdit.isActive);
   const [isAdmin, setIsAdmin] = useState(userToEdit.accessLevel === 'admin');
+  const { auth } = useAuth();
 
   // Boolean to check if the current user is the super admin
   const isSuperAdmin = userToEdit.accessLevel === 'superadmin';
@@ -47,8 +49,6 @@ const EditUsers = ({
     setUserManagedProjects(userToEdit.managedProjects);
   }, [userToEdit]);
 
-  console.log(userManagedProjects)
-
   const userProjectsToDisplay = activeProjects.filter((item) =>
     userProjects.includes(item[0])
   );
@@ -64,7 +64,6 @@ const EditUsers = ({
     ) {
       const newProjects = [...userManagedProjects, projectValue];
       updateUserDb(userToEdit, projectValue, 'add');
-      // updateUserDb(userToEdit, newProjects);
       setUserManagedProjects(newProjects);
       setProjectValue('');
     } else {
@@ -78,7 +77,6 @@ const EditUsers = ({
         (p) => p !== projectToRemove
       );
       updateUserDb(userToEdit, projectToRemove, 'remove');
-      // updateUserDb(userToEdit, newProjects);
       setUserManagedProjects(newProjects);
     }
   };
@@ -128,7 +126,8 @@ const EditUsers = ({
             <Switch
               checked={isAdmin || isSuperAdmin}
               onChange={handleSetAccessLevel}
-              disabled={isSuperAdmin}
+              disabled={isSuperAdmin || userToEdit._id === auth?.user._id}
+              sx={{ cursor: (isSuperAdmin || userToEdit._id === auth?.user._id) ? "not-allowed" : "pointer" }}
             />
           }
           label={isAdmin || isSuperAdmin ? 'Yes' : 'No'}

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

@@ -9,7 +9,8 @@ import {
   ListItem,
   ListItemButton,
 } from '@mui/material';
-
+import useAuth from '../../hooks/useAuth';
+import PersonIcon from '@mui/icons-material/Person';
 import '../../sass/UserAdmin.scss';
 
 const Buttonsx = {
@@ -21,6 +22,7 @@ const UserManagement = ({ users, setUserToEdit }) => {
   let searchResults = [];
   const [searchResultType, setSearchResultType] = useState('name'); // Which results will diplay
   const [searchTerm, setSearchTerm] = useState(''); // Serch term for the user/email search
+  const { auth } = useAuth();
 
   // Swaps the buttons and displayed panels for the search results, by email or by name
   const buttonSwap = () =>
@@ -141,8 +143,8 @@ const UserManagement = ({ users, setUserToEdit }) => {
                       onClick={() => setUserToEdit(u)}
                     >
                       {searchResultType === 'name'
-                        ? `${u.name?.firstName} ${u.name?.lastName} ( ${u.email} )`
-                        : `${u.email} ( ${u.name?.firstName} ${u.name?.lastName} )`}
+                        ?  (u._id === auth.user._id) ? (<><PersonIcon /><b>{u.name?.firstName} {u.name?.lastName} ( {u.email} )</b></>) : `${u.name?.firstName} ${u.name?.lastName} ( ${u.email} )`
+                        :  (u._id === auth.user._id) ? (<><PersonIcon /><b>{u.email} ( {u.name?.firstName} {u.name?.lastName} )</b></>) : `${u.email} ( ${u.name?.firstName} ${u.name?.lastName} )`}
                     </ListItemButton>
                   </ListItem>
                 );

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

@@ -11,7 +11,8 @@ import {
   ListItemButton,
 } from '@mui/material';
 import { useLocation } from 'react-router-dom';
-
+import useAuth from '../../hooks/useAuth';
+import PersonIcon from '@mui/icons-material/Person';
 import '../../sass/UserAdmin.scss';
 
 const Buttonsx = {
@@ -20,6 +21,7 @@ const Buttonsx = {
 };
 
 const DummyComponent = ({ data, isProjectLead, setUserToEdit }) => {
+  const { auth } = useAuth();
   return (
     <List className="search-results disablePadding">
       {data.map((u, idx) => {
@@ -50,7 +52,9 @@ const DummyComponent = ({ data, isProjectLead, setUserToEdit }) => {
               <Grid container>
                 <Grid item>
                   <Typography style={{ fontWeight: 600 }}>
-                    {`${name.firstName.toUpperCase()} ${name.lastName.toUpperCase()} ( ${email.toUpperCase()} )`}
+                    {(_id === auth?.user?._id) ? 
+                      (<><PersonIcon /><b>{`${name.firstName.toUpperCase()} ${name.lastName.toUpperCase()} ( ${email.toUpperCase()} )`}</b></>) 
+                      : `${name.firstName.toUpperCase()} ${name.lastName.toUpperCase()} ( ${email.toUpperCase()} )`}
                   </Typography>
                 </Grid>
               </Grid>
@@ -81,13 +85,13 @@ const DummyComponent = ({ data, isProjectLead, setUserToEdit }) => {
               <Grid container justifyContent={'space-between'}>
                 <Grid item>
                   <Typography style={{ fontWeight: 600 }}>
-                    {name.firstName.toUpperCase() +
-                      ' ' +
-                      name.lastName.toUpperCase()}
+                      {(_id === auth?.user?._id) ? 
+                      (<><PersonIcon /><b>{`${name.firstName.toUpperCase()} ${name.lastName.toUpperCase()}`}</b></>) :
+                      `${name.firstName.toUpperCase()} ${name.lastName.toUpperCase()}`}
                   </Typography>
                 </Grid>
                 <Grid item>
-                  <Typography style={{ fontWeight: 600 }} color="black">
+                  <Typography style={{ fontWeight: (_id === auth?.user?._id) ? 'bold' : 600 }}>
                     {u.managedProjectName}
                   </Typography>
                 </Grid>