Connect backend and frontend

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+
+.DS_Store

admin-api-frontend/.gitignore

@@ -21,3 +21,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+*.env
+
+node_modules/

admin-api-frontend/package.json

@@ -13,6 +13,8 @@
     "@typescript-eslint/parser": "^7.4.0",
     "bootstrap": "^5.3.3",
     "framer-motion": "^11.0.5",
+    "os-browserify": "^0.3.0",
+    "path-browserify": "^1.0.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.2.0",

admin-api-frontend/src/api.js

@@ -0,0 +1,6 @@
+import axios from "axios";
+// import { useState } from "react";
+
+export default axios.create({
+  baseURL: `${BASE_URL}/api/v1/`,
+});

admin-api-frontend/src/components/AddRolesForm/index.tsx

@@ -1,29 +1,33 @@
 import React, { useState } from "react";
 import { Input, Button } from "@nextui-org/react";
+import useFetchWithMsal from "../../hooks/useFetchWithMsal.jsx";
+import { loginRequest } from "../../authConfig.js";
 
 const AddRolesForm = () => {
+  const BASE_URL = process.env.REACT_APP_BASE_URL;
+
   const [netID, setNetID] = useState<string>("");
   const [roles, setRoles] = useState<string>("");
-  const [rolesSplit, setRolesSplit] = useState<string[]>([]);
-
-  const handleNetIDChange = (event) => {
-    setNetID(event.target.value);
-  };
 
-  const handleRolesChange = (event) => {
-    setRoles(event.target.value);
-    setRolesSplit(event.target.value.split(","));
+  const { execute } = useFetchWithMsal(loginRequest);
+  const handleAddRolesThroughUpdate = async () => {
+    try {
+      execute(
+        "PUT",
+        `${BASE_URL}/default/api/v1/update_user?netid=${netID}&newRoles=${roles}&newPerms=`,
+        null
+      ).then((response) => {
+        console.log(response);
+      });
+    } catch (error) {
+      console.log(error);
+    }
   };
 
   const handleSubmit = (event) => {
     if (netID !== "" && roles !== "") {
-      console.log(netID);
-      console.log(rolesSplit);
-      console.log(permissionsSplit);
-      // Do something with the netID, roles and permissions
-
       event.preventDefault();
-      setRolesSplit([]);
+      handleAddRolesThroughUpdate();
       setNetID("");
       setRoles("");
     }
@@ -33,19 +37,19 @@ const AddRolesForm = () => {
     <div>
       <p>Add Roles</p>
       <form onSubmit={handleSubmit}>
-        <div class="flex flex-col m-2">
-          <div class="mb-2">
+        <div className="flex flex-col m-2">
+          <div className="mb-2">
             <Input
               placeholder="NetID"
               value={netID}
-              onChange={handleNetIDChange}
+              onChange={(event) => setNetID(event.target.value)}
             />
           </div>
-          <div class="mb-2">
+          <div className="mb-2">
             <Input
               placeholder="Roles"
               value={roles}
-              onChange={handleRolesChange}
+              onChange={(event) => setRoles(event.target.value)}
             />
           </div>
           <Button type="submit">Submit</Button>

admin-api-frontend/src/components/CreateUserForm/index.tsx

@@ -1,38 +1,34 @@
 import React, { useState } from "react";
 import { Input, Button } from "@nextui-org/react";
+import useFetchWithMsal from "../../hooks/useFetchWithMsal.jsx";
+import { loginRequest } from "../../authConfig.js";
 
 const CreateUserForm = () => {
+  const BASE_URL = process.env.REACT_APP_BASE_URL;
+
   const [netID, setNetID] = useState<string>("");
   const [roles, setRoles] = useState<string>("");
-  const [rolesSplit, setRolesSplit] = useState<string[]>([]);
-
   const [permissions, setPermissions] = useState<string>("");
-  const [permissionsSplit, setPermissionsSplit] = useState<string[]>([]);
-
-  const handleNetIDChange = (event) => {
-    setNetID(event.target.value);
-  };
 
-  const handleRolesChange = (event) => {
-    setRoles(event.target.value);
-    setRolesSplit(event.target.value.split(","));
-  };
-
-  const handlePermissionsChange = (event) => {
-    setPermissions(event.target.value);
-    setPermissionsSplit(event.target.value.split(","));
+  const { execute } = useFetchWithMsal(loginRequest);
+  const handleCreateUser = async () => {
+    try {
+      execute(
+        "PUT",
+        `${BASE_URL}/default/api/v1/create_user?netid=${netID}&permStr=${permissions}&roleStr=${roles}`,
+        null
+      ).then((response) => {
+        console.log(response);
+      });
+    } catch (error) {
+      console.log(error);
+    }
   };
 
   const handleSubmit = (event) => {
     if (netID !== "" && roles !== "") {
-      console.log(netID);
-      console.log(rolesSplit);
-      console.log(permissionsSplit);
-      // Do something with the netID, roles and permissions
-
+      handleCreateUser();
       event.preventDefault();
-      setRolesSplit([]);
-      setPermissionsSplit([]);
       setNetID("");
       setRoles("");
       setPermissions("");
@@ -43,26 +39,26 @@ const CreateUserForm = () => {
     <div>
       <p>Create User</p>
       <form onSubmit={handleSubmit}>
-        <div class="flex flex-col m-2">
-          <div class="mb-2">
+        <div className="flex flex-col m-2">
+          <div className="mb-2">
             <Input
               placeholder="NetID"
               value={netID}
-              onChange={handleNetIDChange}
+              onChange={(event) => setNetID(event.target.value)}
             />
           </div>
-          <div class="mb-2">
+          <div className="mb-2">
             <Input
               placeholder="Roles"
               value={roles}
-              onChange={handleRolesChange}
+              onChange={(event) => setRoles(event.target.value)}
             />
           </div>
-          <div class="mb-2">
+          <div className="mb-2">
             <Input
               placeholder="Permissions"
               value={permissions}
-              onChange={handlePermissionsChange}
+              onChange={(event) => setPermissions(event.target.value)}
             />
           </div>
           <Button type="submit">Submit</Button>

admin-api-frontend/src/components/DeleteUserForm/index.tsx

@@ -1,18 +1,31 @@
 import React, { useState } from "react";
 import { Input, Button } from "@nextui-org/react";
+import useFetchWithMsal from "../../hooks/useFetchWithMsal.jsx";
+import { loginRequest } from "../../authConfig.js";
 
 const DeleteUserForm = () => {
+  const BASE_URL = process.env.REACT_APP_BASE_URL;
+
   const [netID, setNetID] = useState<string>("");
 
-  const handleNetIDChange = (event) => {
-    setNetID(event.target.value);
+  const { execute } = useFetchWithMsal(loginRequest);
+  const handleDeleteUser = async () => {
+    try {
+      execute(
+        "DELETE",
+        `${BASE_URL}/default/api/v1/delete_user?netid=${netID}`,
+        null
+      ).then((response) => {
+        console.log(response);
+      });
+    } catch (error) {
+      console.log(error);
+    }
   };
 
   const handleSubmit = (event) => {
     if (netID !== "") {
-      console.log(netID);
-      // Do something with the netID
-
+      handleDeleteUser();
       event.preventDefault();
       setNetID("");
     }
@@ -22,12 +35,12 @@ const DeleteUserForm = () => {
     <div>
       <p>Delete User</p>
       <form onSubmit={handleSubmit}>
-        <div class="flex flex-col m-2">
-          <div class="mb-2">
+        <div className="flex flex-col m-2">
+          <div className="mb-2">
             <Input
               placeholder="NetID"
               value={netID}
-              onChange={handleNetIDChange}
+              onChange={(event) => setNetID(event.target.value)}
             />
           </div>
           <Button type="submit">Submit</Button>

admin-api-frontend/src/components/GetUserInfoForm/index.tsx

@@ -1,19 +1,33 @@
 import React, { useState } from "react";
 import { Input, Button } from "@nextui-org/react";
+import useFetchWithMsal from "../../hooks/useFetchWithMsal.jsx";
+import { loginRequest } from "../../authConfig.js";
 
 const GetUserInfoForm = () => {
+  const BASE_URL = process.env.REACT_APP_BASE_URL;
+
   const [netID, setNetID] = useState<string>("");
 
-  const handleNetIDChange = (event) => {
-    setNetID(event.target.value);
+  const { execute } = useFetchWithMsal(loginRequest);
+
+  const handleGetUser = async () => {
+    try {
+      execute(
+        "GET",
+        `${BASE_URL}/default/api/v1/get_user?netid=${netID}`,
+        null
+      ).then((response) => {
+        console.log(response);
+      });
+    } catch (error) {
+      console.log(error);
+    }
   };
 
   const handleSubmit = (event) => {
     if (netID !== "") {
-      console.log(netID);
-      // Do something with the netID
-
       event.preventDefault();
+      handleGetUser();
       setNetID("");
     }
   };
@@ -22,12 +36,12 @@ const GetUserInfoForm = () => {
     <div>
       <p>Get User</p>
       <form onSubmit={handleSubmit}>
-        <div class="flex flex-col m-2">
-          <div class="mb-2">
+        <div className="flex flex-col m-2">
+          <div className="mb-2">
             <Input
               placeholder="NetID"
               value={netID}
-              onChange={handleNetIDChange}
+              onChange={(event) => setNetID(event.target.value)}
             />
           </div>
           <Button type="submit">Submit</Button>