Added Super User Functionality

backend/models/user.model.js

@@ -11,7 +11,7 @@ const userSchema = mongoose.Schema({
  email: { type: String, unique: true },
  accessLevel: { 
  type: String, 
- enum: ["user", "admin"], // restricts values to "user" and "admin"
+ enum: ["user", "admin", "superadmin"], // restricts values to "user", "admin" and "superadmin"
  default: "user" 
  },
  createdDate: { type: Date, default: Date.now },

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import '../../sass/UserAdmin.scss';
-import { FormGroup, FormControlLabel, Switch } from '@mui/material'
+import { FormGroup, FormControlLabel, Switch } from '@mui/material';
 
 // child of UserAdmin. Displays form to update users.
 const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects, updateUserActiveStatus, updateUserAccessLevel }) => {
@@ -9,6 +9,9 @@ const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects, updateUse
  const [isActive, setIsActive] = useState(userToEdit.isActive);
  const [isAdmin, setIsAdmin] = useState(userToEdit.accessLevel === "admin");
 
+ // Function to check if the current user is the super admin
+ const isSuperAdmin = userToEdit.accessLevel === "superadmin";
+
  // Prepare data for display
  const userName = `${userToEdit.name?.firstName} ${userToEdit.name?.lastName}`;
  const userEmail = userToEdit.email;
@@ -18,7 +21,6 @@ const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects, updateUse
  const activeProjects = Object.values(projects)
  .filter((project) => project.projectStatus === 'Active')
  .sort((a, b) => a.name?.localeCompare(b.name))
- // eslint-disable-next-line no-underscore-dangle
  .map((p) => [p._id, p.name]);
 
  // add user projects to state
@@ -35,11 +37,7 @@ const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects, updateUse
  const onSubmit = (event) => {
  event.preventDefault();
 
- if (
- projectValue.length > 0 &&
- projectValue !== 'default' &&
- !userManagedProjects.includes(projectValue)
- ) {
+ if (!isSuperAdmin && projectValue.length > 0 && projectValue !== 'default' && !userManagedProjects.includes(projectValue)) {
  const newProjects = [...userManagedProjects, projectValue];
  updateUserDb(userToEdit, newProjects);
  setUserManagedProjects(newProjects);
@@ -51,24 +49,26 @@ const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects, updateUse
 
  // Remove projects from db
  const handleRemoveProject = (projectToRemove) => {
- if (userManagedProjects.length > 0) {
- const newProjects = userManagedProjects.filter(
- (p) => p !== projectToRemove
- );
+ if (!isSuperAdmin && userManagedProjects.length > 0) {
+ const newProjects = userManagedProjects.filter((p) => p !== projectToRemove);
  updateUserDb(userToEdit, newProjects);
  setUserManagedProjects(newProjects);
  }
  };
 
  const handleSetIsActive = () => {
- setIsActive(!isActive)
- updateUserActiveStatus(userToEdit, !isActive)
- }
+ if (!isSuperAdmin) {
+ setIsActive(!isActive);
+ updateUserActiveStatus(userToEdit, !isActive);
+ }
+ };
 
  const handleSetAccessLevel = () => {
- const newAccessLevel = isAdmin ? "user" : "admin";
- setIsAdmin(!isAdmin);
- updateUserAccessLevel(userToEdit, newAccessLevel);
+ if (!isSuperAdmin) {
+ const newAccessLevel = isAdmin ? "user" : "admin";
+ setIsAdmin(!isAdmin);
+ updateUserAccessLevel(userToEdit, newAccessLevel);
+ }
  };
 
  return (
@@ -86,16 +86,24 @@ const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects, updateUse
  <div className="toggle-flex">
  <span className="toggle-status">{isActive.toString()}</span>
  <FormGroup>
- <FormControlLabel control={<Switch checked={isActive} />} onClick={() => handleSetIsActive()} />
+ <FormControlLabel 
+ disabled={isSuperAdmin} 
+ control={<Switch checked={isActive} />} 
+ onClick={handleSetIsActive} 
+ />
  </FormGroup>
  </div>
  </div>
  <div className="ua-row toggle-flex">
- <div className="user-toggle-column-left">VRSM Admin:</div>
+ <div className="user-toggle-column-left">VRMS Admin:</div>
  <div className="toggle-flex">
- <span className="toggle-status">{isAdmin ? "Yes" : "No"}</span>
+ <span className="toggle-status">{isAdmin || isSuperAdmin ? "Yes" : "No"}</span>
  <FormGroup>
- <FormControlLabel control={<Switch checked={isAdmin} />} onClick={() => handleSetAccessLevel()} />
+ <FormControlLabel 
+ disabled={isSuperAdmin} 
+ control={<Switch checked={isAdmin || isSuperAdmin} />} 
+ onClick={handleSetAccessLevel} 
+ />
  </FormGroup>
  </div>
  </div>
@@ -110,6 +118,7 @@ const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects, updateUse
  <button
  type="button"
  className="button-remove"
+ disabled={isSuperAdmin}
  onClick={() => handleRemoveProject(result[0])}
  >
  (remove)
@@ -128,6 +137,7 @@ const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects, updateUse
  onChange={(event) => {
  setProjectValue(event.target.value);
  }}
+ disabled={isSuperAdmin}
  >
  <option value="default">Select a project..</option>
  {activeProjects.map((result) => {
@@ -138,13 +148,15 @@ const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects, updateUse
  );
  })}
  </select>
- <button className="button-add" type="submit">
+ <button className={`button-add ${isSuperAdmin ? 'button-add-disabled' : ''}`}
+ type="submit"
+ disabled={isSuperAdmin}>
  Add project
  </button>
  </form>
  <div>
  <button type="button" className="button-back" onClick={backToSearch}>
- Back to search
+ Back to search 
  </button>
  </div>
  </div>

client/src/sass/UserAdmin.scss

@@ -61,14 +61,14 @@
 .user-display-column-right {
  display: flex;
  flex-direction: column;
- flex-basis: 85%;
+ flex-basis: 80%;
  margin-bottom: 8px;
 }
 
 .user-toggle-column-left {
  display: flex;
  flex-direction: column;
- flex-basis: 15%;
+ flex-basis: 20%;
 }
 
 .toggle-status {
@@ -108,6 +108,10 @@
  margin-top: 10px;
  margin-bottom: 10px;
 }
+.button-add-disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
 
 .button-back {
  background-color: black;