fix(frontend): Do not allow user w/ ID 1 to disable 'Admin' permission (#965)

server/routes/user/usersettings.ts

@@ -266,6 +266,13 @@ userSettingsRoutes.post<
         return next({ status: 404, message: 'User not found.' });
       }
 
+      if (user.id === 1) {
+        return next({
+          status: 500,
+          message: 'Permissions for user with ID 1 cannot be modified',
+        });
+      }
+
       user.permissions = req.body.permissions;
 
       await userRepository.save(user);

src/components/PermissionEdit/index.tsx

@@ -53,15 +53,17 @@ export const messages = defineMessages({
 });
 
 interface PermissionEditProps {
+  actingUser?: User;
+  currentUser?: User;
   currentPermission: number;
-  user?: User;
   onUpdate: (newPermissions: number) => void;
 }
 
 export const PermissionEdit: React.FC<PermissionEditProps> = ({
+  actingUser,
+  currentUser,
   currentPermission,
   onUpdate,
-  user,
 }) => {
   const intl = useIntl();
 
@@ -216,7 +218,8 @@ export const PermissionEdit: React.FC<PermissionEditProps> = ({
         <PermissionOption
           key={`permission-option-${permissionItem.id}`}
           option={permissionItem}
-          user={user}
+          actingUser={actingUser}
+          currentUser={currentUser}
           currentPermission={currentPermission}
           onUpdate={(newPermission) => onUpdate(newPermission)}
         />

src/components/PermissionOption/index.tsx

@@ -18,17 +18,19 @@ interface PermissionRequirement {
 
 interface PermissionOptionProps {
   option: PermissionItem;
+  actingUser?: User;
+  currentUser?: User;
   currentPermission: number;
-  user?: User;
   parent?: PermissionItem;
   onUpdate: (newPermissions: number) => void;
 }
 
 const PermissionOption: React.FC<PermissionOptionProps> = ({
   option,
+  actingUser,
+  currentUser,
   currentPermission,
   onUpdate,
-  user,
   parent,
 }) => {
   const autoApprovePermissions = [
@@ -44,15 +46,21 @@ const PermissionOption: React.FC<PermissionOptionProps> = ({
     <>
       <div
         className={`relative flex items-start first:mt-0 mt-4 ${
+          (currentUser && currentUser.id === 1) ||
           (option.permission !== Permission.ADMIN &&
             hasPermission(Permission.ADMIN, currentPermission)) ||
           (autoApprovePermissions.includes(option.permission) &&
             hasPermission(Permission.MANAGE_REQUESTS, currentPermission)) ||
           (!!parent?.permission &&
             hasPermission(parent.permission, currentPermission)) ||
-          (user && user.id !== 1 && option.permission === Permission.ADMIN) ||
-          (user &&
-            !hasPermission(Permission.MANAGE_SETTINGS, user.permissions) &&
+          (actingUser &&
+            !hasPermission(Permission.ADMIN, actingUser.permissions) &&
+            option.permission === Permission.ADMIN) ||
+          (actingUser &&
+            !hasPermission(
+              Permission.MANAGE_SETTINGS,
+              actingUser.permissions
+            ) &&
             option.permission === Permission.MANAGE_SETTINGS) ||
           (option.requires &&
             !option.requires.every((requirement) =>
@@ -70,17 +78,21 @@ const PermissionOption: React.FC<PermissionOptionProps> = ({
             name="permissions"
             type="checkbox"
             disabled={
+              (currentUser && currentUser.id === 1) ||
               (option.permission !== Permission.ADMIN &&
                 hasPermission(Permission.ADMIN, currentPermission)) ||
               (autoApprovePermissions.includes(option.permission) &&
                 hasPermission(Permission.MANAGE_REQUESTS, currentPermission)) ||
               (!!parent?.permission &&
                 hasPermission(parent.permission, currentPermission)) ||
-              (user &&
-                user.id !== 1 &&
+              (actingUser &&
+                !hasPermission(Permission.ADMIN, actingUser.permissions) &&
                 option.permission === Permission.ADMIN) ||
-              (user &&
-                !hasPermission(Permission.MANAGE_SETTINGS, user.permissions) &&
+              (actingUser &&
+                !hasPermission(
+                  Permission.MANAGE_SETTINGS,
+                  actingUser.permissions
+                ) &&
                 option.permission === Permission.MANAGE_SETTINGS) ||
               (option.requires &&
                 !option.requires.every((requirement) =>

src/components/UserList/BulkEditModal.tsx

@@ -104,7 +104,7 @@ const BulkEditModal: React.FC<BulkEditProps> = ({
             <div className="form-input">
               <div className="max-w-lg">
                 <PermissionEdit
-                  user={currentUser}
+                  actingUser={currentUser}
                   currentPermission={currentPermission}
                   onUpdate={(newPermission) =>
                     setCurrentPermission(newPermission)

src/components/UserProfile/UserSettings/UserPermissions/index.tsx

@@ -86,7 +86,8 @@ const UserPermissions: React.FC = () => {
                   <div className="form-input">
                     <div className="max-w-lg">
                       <PermissionEdit
-                        user={currentUser}
+                        actingUser={currentUser}
+                        currentUser={user}
                         currentPermission={values.currentPermissions ?? 0}
                         onUpdate={(newPermission) =>
                           setFieldValue('currentPermissions', newPermission)