Add user invitation modal to UserManagementPage

frontend/src/components/crud/FormModal.tsx

@@ -0,0 +1,105 @@
+import React, { useState } from "react";
+import { Modal, Button, Form } from "react-bootstrap";
+
+interface FormModalProps {
+  show: boolean;
+  onClose: () => void;
+  handleSendInvite: (formData: {
+    firstName: string;
+    lastName: string;
+    phoneNumber: string;
+    email: string;
+    role: string;
+  }) => void;
+}
+
+const FormModal: React.FC<FormModalProps> = ({
+  show,
+  onClose,
+  handleSendInvite,
+}) => {
+  const [formData, setFormData] = useState({
+    firstName: "",
+    lastName: "",
+    phoneNumber: "",
+    email: "",
+    role: "",
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prevData) => ({ ...prevData, [name]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    handleSendInvite(formData);
+  };
+
+  return (
+    <Modal show={show} onHide={onClose}>
+      <Modal.Header closeButton>
+        <Modal.Title>Send Invite</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Form onSubmit={handleSubmit}>
+          <Form.Group controlId="formFirstName">
+            <Form.Label>First Name</Form.Label>
+            <Form.Control
+              type="text"
+              name="firstName"
+              value={formData.firstName}
+              onChange={handleChange}
+              required
+            />
+          </Form.Group>
+          <Form.Group controlId="formLastName">
+            <Form.Label>Last Name</Form.Label>
+            <Form.Control
+              type="text"
+              name="lastName"
+              value={formData.lastName}
+              onChange={handleChange}
+              required
+            />
+          </Form.Group>
+          <Form.Group controlId="formPhoneNumber">
+            <Form.Label>Phone Number</Form.Label>
+            <Form.Control
+              type="text"
+              name="phoneNumber"
+              value={formData.phoneNumber}
+              onChange={handleChange}
+              required
+            />
+          </Form.Group>
+          <Form.Group controlId="formEmail">
+            <Form.Label>Email</Form.Label>
+            <Form.Control
+              type="email"
+              name="email"
+              value={formData.email}
+              onChange={handleChange}
+              required
+            />
+          </Form.Group>
+          <Form.Group controlId="formRole">
+            <Form.Label>Role</Form.Label>
+            <Form.Control
+              type="text"
+              name="role"
+              value={formData.role}
+              onChange={handleChange}
+              required
+            />
+          </Form.Group>
+          <Button variant="primary" type="submit">
+            Send Invite
+          </Button>
+        </Form>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default FormModal;

frontend/src/components/pages/UserManagementPage.tsx

@@ -13,9 +13,11 @@ import {
 import UserAPIClient from "../../APIClients/UserAPIClient";
 import { User } from "../../types/UserTypes";
 import MainPageButton from "../common/MainPageButton";
+import FormModal from "../crud/FormModal";
 
 const UserManagementPage = (): React.ReactElement => {
   const [users, setUsers] = useState<User[]>([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const getUsers = async () => {
     try {
@@ -28,6 +30,29 @@ const UserManagementPage = (): React.ReactElement => {
     }
   };
 
+  const addUser = async () => {
+    try {
+      setIsModalOpen(true);
+    } catch (error) {
+      /* TODO: error handling */
+    }
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleSendInvite = (formData: {
+    firstName: string;
+    lastName: string;
+    phoneNumber: string;
+    email: string;
+    role: string;
+  }) => {
+    // eslint-disable-next-line no-console
+    console.log(`Invite sent to ${formData.email}`);
+  };
+
   useEffect(() => {
     getUsers();
   }, []);
@@ -56,7 +81,12 @@ const UserManagementPage = (): React.ReactElement => {
             </Tbody>
           </Table>
         </TableContainer>
-        <Button onClick={getUsers}>Refresh</Button>
+        <Button onClick={addUser}>+ Add a User</Button>
+        <FormModal
+          show={isModalOpen}
+          onClose={closeModal}
+          handleSendInvite={handleSendInvite}
+        />
         <MainPageButton />
       </VStack>
     </div>