lock user through UI

Author: ssundahlTTD

src/api/entities/AuditTrail.ts

@@ -19,6 +19,7 @@ export enum AuditTrailEvents {
   UpdateDomainNames = 'UpdateDomainNames',
   UpdateAppNames = 'UpdateAppNames',
   ManageTeamMembers = 'ManageTeamMembers',
+  ChangeUserLock = 'ChangeUserLock',
 }
 
 export class AuditTrail extends BaseModel {

src/api/routers/managementRouter.ts

@@ -1,18 +1,28 @@
 import express, { Response } from 'express';
+import { z } from 'zod';
 
 import { isSuperUserCheck } from '../middleware/userRoleMiddleware';
 import { ParticipantRequest } from '../services/participantsService';
+import { UserService } from '../services/userService';
 import { getAllUsersList } from '../services/usersService';
 
 const handleGetAllUsers = async (req: ParticipantRequest, res: Response) => {
   const userList = await getAllUsersList();
   return res.status(200).json(userList);
 };
 
+const handleChangeUserLock = async (req: ParticipantRequest, res: Response) => {
+  const userService = new UserService();
+  const { userId } = z.object({ userId: z.coerce.number() }).parse(req.params);
+  const { isLocked } = z.object({ isLocked: z.boolean() }).parse(req.body);
+  await userService.updateUserLock(req, userId, isLocked);
+};
+
 export function createManagementRouter() {
   const managementRouter = express.Router();
 
   managementRouter.get('/users', isSuperUserCheck, handleGetAllUsers);
+  managementRouter.patch('/:userId/changeLock', isSuperUserCheck, handleChangeUserLock);
 
   return managementRouter;
 }

src/api/services/userService.ts

@@ -3,7 +3,7 @@ import { z } from 'zod';
 
 import { AuditAction, AuditTrailEvents } from '../entities/AuditTrail';
 import { ParticipantType } from '../entities/ParticipantType';
-import { UserJobFunction } from '../entities/User';
+import { User, UserJobFunction } from '../entities/User';
 import { getUserRoleById, UserRoleId } from '../entities/UserRole';
 import { UserToParticipantRole } from '../entities/UserToParticipantRole';
 import { getTraceId } from '../helpers/loggingHelpers';
@@ -142,4 +142,24 @@ export class UserService {
       });
     });
   }
+
+  public async updateUserLock(req: UserParticipantRequest, userId: number, isLocked: boolean) {
+    const requestingUser = await findUserByEmail(req.auth?.payload.email as string);
+    const updatedUser = await User.query().where('id', userId).first();
+    const traceId = getTraceId(req);
+
+    const auditTrailInsertObject = constructAuditTrailObject(
+      requestingUser!,
+      AuditTrailEvents.ChangeUserLock,
+      {
+        action: AuditAction.Update,
+        email: updatedUser?.email,
+        locked: isLocked,
+      }
+    );
+
+    await performAsyncOperationWithAuditTrail(auditTrailInsertObject, traceId, async () => {
+      await User.query().where('id', userId).update({ locked: isLocked });
+    });
+  }
 }

src/api/services/usersService.ts

@@ -199,6 +199,7 @@ export const inviteUserToParticipant = async (
   }
 };
 
+// should this be moved somewhere for only superuser actions?  managementService?
 export const getAllUsersList = async () => {
   const userList = await User.query().where('deleted', 0).orderBy('email');
   return userList;

src/web/components/PortalHeader/PortalHeader.scss

@@ -97,7 +97,7 @@
     }
 
     .theme-toggle[data-state='checked'] {
-      background-color: 'black';
+      background-color: black;
     }
 
     .thumb {

src/web/components/UserManagement/UserManagementItem.scss

@@ -17,4 +17,42 @@
   .approver-name {
     margin-right: 40px;
   }
+
+  .theme-switch {
+    button {
+      all: unset;
+    }
+
+    color: var(--theme-secondary);
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+    .theme-toggle {
+      width: 42px;
+      height: 25px;
+      background-color: gray;
+      border-radius: 9999px;
+      margin-left: 10px;
+      cursor: pointer;
+    }
+
+    .theme-toggle[data-state='checked'] {
+      background-color: crimson;
+    }
+
+    .thumb {
+      display: block;
+      width: 21px;
+      height: 21px;
+      background-color: white;
+      border-radius: 9999px;
+      transform: translateX(2px);
+    }
+
+    .thumb[data-state='checked'] {
+      transform: translateX(19px);
+    }
+  }
 }

src/web/components/UserManagement/UserManagementItem.tsx

