Artyom - Added Proper Frontend User Invitations

backend/typescript/middlewares/validators/userValidators.ts

@@ -26,7 +26,9 @@
   if (!validatePrimitive(req.body.role, "string")) {
     return res.status(400).send(getApiValidationError("role", "string"));
   }
-  if (!validatePrimitive(req.body.colorLevel, "integer")) {
+  // put a false here, not sure what a color level is because the backend literally sets it to 1 on creation anyway
+  // TODO: remove this check altogether
+  if (false && !validatePrimitive(req.body.colorLevel, "integer")) {
     return res.status(400).send(getApiValidationError("colorLevel", "integer"));
   }
   if (
@@ -54,7 +56,6 @@
   ) {
     return res.status(400).send(getApiValidationError("phoneNumber", "string"));
   }
-
   return next();
 };
 

backend/typescript/rest/authRoutes.ts

@@ -204,13 +204,15 @@ authRouter.post("/invite-user", inviteUserDtoValidator, async (req, res) => {
     const invitedUser = user;
     invitedUser.status = UserStatus.INVITED;
     await userService.updateUserById(user.id, invitedUser);
-
     res.status(204).send();
   } catch (error: unknown) {
     if (error instanceof NotFoundError) {
       res.status(404).send(getErrorMessage(error));
     } else {
-      res.status(500).json({ error: getErrorMessage(error) });
+      await userService.deleteUserByEmail(req.body.email);
+      res
+        .status(500)
+        .json({ error: `${getErrorMessage(error)}\nUser has been deleted!` });
     }
   }
 });

backend/typescript/services/implementations/userService.ts

@@ -181,7 +181,6 @@ class UserService implements IUserService {
   async createUser(user: CreateUserDTO): Promise<UserDTO> {
     let newUser: PgUser;
     let firebaseUser: firebaseAdmin.auth.UserRecord;
-
     try {
       firebaseUser = await firebaseAdmin.auth().createUser({
         email: user.email,

frontend/src/APIClients/UserAPIClient.ts

@@ -28,7 +28,7 @@ async function get(userId?: number): Promise<User | User[]> {
   }
 }
 
-const create = async (formData: CreateUserDTO): Promise<CreateUserDTO> => {
+const create = async (formData: CreateUserDTO): Promise<User> => {
   const bearerToken = `Bearer ${getLocalStorageObjProperty(
     AUTHENTICATED_USER_KEY,
     "accessToken",
@@ -43,6 +43,24 @@ const create = async (formData: CreateUserDTO): Promise<CreateUserDTO> => {
   }
 };
 
+const update = async (
+  userId: number,
+  formData: Partial<User>,
+): Promise<User> => {
+  const bearerToken = `Bearer ${getLocalStorageObjProperty(
+    AUTHENTICATED_USER_KEY,
+    "accessToken",
+  )}`;
+  try {
+    const { data } = await baseAPIClient.put(`/users/${userId}`, formData, {
+      headers: { Authorization: bearerToken },
+    });
+    return data;
+  } catch (error) {
+    throw new Error(`Failed to update user: ${error}`);
+  }
+};
+
 const invite = async (email: string): Promise<void> => {
   const bearerToken = `Bearer ${getLocalStorageObjProperty(
     AUTHENTICATED_USER_KEY,
@@ -61,4 +79,4 @@ const invite = async (email: string): Promise<void> => {
   }
 };
 
-export default { get, create, invite };
+export default { get, create, update, invite };

frontend/src/App.tsx

@@ -21,6 +21,7 @@ import InteractionLogPage from "./features/interaction-log/pages/InteractionLogP
 import ProfilePage from "./features/user-profile/pages/UserProfilePage";
 import PetProfilePage from "./features/pet-profile/pages/PetProfilePage";
 import UserManagementPage from "./features/user-management/pages/UserManagementPage";
+import InviteUserPage from "./features/user-management/pages/InviteUserPage";
 import AdminViewEditUserProfilePage from "./features/user-profile/pages/AdminViewEditUserProfilePage";
 import AdminPage from "./pages/AdminPage";
 import Layout from "./Layout";
@@ -106,6 +107,12 @@ const App = (): React.ReactElement => {
                 component={UserManagementPage}
                 allowedRoles={AuthConstants.STAFF_BEHAVIOURISTS_ADMIN}
               />
+              <PrivateRoute
+                exact
+                path={Routes.INVITE_USER_PAGE}
+                component={InviteUserPage}
+                allowedRoles={AuthConstants.ADMIN_AND_BEHAVIOURISTS}
+              />
               <PrivateRoute
                 exact
                 path={`${Routes.ADMIN_EDIT_USER_PROFILE_PAGE}/:userId`}

frontend/src/components/common/MultiSelect.tsx

@@ -20,6 +20,7 @@ interface MultiSelectProps<T> {
   label?: string;
   error?: boolean;
   colours: string[];
+  icons?: React.FC<React.SVGProps<SVGSVGElement>>[];
   required?: boolean;
   maxHeight?: string;
 }
@@ -32,6 +33,7 @@ const MultiSelect = <T extends string | number>({
   label,
   error = false,
   colours,
+  icons,
   required = false,
   maxHeight = "200px",
 }: MultiSelectProps<T>): React.ReactElement => {
@@ -159,6 +161,7 @@ const MultiSelect = <T extends string | number>({
               >
                 {selected.map((value) => {
                   const color = getColorForValue(value);
+                  const IconComponent = icons?.[values.indexOf(value)];
 
                   return (
                     <Tag
@@ -168,7 +171,12 @@ const MultiSelect = <T extends string | number>({
                       flexShrink={0}
                       px="1.5rem"
                       py="0.25rem"
+                      display="flex"
+                      gap="0.25rem"
                     >
+                      {IconComponent && (
+                        <Icon as={IconComponent} boxSize="1rem" />
+                      )}
                       <TagLabel textStyle="button" m={0}>
                         {String(value)}
                       </TagLabel>
@@ -248,6 +256,7 @@ const MultiSelect = <T extends string | number>({
           {values.map((value, index) => {
             const isSelected = selected.includes(value);
             const isLastItem = index === values.length - 1;
+            const IconComponent = icons?.[index];
 
             return (
               <Box key={String(value)}>
@@ -278,6 +287,9 @@ const MultiSelect = <T extends string | number>({
                     isChecked={isSelected}
                     onChange={() => handleSelect(value)}
                   />
+                  {IconComponent && (
+                    <Icon as={IconComponent} boxSize="1.5rem" />
+                  )}
                   <Text
                     m={0}
                     textStyle="body"

frontend/src/constants/Routes.ts

@@ -14,6 +14,8 @@ export const PET_PROFILE_PAGE = "/pet-profile";
 
 export const USER_MANAGEMENT_PAGE = "/admin/users";
 
+export const INVITE_USER_PAGE = "/admin/users/invite";
+
 export const ADMIN_EDIT_USER_PROFILE_PAGE = "/admin/edit-user-profile";
 
 export const TASK_MANAGEMENT_PAGE = "/admin/tasks";

frontend/src/features/user-management/components/UserManagementTableSection.tsx

@@ -67,7 +67,7 @@ const UserListTableSection = ({
                   type={imageType}
                 />
                 <Text textStyle="body" m={0} color={textColor}>
-                  {user.name}
+                  {user.firstName} {user.lastName}
                 </Text>
               </Flex>
             </Td>