Merge pull request #1195 from mathematicalthinking/development

Admin status buttons

Author: exidy80

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "3.3.5",
+  "version": "3.3.6",
   "private": true,
   "dependencies": {
     "@xstate/react": "^3.0.1",

client/src/Components/UI/ContentBox/DashboardContentBox.js

@@ -37,47 +37,9 @@ class DashboardContentBox extends PureComponent {
       resource,
       manageUser,
       isSelf,
+      iconActions,
     } = this.props;
     const { expanded } = this.state;
-    let iconActions = null;
-    let suspendReinstateAction = {
-      iconClass: 'fas fa-ban',
-      title: 'Suspend User',
-      testid: 'suspend',
-      color: 'red',
-      onClick: () => {
-        manageUser(details, 'suspendUser');
-      },
-    };
-
-    if (details.isSuspended) {
-      suspendReinstateAction = {
-        iconClass: 'fas fa-undo',
-        title: 'Reinstate User',
-        testid: 'reinstate',
-        color: 'green',
-        onClick: () => {
-          manageUser(details, 'reinstateUser');
-        },
-      };
-    }
-
-    const forceLogoutAction = {
-      iconClass: 'fas fa-power-off',
-      title: 'Force Logout',
-      testid: 'force-logout',
-      onClick: () => {
-        manageUser(details, 'logoutUser');
-      },
-    };
-
-    if (resource === 'users') {
-      iconActions = !isSelf ? [suspendReinstateAction] : [];
-
-      if (details.socketId && !details.doForceLogout) {
-        iconActions.unshift(forceLogoutAction);
-      }
-    }
 
     const { firstName = '', lastName = '' } = details;
     let fullName;
@@ -260,12 +222,20 @@ DashboardContentBox.propTypes = {
   resource: PropTypes.string.isRequired,
   manageUser: PropTypes.func,
   isSelf: PropTypes.bool.isRequired,
+  iconActions: PropTypes.arrayOf(
+    PropTypes.shape({
+      testId: PropTypes.string,
+      onClick: PropTypes.func,
+      title: PropTypes.string,
+    })
+  ),
 };
 
 DashboardContentBox.defaultProps = {
   image: null,
   roomType: null,
   link: null,
   manageUser: null,
+  iconActions: [],
 };
 export default DashboardContentBox;

client/src/Containers/Dashboard.js

@@ -204,13 +204,15 @@ class Dashboard extends Component {
     this.setQueryParams(filters);
   };
 
-  logoutUser = (userId) => {
-    return API.revokeRefreshToken(userId)
+  _buttonAction = (apiAction, userId, update) => {
+    return apiAction()
       .then((res) => {
-        const { user } = res.data;
+        const { user, username } = res.data;
 
-        if (user) {
-          this.updateVisibleResource(userId, { socketId: null });
+        // API actions return different values if successful,
+        // so allow for a couple of possibilities.
+        if (user || username) {
+          this.updateVisibleResource(userId, update);
         }
         this.stopManageUser();
       })
@@ -221,39 +223,32 @@ class Dashboard extends Component {
       });
   };
 
-  suspendUser = (userId) => {
-    return API.suspendUser(userId)
-      .then((res) => {
-        const { user } = res.data;
+  logoutUser = (userId) =>
+    this._buttonAction(() => API.revokeRefreshToken(userId), userId, {
+      socketId: null,
+    });
 
-        if (user) {
-          this.updateVisibleResource(userId, { isSuspended: true });
-        }
-        this.stopManageUser();
-      })
-      .catch((err) => {
-        this.stopManageUser();
-        // eslint-disable-next-line no-console
-        console.log({ err });
-      });
-  };
+  suspendUser = (userId) =>
+    this._buttonAction(() => API.suspendUser(userId), userId, {
+      isSuspended: true,
+    });
 
-  reinstateUser = (userId) => {
-    return API.reinstateUser(userId)
-      .then((res) => {
-        const { user } = res.data;
+  reinstateUser = (userId) =>
+    this._buttonAction(() => API.reinstateUser(userId), userId, {
+      isSuspended: false,
+    });
 
-        if (user) {
-          this.updateVisibleResource(userId, { isSuspended: false });
-        }
-        this.stopManageUser();
+  removeAsAdmin = (userId) =>
+    this.logoutUser(userId).then(() =>
+      this._buttonAction(() => API.removeAsAdmin(userId), userId, {
+        isAdmin: false,
       })
-      .catch((err) => {
-        this.stopManageUser();
-        // eslint-disable-next-line no-console
-        console.log({ err });
-      });
-  };
+    );
+
+  makeAdmin = (userId) =>
+    this.logoutUser(userId).then(() =>
+      this._buttonAction(() => API.makeAdmin(userId), userId, { isAdmin: true })
+    );
 
   updateVisibleResource = (itemId, update) => {
     const { visibleResources } = this.state;
@@ -282,6 +277,62 @@ class Dashboard extends Component {
     });
   };
 
+  _getIconActions = (details, resource, isSelf) => {
+    if (resource !== 'users') return [];
+    const suspendReinstateAction = details.isSuspended
+      ? {
+          iconClass: 'fas fa-undo',
+          title: 'Reinstate User',
+          testid: 'reinstate',
+          color: 'green',
+          onClick: () => {
+            this.manageUser(details, 'reinstateUser');
+          },
+        }
+      : {
+          iconClass: 'fas fa-ban',
+          title: 'Suspend User',
+          testid: 'suspend',
+          color: 'red',
+          onClick: () => {
+            this.manageUser(details, 'suspendUser');
+          },
+        };
+
+    const forceLogoutAction = {
+      iconClass: 'fas fa-power-off',
+      title: 'Force Logout',
+      testid: 'force-logout',
+      onClick: () => {
+        this.manageUser(details, 'logoutUser');
+      },
+    };
+
+    const makeRemoveAdmin = details.isAdmin
+      ? {
+          iconClass: 'fas fa-minus',
+          title: 'Remove as Admin',
+          testid: 'remove-as-admin',
+          onClick: () => {
+            this.manageUser(details, 'removeAsAdmin');
+          },
+        }
+      : {
+          iconClass: 'fas fa-plus',
+          title: 'Make into Admin',
+          testid: 'make-as-admin',
+          onClick: () => {
+            this.manageUser(details, 'makeAdmin');
+          },
+        };
+
+    const iconActions = [];
+    if (details.socketId && !details.doForceLogout)
+      iconActions.push(forceLogoutAction);
+    if (!isSelf) iconActions.push(suspendReinstateAction, makeRemoveAdmin);
+    return iconActions;
+  };
+
   render() {
     const { match, user } = this.props;
     const {
@@ -315,6 +366,8 @@ class Dashboard extends Component {
         logoutUser: `Are you sure you want to manually logout ${username}?`,
         reinstateUser: `Are you sure you want to reinstate ${username}?`,
         suspendUser: `Are you sure you want to suspend ${username}. They will not be able to use VMT until they are reinstated.`,
+        removeAsAdmin: `Are you sure you want to remove ${username} as an Admin?`,
+        makeAdmin: `Are you sure you want to give ${username} Admin privileges?`,
       };
       manageUserPrompt = actionMessageHash[manageUserAction];
     }
@@ -340,6 +393,7 @@ class Dashboard extends Component {
           manageUser={this.manageUser}
           ownUserId={user._id}
           isLoading={isLoading}
+          getIconActions={this._getIconActions}
         />
         <Modal show={userToManage !== null} closeModal={this.stopManageUser}>
           {manageUserPrompt}

client/src/Layout/AdminDashboard/AdminDashboard.js

@@ -46,6 +46,7 @@ class AdminDashboard extends Component {
       manageUser,
       ownUserId,
       isLoading,
+      getIconActions,
     } = this.props;
 
     const totalCount = totalCounts ? totalCounts.totalCount || 0 : 0;
@@ -184,6 +185,7 @@ class AdminDashboard extends Component {
               resultsMessage={resultsMessage}
               manageUser={manageUser}
               ownUserId={ownUserId}
+              getIconActions={getIconActions}
             />
           )}
         </div>
@@ -222,6 +224,7 @@ AdminDashboard.propTypes = {
   setToDate: PropTypes.func.isRequired,
   manageUser: PropTypes.func.isRequired,
   ownUserId: PropTypes.string.isRequired,
+  getIconActions: PropTypes.func.isRequired,
 };
 
 export default AdminDashboard;

client/src/Layout/DashboardBoxList/DashboardBoxList.js

@@ -15,6 +15,7 @@ const dashboardBoxList = (props) => {
     resultsMessage,
     manageUser,
     ownUserId,
+    getIconActions,
   } = props;
   let listElems = 'No activity within specified time period';
   if (list.length > 0) {
@@ -56,6 +57,11 @@ const dashboardBoxList = (props) => {
               resource={resource}
               manageUser={manageUser}
               isSelf={item._id === ownUserId}
+              iconActions={getIconActions(
+                item,
+                resource,
+                item._id === ownUserId
+              )}
             />
           </div>
         );
@@ -97,6 +103,7 @@ dashboardBoxList.propTypes = {
   resultsMessage: PropTypes.string,
   manageUser: PropTypes.func.isRequired,
   ownUserId: PropTypes.string.isRequired,
+  getIconActions: PropTypes.func.isRequired,
 };
 
 dashboardBoxList.defaultProps = {

client/src/Routes/MyVmt.js

@@ -32,60 +32,60 @@ const pages = [
   {
     path: '/courses/:course_id/:resource',
     component: Course,
-    redirectPath: '/classcode',
+    redirectPath: '/',
   },
   {
     path: '/courses/:course_id/activities/:activity_id/:resource',
     // component: Activity,
     component: withPopulatedActivity(Activity),
-    redirectPath: '/classcode',
+    redirectPath: '/',
   },
   {
     path:
       '/courses/:course_id/activities/:activity_id/rooms/:room_id/:resource',
     component: Room,
-    redirectPath: '/classcode',
+    redirectPath: '/',
   },
   {
     path: '/activities/:activity_id/rooms/:room_id/:resource',
     component: Room,
-    redirectPath: '/signup',
+    redirectPath: '/',
   },
   {
     path: '/courses/:course_id/rooms/:room_id/:resource',
     component: Room,
-    redirectPath: '/classcode',
+    redirectPath: '/',
   },
   {
     path: '/courses/:course_id/rooms/:room_id/:resource',
     component: Room,
-    redirectPath: '/classcode',
+    redirectPath: '/',
   },
   {
     path: '/rooms/:room_id/:resource',
     component: Room,
-    redirectPath: '/signup',
+    redirectPath: '/',
   },
   {
     path: '/activities/:activity_id/:resource',
     // component: Activity,
     component: withPopulatedActivity(Activity),
-    redirectPath: '/signup',
+    redirectPath: '/',
   },
   {
     path: '/workspace/:room_id/replayer',
     component: withPopulatedRoom(SharedReplayer),
-    redirectPath: '/signup',
+    redirectPath: '/',
   },
   {
     path: '/workspace/:activity_id/activity',
     component: ActivityWorkspace,
-    redirectPath: '/signup',
+    redirectPath: '/',
   },
   {
     path: '/workspace/:room_id',
     component: withPopulatedRoom(withControlMachine(Workspace)),
-    redirectPath: '/signup',
+    redirectPath: '/',
   },
   {
     path: '/confirmation',

client/src/utils/apiRequests.js

@@ -210,6 +210,12 @@ export default {
   reinstateUser: (userId) => {
     return api.post(`/admin/reinstateUser/${userId}`);
   },
+  removeAsAdmin: (userId) => {
+    return api.put(`/api/user/${userId}`, { isAdmin: false });
+  },
+  makeAdmin: (userId) => {
+    return api.put(`/api/user/${userId}`, { isAdmin: true });
+  },
 
   archiveRooms: (ids) => {
     return api.put(`/api/archiveRooms`, { ids });

server/controllers/UserController.js

@@ -328,6 +328,7 @@ module.exports = {
         $project: {
           username: 1,
           latestIpAddress: 1,
+          isAdmin: 1,
           updatedAt: 1,
           isSuspended: 1,
           socketId: 1,