Skip to content
This repository was archived by the owner on Aug 3, 2025. It is now read-only.

Commit 46d50e2

Browse files
PranjalChaitanyaPranjalChaitanya
authored
Merge pull request #4 from acm-uiuc/el/switch-styles-to-nextui
Switch styles to nextui
2 parents a346c55 + 2c0ff58 commit 46d50e2

File tree

17 files changed

+3064
-231
lines changed

17 files changed

+3064
-231
lines changed

‎admin-api-frontend/package-lock.json‎

Lines changed: 2801 additions & 49 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎admin-api-frontend/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@nextui-org/react": "^2.2.9",
67
"@testing-library/jest-dom": "^5.17.0",
78
"@testing-library/react": "^13.4.0",
89
"@testing-library/user-event": "^13.5.0",
10+
"framer-motion": "^11.0.5",
911
"react": "^18.2.0",
1012
"react-dom": "^18.2.0",
1113
"react-scripts": "5.0.1",

‎admin-api-frontend/src/App.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
@import 'tailwindcss/base';
2+
@import 'tailwindcss/components';
3+
@import 'tailwindcss/utilities';
4+
15
.App {
26
text-align: center;
37
}

‎admin-api-frontend/src/App.js‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,29 @@
11
import "./App.css";
2-
import GetUserInfoForm from "./components/FormsFolder/GetUserInfoForm/index.tsx";
3-
import AddRolesForm from "./components/FormsFolder/AddRolesForm/index.tsx";
4-
import RemoveRolesForm from "./components/FormsFolder/RemoveRolesForm/index.tsx";
5-
import CreateUserForm from "./components/FormsFolder/CreateUserForm/index.tsx";
6-
import DeleteUserForm from "./components/FormsFolder/DeleteUserForm/index.tsx";
2+
import GetUserInfoForm from "./components/GetUserInfoForm/index.tsx";
3+
import AddRolesForm from "./components/AddRolesForm/index.tsx";
4+
import RemoveRolesForm from "./components/RemoveRolesForm/index.tsx";
5+
import CreateUserForm from "./components/CreateUserForm/index.tsx";
6+
import DeleteUserForm from "./components/DeleteUserForm/index.tsx";
7+
8+
import { NextUIProvider } from "@nextui-org/react";
79

810
function App() {
911
return (
10-
<div className="App">
11-
<header className="App-header">
12-
<p>ACM Admin API </p>
13-
<p>also roles should be comma separated </p>
14-
<div className="Form-container">
15-
<CreateUserForm />
16-
<DeleteUserForm />
17-
<GetUserInfoForm />
18-
<RemoveRolesForm />
19-
<AddRolesForm />
20-
</div>
21-
</header>
22-
</div>
12+
<NextUIProvider>
13+
<div className="App">
14+
<header className="App-header">
15+
<p>ACM Admin API </p>
16+
<p>Roles and permissions should be comma separated </p>
17+
<div className="Form-container">
18+
<DeleteUserForm />
19+
<GetUserInfoForm />
20+
<RemoveRolesForm />
21+
<AddRolesForm />
22+
<CreateUserForm />
23+
</div>
24+
</header>
25+
</div>
26+
</NextUIProvider>
2327
);
2428
}
2529

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React, { useState } from "react";
2+
import { Input, Button } from "@nextui-org/react";
3+
4+
const AddRolesForm = () => {
5+
const [netID, setNetID] = useState<string>("");
6+
const [roles, setRoles] = useState<string>("");
7+
const [rolesSplit, setRolesSplit] = useState<string[]>([]);
8+
9+
const handleNetIDChange = (event) => {
10+
setNetID(event.target.value);
11+
};
12+
13+
const handleRolesChange = (event) => {
14+
setRoles(event.target.value);
15+
setRolesSplit(event.target.value.split(","));
16+
};
17+
18+
const handleSubmit = (event) => {
19+
if (netID !== "" && roles !== "") {
20+
console.log(netID);
21+
console.log(rolesSplit);
22+
console.log(permissionsSplit);
23+
// Do something with the netID, roles and permissions
24+
25+
event.preventDefault();
26+
setRolesSplit([]);
27+
setNetID("");
28+
setRoles("");
29+
}
30+
};
31+
32+
return (
33+
<div>
34+
<p>Add Roles</p>
35+
<form onSubmit={handleSubmit}>
36+
<div class="flex flex-col m-2">
37+
<div class="mb-2">
38+
<Input
39+
placeholder="NetID"
40+
value={netID}
41+
onChange={handleNetIDChange}
42+
/>
43+
</div>
44+
<div class="mb-2">
45+
<Input
46+
placeholder="Roles"
47+
value={roles}
48+
onChange={handleRolesChange}
49+
/>
50+
</div>
51+
<Button type="submit">Submit</Button>
52+
</div>
53+
</form>
54+
</div>
55+
);
56+
};
57+
export default AddRolesForm;