@@ -1,21 +1,42 @@
+import * as Switch from '@radix-ui/react-switch';
+import { useState } from 'react';
+
 import { UserDTO } from '../../../api/entities/User';
 
 import './UserManagementItem.scss';
 
 type UserManagementItemProps = Readonly<{
   user: UserDTO;
+  onChangeUserLock: (userId: number, isLocked: boolean) => Promise<void>;
 }>;
 
-export function UserManagementItem({ user }: UserManagementItemProps) {
+export function UserManagementItem({ user, onChangeUserLock }: UserManagementItemProps) {
+  const [lockedState, setLockedState] = useState(user.locked);
+
+  const onLockedToggle = async () => {
+    await onChangeUserLock(user.id, !lockedState);
+    setLockedState(!lockedState);
+  };
+
   return (
     <tr className='user-management-item'>
       <td>{user.email}</td>
       <td>{user.firstName}</td>
       <td>{user.lastName}</td>
       <td>{user.jobFunction}</td>
       <td>{user.acceptedTerms ? 'True' : 'False'}</td>
-      <td />
-      <td />
+      <td>
+        <div className='theme-switch'>
+          <Switch.Root
+            name='dark-mode'
+            checked={lockedState}
+            onCheckedChange={onLockedToggle}
+            className='theme-toggle clickable-item'
+          >
+            <Switch.Thumb className='thumb' />
+          </Switch.Root>
+        </div>
+      </td>
     </tr>
   );
 }

src/web/components/UserManagement/UserManagementTable.tsx

@@ -13,6 +13,7 @@ import './UserManagementTable.scss';
 
 type UserManagementTableProps = Readonly<{
   users: UserDTO[];
+  onChangeUserLock: (userId: number, isLocked: boolean) => Promise<void>;
 }>;
 
 function NoUsers() {
@@ -23,7 +24,7 @@ function NoUsers() {
   );
 }
 
-function UserManagementTableContent({ users }: UserManagementTableProps) {
+function UserManagementTableContent({ users, onChangeUserLock }: UserManagementTableProps) {
   const initialRowsPerPage = 25;
   const initialPageNumber = 1;
 
@@ -96,14 +97,13 @@ function UserManagementTableContent({ users }: UserManagementTableProps) {
             <SortableTableHeader<UserDTO> sortKey='lastName' header='Last Name' />
             <SortableTableHeader<UserDTO> sortKey='jobFunction' header='Job Function' />
             <th>Accepted Terms</th>
-            <th>Delete Action Here</th>
             <th>Lock Action Here</th>
           </tr>
         </thead>
 
         <tbody>
           {pagedRows.map((user) => (
-            <UserManagementItem key={user.id} user={user} />
+            <UserManagementItem key={user.id} user={user} onChangeUserLock={onChangeUserLock} />
           ))}
         </tbody>
       </table>

src/web/screens/manageUsers.tsx

@@ -4,7 +4,7 @@ import { defer, useLoaderData } from 'react-router-typesafe';
 import { Loading } from '../components/Core/Loading/Loading';
 import { ScreenContentContainer } from '../components/Core/ScreenContentContainer/ScreenContentContainer';
 import UserManagementTable from '../components/UserManagement/UserManagementTable';
-import { GetAllUsers } from '../services/userAccount';
+import { ChangeUserLock, GetAllUsers } from '../services/userAccount';
 import { AwaitTypesafe } from '../utils/AwaitTypesafe';
 import { RouteErrorBoundary } from '../utils/RouteErrorBoundary';
 import { PortalRoute } from './routeUtils';
@@ -17,14 +17,19 @@ const loader = () => {
 function ManageUsers() {
   const data = useLoaderData<typeof loader>();
 
+  const onChangeUserLock = async (userId: number, isLocked: boolean) => {
+    console.log(`locking user: ${userId}`);
+    await ChangeUserLock(userId, isLocked);
+  };
+
   return (
     <>
       <h1>Manage Users</h1>
       <p className='heading-details'>Manage portal users</p>
       <ScreenContentContainer>
         <Suspense fallback={<Loading message='Loading users...' />}>
           <AwaitTypesafe resolve={data.userList}>
-            {(users) => <UserManagementTable users={users} />}
+            {(users) => <UserManagementTable users={users} onChangeUserLock={onChangeUserLock} />}
           </AwaitTypesafe>
         </Suspense>
       </ScreenContentContainer>

src/web/services/userAccount.ts

@@ -120,3 +120,11 @@ export async function GetAllUsers() {
     throw backendError(e, 'Unable to get user list.');
   }
 }
+
+export async function ChangeUserLock(userId: number, isLocked: boolean) {
+  try {
+    return await axios.patch(`/manage/${userId}/changeLock`, { userId, isLocked });
+  } catch (e: unknown) {
+    throw backendError(e, 'Unable to update user lock status.');
+  }
+}