Create Users Table Skeleton

backend/typescript/services/implementations/authService.ts

@@ -176,11 +176,13 @@ class AuthService implements IAuthService {
         decodedIdToken.uid,
       );
 
-      const firebaseUser = await firebaseAdmin
-        .auth()
-        .getUser(decodedIdToken.uid);
+      // TODO: Uncomment when the email verification is working
+      // const firebaseUser = await firebaseAdmin
+      //   .auth()
+      //   .getUser(decodedIdToken.uid);
 
-      return firebaseUser.emailVerified && roles.has(userRole);
+      // return firebaseUser.emailVerified && roles.has(userRole);
+      return roles.has(userRole);
     } catch (error) {
       return false;
     }

frontend/src/APIClients/UserAPIClient.ts

@@ -0,0 +1,21 @@
+import { User } from "../types/UserTypes";
+import AUTHENTICATED_USER_KEY from "../constants/AuthConstants";
+import baseAPIClient from "./BaseAPIClient";
+import { getLocalStorageObjProperty } from "../utils/LocalStorageUtils";
+
+const get = async (): Promise<User[]> => {
+  const bearerToken = `Bearer ${getLocalStorageObjProperty(
+    AUTHENTICATED_USER_KEY,
+    "accessToken",
+  )}`;
+  try {
+    const { data } = await baseAPIClient.get("/users", {
+      headers: { Authorization: bearerToken },
+    });
+    return data;
+  } catch (error) {
+    throw new Error(`Failed to get entity: ${error}`);
+  }
+};
+
+export default { get };

frontend/src/components/pages/UserManagementPage.tsx

@@ -1,11 +1,64 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import {
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableContainer,
+  VStack,
+  Button,
+} from "@chakra-ui/react";
+import UserAPIClient from "../../APIClients/UserAPIClient";
+import { User } from "../../types/UserTypes";
 import MainPageButton from "../common/MainPageButton";
 
 const UserManagementPage = (): React.ReactElement => {
+  const [users, setUsers] = useState<User[]>([]);
+
+  const getUsers = async () => {
+    try {
+      const fetchedUsers = await UserAPIClient.get();
+      if (fetchedUsers != null) {
+        setUsers(fetchedUsers);
+      }
+    } catch (error) {
+      /* empty */
+    }
+  };
+
+  useEffect(() => {
+    getUsers();
+  }, []);
+
   return (
-    <div style={{ textAlign: "center", width: "25%", margin: "0px auto" }}>
-      <h1>User Management</h1>
-      <MainPageButton />
+    <div style={{ textAlign: "center", width: "75%", margin: "0px auto" }}>
+      <h1>Team Members Page</h1>
+      <VStack spacing="24px" style={{ margin: "24px auto" }}>
+        <TableContainer>
+          <Table variant="simple">
+            <Thead>
+              <Tr>
+                <Th>First Name</Th>
+                <Th>Last Name</Th>
+                <Th>Role</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {users.map((user) => (
+                <Tr key={user.id}>
+                  <Td>{user.firstName}</Td>
+                  <Td>{user.lastName}</Td>
+                  <Td>{user.role}</Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </TableContainer>
+        <Button onClick={getUsers}>Refresh</Button>
+        <MainPageButton />
+      </VStack>
     </div>
   );
 };

frontend/src/types/UserTypes.ts

@@ -0,0 +1,8 @@
+export type User = {
+  id: number;
+  firstName: string;
+  lastName: string;
+  email: string;
+  role: string;
+  status: string;
+};