‎admin-api-frontend/src/components/CommonFormsFolder/CommonForm/index.tsx‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎admin-api-frontend/src/components/CommonFormsFolder/CommonFormWithRoles/index.tsx‎

Lines changed: 0 additions & 60 deletions
This file was deleted.

‎admin-api-frontend/src/components/CommonStyles/styles.css‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎admin-api-frontend/src/components/FormsFolder/CreateUserForm/index.tsx‎ renamed to ‎admin-api-frontend/src/components/CreateUserForm/index.tsx‎

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from "react";
2-
import "../../CommonStyles/styles.css";
2+
import { Input, Button } from "@nextui-org/react";
33

44
const CreateUserForm = () => {
55
const [netID, setNetID] = useState<string>("");
@@ -40,31 +40,35 @@ const CreateUserForm = () => {
4040
};
4141

4242
return (
43-
<>
44-
<div>
45-
<p>CreateUserForm</p>
46-
<form onSubmit={handleSubmit}>
47-
<div className="form-container">
48-
<label>
49-
NetID:
50-
<textarea value={netID} onChange={handleNetIDChange} />
51-
</label>
52-
<label>
53-
Roles:
54-
<textarea value={roles} onChange={handleRolesChange} />
55-
</label>
56-
<label>
57-
Perms:
58-
<textarea
59-
value={permissions}
60-
onChange={handlePermissionsChange}
61-
/>
62-
</label>
63-
<input type="submit" value="Submit" />
43+
<div>
44+
<p>Create User</p>
45+
<form onSubmit={handleSubmit}>
46+
<div class="flex flex-col m-2">
47+
<div class="mb-2">
48+
<Input
49+
placeholder="NetID"
50+
value={netID}
51+
onChange={handleNetIDChange}
52+
/>
6453
</div>
65-
</form>
66-
</div>
67-
</>
54+
<div class="mb-2">
55+
<Input
56+
placeholder="Roles"
57+
value={roles}
58+
onChange={handleRolesChange}
59+
/>
60+
</div>
61+
<div class="mb-2">
62+
<Input
63+
placeholder="Permissions"
64+
value={permissions}
65+
onChange={handlePermissionsChange}
66+
/>
67+
</div>
68+
<Button type="submit">Submit</Button>
69+
</div>
70+
</form>
71+
</div>
6872
);
6973
};
7074
export default CreateUserForm;

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React, { useState } from "react";
2+
import { Input, Button } from "@nextui-org/react";
3+
4+
const DeleteUserForm = () => {
5+
const [netID, setNetID] = useState<string>("");
6+
7+
const handleNetIDChange = (event) => {
8+
setNetID(event.target.value);
9+
};
10+
11+
const handleSubmit = (event) => {
12+
if (netID !== "") {
13+
console.log(netID);
14+
// Do something with the netID
15+
16+
event.preventDefault();
17+
setNetID("");
18+
}
19+
};
20+
21+
return (
22+
<div>
23+
<p>Delete User</p>
24+
<form onSubmit={handleSubmit}>
25+
<div class="flex flex-col m-2">
26+
<div class="mb-2">
27+
<Input
28+
placeholder="NetID"
29+
value={netID}
30+
onChange={handleNetIDChange}
31+
/>
32+
</div>
33+
<Button type="submit">Submit</Button>
34+
</div>
35+
</form>
36+
</div>
37+
);
38+
};
39+
export default DeleteUserForm;

0 commit comments

Comments
 (0)