Switch styles to nextui

admin-api-frontend/package.json

@@ -3,9 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@nextui-org/react": "^2.2.9",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "framer-motion": "^11.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

admin-api-frontend/src/App.css

@@ -1,3 +1,7 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
 .App {
   text-align: center;
 }

admin-api-frontend/src/App.js

@@ -1,25 +1,29 @@
 import "./App.css";
-import GetUserInfoForm from "./components/FormsFolder/GetUserInfoForm/index.tsx";
-import AddRolesForm from "./components/FormsFolder/AddRolesForm/index.tsx";
-import RemoveRolesForm from "./components/FormsFolder/RemoveRolesForm/index.tsx";
-import CreateUserForm from "./components/FormsFolder/CreateUserForm/index.tsx";
-import DeleteUserForm from "./components/FormsFolder/DeleteUserForm/index.tsx";
+import GetUserInfoForm from "./components/GetUserInfoForm/index.tsx";
+import AddRolesForm from "./components/AddRolesForm/index.tsx";
+import RemoveRolesForm from "./components/RemoveRolesForm/index.tsx";
+import CreateUserForm from "./components/CreateUserForm/index.tsx";
+import DeleteUserForm from "./components/DeleteUserForm/index.tsx";
+
+import { NextUIProvider } from "@nextui-org/react";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <p>ACM Admin API </p>
-        <p>also roles should be comma separated </p>
-        <div className="Form-container">
-          <CreateUserForm />
-          <DeleteUserForm />
-          <GetUserInfoForm />
-          <RemoveRolesForm />
-          <AddRolesForm />
-        </div>
-      </header>
-    </div>
+    <NextUIProvider>
+      <div className="App">
+        <header className="App-header">
+          <p>ACM Admin API </p>
+          <p>Roles and permissions should be comma separated </p>
+          <div className="Form-container">
+            <DeleteUserForm />
+            <GetUserInfoForm />
+            <RemoveRolesForm />
+            <AddRolesForm />
+            <CreateUserForm />
+          </div>
+        </header>
+      </div>
+    </NextUIProvider>
   );
 }
 

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

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import { Input, Button } from "@nextui-org/react";
+
+const AddRolesForm = () => {
+  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 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([]);
+      setNetID("");
+      setRoles("");
+    }
+  };
+
+  return (
+    <div>
+      <p>Add Roles</p>
+      <form onSubmit={handleSubmit}>
+        <div class="flex flex-col m-2">
+          <div class="mb-2">
+            <Input
+              placeholder="NetID"
+              value={netID}
+              onChange={handleNetIDChange}
+            />
+          </div>
+          <div class="mb-2">
+            <Input
+              placeholder="Roles"
+              value={roles}
+              onChange={handleRolesChange}
+            />
+          </div>
+          <Button type="submit">Submit</Button>
+        </div>
+      </form>
+    </div>
+  );
+};
+export default AddRolesForm;

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import "../../CommonStyles/styles.css";
+import { Input, Button } from "@nextui-org/react";
 
 const CreateUserForm = () => {
   const [netID, setNetID] = useState<string>("");
@@ -40,31 +40,35 @@ const CreateUserForm = () => {
   };
 
   return (
-    <>
-      <div>
-        <p>CreateUserForm</p>
-        <form onSubmit={handleSubmit}>
-          <div className="form-container">
-            <label>
-              NetID:
-              <textarea value={netID} onChange={handleNetIDChange} />
-            </label>
-            <label>
-              Roles:
-              <textarea value={roles} onChange={handleRolesChange} />
-            </label>
-            <label>
-              Perms:
-              <textarea
-                value={permissions}
-                onChange={handlePermissionsChange}
-              />
-            </label>
-            <input type="submit" value="Submit" />
+    <div>
+      <p>Create User</p>
+      <form onSubmit={handleSubmit}>
+        <div class="flex flex-col m-2">
+          <div class="mb-2">
+            <Input
+              placeholder="NetID"
+              value={netID}
+              onChange={handleNetIDChange}
+            />
           </div>
-        </form>
-      </div>
-    </>
+          <div class="mb-2">
+            <Input
+              placeholder="Roles"
+              value={roles}
+              onChange={handleRolesChange}
+            />
+          </div>
+          <div class="mb-2">
+            <Input
+              placeholder="Permissions"
+              value={permissions}
+              onChange={handlePermissionsChange}
+            />
+          </div>
+          <Button type="submit">Submit</Button>
+        </div>
+      </form>
+    </div>
   );
 };
 export default CreateUserForm;

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

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import { Input, Button } from "@nextui-org/react";
+
+const DeleteUserForm = () => {
+  const [netID, setNetID] = useState<string>("");
+
+  const handleNetIDChange = (event) => {
+    setNetID(event.target.value);
+  };
+
+  const handleSubmit = (event) => {
+    if (netID !== "") {
+      console.log(netID);
+      // Do something with the netID
+
+      event.preventDefault();
+      setNetID("");
+    }
+  };
+
+  return (
+    <div>
+      <p>Delete User</p>
+      <form onSubmit={handleSubmit}>
+        <div class="flex flex-col m-2">
+          <div class="mb-2">
+            <Input
+              placeholder="NetID"
+              value={netID}
+              onChange={handleNetIDChange}
+            />
+          </div>
+          <Button type="submit">Submit</Button>
+        </div>
+      </form>
+    </div>
+  );
+};
+export default DeleteUserForm;