feat: start notify + perms
This commit is contained in:
Malo BEAUCHAMPS
parent
8d43e34be4
commit
f42bc99a9d
25
package-lock.json
generated
25
package-lock.json
generated
@ -12,7 +12,8 @@
|
||||
"axios": "^1.7.7",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.26.1"
|
||||
"react-router-dom": "^6.26.1",
|
||||
"react-toastify": "^10.0.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.9.0",
|
||||
@ -1811,6 +1812,15 @@
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
||||
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
@ -3425,6 +3435,19 @@
|
||||
"react-dom": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-toastify": {
|
||||
"version": "10.0.6",
|
||||
"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.6.tgz",
|
||||
"integrity": "sha512-yYjp+omCDf9lhZcrZHKbSq7YMuK0zcYkDFTzfRFgTXkTFHZ1ToxwAonzA4JI5CxA91JpjFLmwEsZEgfYfOqI1A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"clsx": "^2.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
"axios": "^1.7.7",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.26.1"
|
||||
"react-router-dom": "^6.26.1",
|
||||
"react-toastify": "^10.0.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.9.0",
|
||||
|
||||
60
src/App.tsx
60
src/App.tsx
@ -10,37 +10,41 @@ import LoginPage from "./pages/Login";
|
||||
import PageTest from "./pages/PageTest";
|
||||
import CreateTp from "./pages/admin/CreateTp";
|
||||
import BulkUsers from "./pages/admin/BulkCreateUser";
|
||||
import Users from "./pages/admin/Users";
|
||||
import { ToastContainer } from "react-toastify";
|
||||
|
||||
function App() {
|
||||
const [showNotif, setShowNotif] = useState(false);
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Navigation>
|
||||
<Routes>
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
<Route path="/tps" element={<Practicals />} />
|
||||
<Route path="/tps/:id" element={<Practical />} />
|
||||
<Route path="/instances" element={<Instances />} />
|
||||
<Route path="/profile" element={<PageTest />} />
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/admin/jdmi" element={<BulkUsers />} />
|
||||
<Route path="/admin/tps" element={<CreateTp />} />
|
||||
<Route path="/settings" element={<CreateTp />} />
|
||||
</Routes>
|
||||
</Navigation>
|
||||
const [showNotif, setShowNotif] = useState(false);
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Navigation>
|
||||
<Routes>
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
<Route path="/tps" element={<Practicals />} />
|
||||
<Route path="/tps/:id" element={<Practical />} />
|
||||
<Route path="/instances" element={<Instances />} />
|
||||
<Route path="/profile" element={<PageTest />} />
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/admin/jdmi" element={<BulkUsers />} />
|
||||
<Route path="/admin/tps" element={<CreateTp />} />
|
||||
<Route path="/admin/users" element={<Users />} />
|
||||
<Route path="/settings" element={<CreateTp />} />
|
||||
</Routes>
|
||||
</Navigation>
|
||||
|
||||
{showNotif && (
|
||||
<div className="toast toast-top toast-end">
|
||||
<div className="alert alert-success">
|
||||
<span>Message sent successfully.</span>
|
||||
<button className="btn btn-sm" onClick={() => setShowNotif(false)}>
|
||||
close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</BrowserRouter>
|
||||
);
|
||||
<ToastContainer />
|
||||
{showNotif && (
|
||||
<div className="toast toast-top toast-end">
|
||||
<div className="alert alert-success">
|
||||
<span>Message sent successfully.</span>
|
||||
<button className="btn btn-sm" onClick={() => setShowNotif(false)}>
|
||||
close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@ -27,6 +27,13 @@ const Navigation: React.FC<NavigationProps> = ({
|
||||
localStorage.getItem("theme") ? localStorage.getItem("theme") : "dark",
|
||||
);
|
||||
|
||||
const logout = () => {
|
||||
setIsDrawerOpen(!isDrawerOpen);
|
||||
const removeCookie = `quarkus-credential=; Max-Age=0;path=/`;
|
||||
document.cookie = removeCookie;
|
||||
localStorage.removeItem("root");
|
||||
};
|
||||
|
||||
const handleToggle = (e) => {
|
||||
if (theme === "light") {
|
||||
setTheme("dark");
|
||||
@ -49,48 +56,50 @@ const Navigation: React.FC<NavigationProps> = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
{user && (
|
||||
<>
|
||||
<div className="app h-screen">
|
||||
<div className="drawer">
|
||||
<input
|
||||
id="my-drawer"
|
||||
type="checkbox"
|
||||
className="drawer-toggle"
|
||||
checked={isDrawerOpen}
|
||||
/>
|
||||
<div className="drawer-content h-full">
|
||||
<div className="p-6 flex justify-between">
|
||||
<div className="btn btn-ghost" onClick={toggleDrawer}>
|
||||
<Bars3Icon className="size-6" />
|
||||
</div>
|
||||
<label className="swap swap-rotate">
|
||||
<input type="checkbox" onChange={handleToggle} />
|
||||
|
||||
<SunIcon className="size-6 swap-off" />
|
||||
<MoonIcon className="size-6 swap-on" />
|
||||
</label>
|
||||
<div className="app h-screen">
|
||||
<div className="drawer">
|
||||
<input
|
||||
id="my-drawer"
|
||||
type="checkbox"
|
||||
className="drawer-toggle"
|
||||
checked={isDrawerOpen}
|
||||
/>
|
||||
<div className="drawer-content h-full">
|
||||
{location.pathname !== "/login" && (
|
||||
<div className="p-6 flex justify-between">
|
||||
<div className="btn btn-ghost" onClick={toggleDrawer}>
|
||||
<Bars3Icon className="size-6" />
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
<label className="swap swap-rotate">
|
||||
<input type="checkbox" onChange={handleToggle} />
|
||||
|
||||
<div className="drawer-side">
|
||||
<div className="drawer-overlay" onClick={toggleDrawer}></div>
|
||||
<div className="h-full menu bg-base-200 text-base-content w-80">
|
||||
{user.username.trim() !== "" ? (
|
||||
<li>
|
||||
<div className="dropdown dropdown-bottom h-full">
|
||||
<div
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
className="flex avatar items-center space-x-4 w-64"
|
||||
>
|
||||
<a>{user.username}</a>
|
||||
</div>
|
||||
<ul
|
||||
tabIndex={0}
|
||||
className="dropdown-content menu bg-base-100 rounded-box z-[1] w-72 shadow"
|
||||
>
|
||||
<SunIcon className="size-6 swap-off" />
|
||||
<MoonIcon className="size-6 swap-on" />
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{location.pathname !== "/login" && (
|
||||
<div className="drawer-side">
|
||||
<div className="drawer-overlay" onClick={toggleDrawer}></div>
|
||||
<div className="h-full menu bg-base-200 text-base-content w-80">
|
||||
<li>
|
||||
<div className="dropdown dropdown-right h-full">
|
||||
<div
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
className="flex avatar items-center space-x-4 w-64"
|
||||
>
|
||||
<a>{localStorage.getItem("username")}</a>
|
||||
</div>
|
||||
<ul
|
||||
tabIndex={0}
|
||||
className="dropdown-content menu bg-base-100 rounded-box z-[1] w-72 shadow"
|
||||
>
|
||||
{false && (
|
||||
<>
|
||||
<li>
|
||||
<Link to="/profile" onClick={toggleDrawer}>
|
||||
Profile
|
||||
@ -102,98 +111,104 @@ const Navigation: React.FC<NavigationProps> = ({
|
||||
</Link>
|
||||
</li>
|
||||
<div className="divider" onClick={toggleDrawer}></div>
|
||||
<li>
|
||||
<Link to="login" onClick={toggleDrawer}>
|
||||
Log Out
|
||||
</>
|
||||
)}
|
||||
<li>
|
||||
<Link to="login" onClick={logout}>
|
||||
Log Out
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
{localStorage.getItem("root") && (
|
||||
<li>
|
||||
<details open={false}>
|
||||
<summary>Admin</summary>
|
||||
<ul>
|
||||
<li>
|
||||
<div>
|
||||
<Link
|
||||
to="/admin"
|
||||
onClick={toggleDrawer}
|
||||
className="w-60"
|
||||
>
|
||||
Admin
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
) : (
|
||||
<li>
|
||||
<Link to="login" onClick={toggleDrawer}>
|
||||
Log In
|
||||
</Link>
|
||||
</li>
|
||||
)}
|
||||
{user && user.roles.includes("root") && (
|
||||
<li>
|
||||
<details open={false}>
|
||||
<summary>Admin</summary>
|
||||
<ul>
|
||||
<li>
|
||||
<div>
|
||||
<Link to="/admin" onClick={toggleDrawer}>
|
||||
Admin
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<Link to="/admin/tps" onClick={toggleDrawer}>
|
||||
Create Tp
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<Link to="/admin/tps" onClick={toggleDrawer}>
|
||||
Create User
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<Link to="/admin/jdmi" onClick={toggleDrawer}>
|
||||
Bulk user creation
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
)}
|
||||
{user && user.username.trim() !== "" && (
|
||||
<>
|
||||
<li>
|
||||
<div>
|
||||
<ChartPieIcon className="size-6" />
|
||||
<Link to="/" onClick={toggleDrawer}>
|
||||
Dashboard
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<DocumentTextIcon className="size-6" />
|
||||
<Link to="/tps" onClick={toggleDrawer}>
|
||||
TPs
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<CommandLineIcon className="size-6" />
|
||||
<Link to="/instances" onClick={toggleDrawer}>
|
||||
Instances
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div onClick={toggleDrawer}>
|
||||
<EnvelopeIcon className="size-6" />
|
||||
<Link to="/messages">Messages</Link>
|
||||
</div>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<Link
|
||||
to="/admin/tps"
|
||||
onClick={toggleDrawer}
|
||||
className="w-60"
|
||||
>
|
||||
Create Tp
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<Link
|
||||
to="/admin/users"
|
||||
onClick={toggleDrawer}
|
||||
className="w-60"
|
||||
>
|
||||
Users
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<Link
|
||||
to="/admin/jdmi"
|
||||
onClick={toggleDrawer}
|
||||
className="w-60"
|
||||
>
|
||||
Bulk user creation
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
)}
|
||||
<li>
|
||||
<div>
|
||||
<ChartPieIcon className="size-6" />
|
||||
<Link to="/" onClick={toggleDrawer}>
|
||||
Dashboard
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<DocumentTextIcon className="size-6" />
|
||||
<Link to="/tps" onClick={toggleDrawer}>
|
||||
TPs
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<CommandLineIcon className="size-6" />
|
||||
<Link to="/instances" onClick={toggleDrawer}>
|
||||
Instances
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div onClick={toggleDrawer}>
|
||||
<EnvelopeIcon className="size-6" />
|
||||
<Link to="/messages">Messages</Link>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -22,6 +22,12 @@ const LoginPage: React.FC = () => {
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.status === 200) {
|
||||
axios.get("/api/users/me").then((res) => {
|
||||
localStorage.setItem("username", res.data.username);
|
||||
if (res.data.roles.includes("root")) {
|
||||
localStorage.setItem("root", true);
|
||||
}
|
||||
});
|
||||
navigate(from);
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,12 +1,18 @@
|
||||
import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
|
||||
import { ArrowDownTrayIcon, ClipboardIcon } from "@heroicons/react/24/outline";
|
||||
import axios from "axios";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
function Practical() {
|
||||
const { id } = useParams();
|
||||
const [tp, setTp] = useState(null);
|
||||
|
||||
const copyText = (copy: string) => {
|
||||
navigator.clipboard.writeText(copy);
|
||||
toast("Copied!");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log("akljsbcascb");
|
||||
axios.get(`/api/tps/${id}`).then((res) => {
|
||||
@ -60,14 +66,30 @@ function Practical() {
|
||||
<h2 className="text-2xl font-semibold text-blue-600 mb-2">
|
||||
Resources
|
||||
</h2>
|
||||
<ul className="space-y-4">
|
||||
<li className="flex justify-between">
|
||||
<ul className="space-y-2">
|
||||
<li className="flex justify-between align-middle items-center">
|
||||
<span>SSH:</span>
|
||||
<span className="font-medium">{tp.ssh}</span>
|
||||
<div
|
||||
className="flex gap-2 items-center"
|
||||
onClick={() => copyText(tp.ssh)}
|
||||
>
|
||||
<span className="font-medium">{tp.ssh}</span>
|
||||
<div className="h-8 w-8 hover:bg-base-100 align-middle cursor-pointer flex items-center justify-center rounded">
|
||||
<ClipboardIcon className="size-6" />
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex justify-between">
|
||||
<li className="flex justify-between align-middle items-center">
|
||||
<span>Password:</span>
|
||||
<span className="font-medium">{tp.pwd}</span>
|
||||
<div
|
||||
className="flex gap-2 items-center"
|
||||
onClick={() => navigator.clipboard.writeText(tp.pwd)}
|
||||
>
|
||||
<span className="font-normal">{tp.pwd}</span>
|
||||
<div className="h-8 w-8 hover:bg-base-100 align-middle cursor-pointer flex items-center justify-center rounded">
|
||||
<ClipboardIcon className="size-6" />
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -1,101 +1,114 @@
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
function BulkUsers() {
|
||||
const [file, setFile] = useState(null);
|
||||
const [userData, setUserData] = useState([]);
|
||||
const [practical, setPractical] = useState("0");
|
||||
const navigate = useNavigate();
|
||||
const [file, setFile] = useState(null);
|
||||
const [userData, setUserData] = useState([]);
|
||||
const [practical, setPractical] = useState("0");
|
||||
const navigate = useNavigate();
|
||||
const [tps, setTps] = useState([]);
|
||||
|
||||
const handlePracticalChange = (e) => {
|
||||
setPractical(e.target.value);
|
||||
}
|
||||
const handlePracticalChange = (e) => {
|
||||
setPractical(e.target.value);
|
||||
};
|
||||
|
||||
const handleFileChange = (event) => {
|
||||
const selectedFile = event.target.files[0];
|
||||
if (selectedFile && selectedFile.type === 'text/csv') {
|
||||
setFile(selectedFile);
|
||||
parseCSV(selectedFile);
|
||||
} else {
|
||||
alert('Please upload a valid CSV file.');
|
||||
}
|
||||
useEffect(() => {
|
||||
axios.get("/api/tps").then((res) => {
|
||||
setTps(res.data);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleFileChange = (event) => {
|
||||
const selectedFile = event.target.files[0];
|
||||
// if (selectedFile && selectedFile.type === "text/csv") {
|
||||
setFile(selectedFile);
|
||||
parseCSV(selectedFile);
|
||||
// } else {
|
||||
// alert("Please upload a valid CSV file.");
|
||||
// }
|
||||
};
|
||||
|
||||
const parseCSV = (file) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
const text = event.target.result;
|
||||
const rows = text.split("\n").map((row) => row.split(","));
|
||||
const formattedData = rows.map((row) => ({
|
||||
name: row[0],
|
||||
email: row[1],
|
||||
// Add other fields as necessary
|
||||
}));
|
||||
setUserData(formattedData);
|
||||
};
|
||||
reader.readAsText(file);
|
||||
};
|
||||
|
||||
const parseCSV = (file) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
const text = event.target.result;
|
||||
const rows = text.split('\n').map((row) => row.split(','));
|
||||
const formattedData = rows.map((row) => ({
|
||||
name: row[0],
|
||||
email: row[1],
|
||||
// Add other fields as necessary
|
||||
}));
|
||||
setUserData(formattedData);
|
||||
};
|
||||
reader.readAsText(file);
|
||||
};
|
||||
const handleSubmit = () => {
|
||||
// Handle submission logic (e.g., sending data to the backend)
|
||||
console.log(practical);
|
||||
axios
|
||||
.post("/api/users/jdmi", {
|
||||
users: userData.filter((user) => user.name !== ""),
|
||||
tpId: practical,
|
||||
})
|
||||
.then(() => navigate(`/admin/users`));
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
// Handle submission logic (e.g., sending data to the backend)
|
||||
axios.post("/api/users/jdmi", userData.filter(user => user.name !== "")).then(res => navigate(`/tps/${res.data.id}`));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-md mx-auto p-5">
|
||||
<h2 className="text-2xl font-bold mb-4">Bulk User Creation</h2>
|
||||
<input
|
||||
type="file"
|
||||
accept=".csv"
|
||||
onChange={handleFileChange}
|
||||
className="file-input file-input-bordered w-full mb-4"
|
||||
/>
|
||||
{userData.length > 0 && (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
{/* Add other headers as necessary */}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{userData.map((user, index) => (
|
||||
<tr key={index}>
|
||||
<td>{user.name}</td>
|
||||
<td>{user.email}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-gray-700 font-semibold mb-2">
|
||||
Tp:
|
||||
</label>
|
||||
<select
|
||||
name="practical"
|
||||
value={practical}
|
||||
onChange={handlePracticalChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="0">Empty</option>
|
||||
<option value="1">Bot Discord</option>
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="btn btn-primary mt-4"
|
||||
disabled={userData.length === 0}
|
||||
>
|
||||
Create Users
|
||||
</button>
|
||||
return (
|
||||
<div className="max-w-md mx-auto p-5">
|
||||
<h2 className="text-2xl font-bold mb-4">Bulk User Creation</h2>
|
||||
<input
|
||||
type="file"
|
||||
accept=".csv"
|
||||
onChange={handleFileChange}
|
||||
className="file-input file-input-bordered w-full mb-4"
|
||||
/>
|
||||
{userData.length > 0 && (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
{/* Add other headers as necessary */}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{userData.map((user, index) => (
|
||||
<tr key={index}>
|
||||
<td>{user.name}</td>
|
||||
<td>{user.email}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-gray-700 font-semibold mb-2">Tp:</label>
|
||||
<select
|
||||
name="practical"
|
||||
value={practical}
|
||||
onChange={handlePracticalChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
return <option value="0">Empty</option>;
|
||||
{tps.map((tp) => {
|
||||
return <option value={tp.id}>{tp.name}</option>;
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="btn btn-primary mt-4"
|
||||
disabled={userData.length === 0}
|
||||
>
|
||||
Create Users
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BulkUsers;
|
||||
|
||||
63
src/pages/admin/Users.tsx
Normal file
63
src/pages/admin/Users.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
import axios from "axios";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
function Users() {
|
||||
const [users, setUsers] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
axios.get("/api/users").then((res) => {
|
||||
setUsers(res.data);
|
||||
console.log(res.data)
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleEditUser = (userId) => {
|
||||
// Logic for editing the user (e.g., opening a modal)
|
||||
alert(`Edit user with ID: ${userId}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6">
|
||||
<div className="bg-white shadow-lg rounded-lg p-6">
|
||||
<h1 className="text-3xl font-bold text-blue-600 mb-6">Manage Users</h1>
|
||||
|
||||
{/* Users Table */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="p-4">#</th>
|
||||
<th className="p-4">Name</th>
|
||||
<th className="p-4">Email</th>
|
||||
<th className="p-4">Roles</th>
|
||||
<th className="p-4">Instances</th>
|
||||
<th className="p-4">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((user, index) => (
|
||||
<tr key={user.id} className="hover:bg-gray-100">
|
||||
<td className="p-4">{index + 1}</td>
|
||||
<td className="p-4">{user.name}</td>
|
||||
<td className="p-4">{user.email}</td>
|
||||
<td className="p-4">{user.roles}</td>
|
||||
<td className="p-4">{user.instances.length}</td>
|
||||
<td className="p-4">
|
||||
<button
|
||||
className="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-400 mr-2"
|
||||
onClick={() => handleEditUser(user.id)}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Users;
|
||||
Loading…
x
Reference in New Issue
Block a user