feat: enhance project structure with server and workflow management
- Introduced a new server package with Fastify for handling API requests and workflows. - Implemented user authentication and authorization with JWT and cookie management. - Added endpoints for managing workflows, runs, and user accounts. - Established a dashboard for monitoring workflow status and statistics. - Included a script sandbox for executing user-defined scripts securely. - Updated README with setup instructions and API documentation. - Configured database migrations for user management. - Enhanced logging capabilities for better traceability.
This commit is contained in:
@@ -0,0 +1,194 @@
|
||||
import { useState } from "react";
|
||||
import { LuPencil, LuPlus, LuTrash2, LuX } from "react-icons/lu";
|
||||
import { errorMessage } from "../api/client.js";
|
||||
import {
|
||||
useCreateUser,
|
||||
useDeleteUser,
|
||||
useUpdateUser,
|
||||
useUsers,
|
||||
} from "../api/hooks.js";
|
||||
|
||||
export function UsersPage() {
|
||||
const { data: users = [], isLoading } = useUsers();
|
||||
const create = useCreateUser();
|
||||
const update = useUpdateUser();
|
||||
const del = useDeleteUser();
|
||||
const [mode, setMode] = useState(null);
|
||||
const [form, setForm] = useState({
|
||||
username: "",
|
||||
password: "",
|
||||
role: "operator",
|
||||
id: null,
|
||||
});
|
||||
const [confirmDelete, setConfirmDelete] = useState(null);
|
||||
|
||||
function openAdd() {
|
||||
setMode("add");
|
||||
setForm({ username: "", password: "", role: "operator", id: null });
|
||||
}
|
||||
|
||||
function openEdit(u) {
|
||||
setMode("edit");
|
||||
setForm({ username: u.username, password: "", role: u.role, id: u.id });
|
||||
}
|
||||
|
||||
function closeForm() {
|
||||
setMode(null);
|
||||
}
|
||||
|
||||
function onSubmit(e) {
|
||||
e.preventDefault();
|
||||
if (mode === "add") {
|
||||
create.mutate(
|
||||
{
|
||||
username: form.username,
|
||||
password: form.password,
|
||||
role: form.role,
|
||||
},
|
||||
{ onSuccess: closeForm },
|
||||
);
|
||||
} else {
|
||||
const body = { id: form.id, role: form.role };
|
||||
if (form.password) body.password = form.password;
|
||||
update.mutate(body, { onSuccess: closeForm });
|
||||
}
|
||||
}
|
||||
|
||||
const mutation = mode === "add" ? create : update;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<h1 className="text-xl font-semibold">Users</h1>
|
||||
<button type="button" className="btn btn-primary btn-sm" onClick={openAdd}>
|
||||
<LuPlus className="size-4" />
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<span className="loading loading-spinner" />
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Role</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((u) => (
|
||||
<tr key={u.id} className="hover">
|
||||
<td>{u.username}</td>
|
||||
<td>
|
||||
<span className="badge badge-sm">{u.role}</span>
|
||||
</td>
|
||||
<td className="text-right whitespace-nowrap">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs"
|
||||
title="Edit"
|
||||
onClick={() => openEdit(u)}
|
||||
>
|
||||
<LuPencil className="size-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs text-error"
|
||||
title="Delete"
|
||||
onClick={() => setConfirmDelete(u)}
|
||||
>
|
||||
<LuTrash2 className="size-4" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mode ? (
|
||||
<form onSubmit={onSubmit} className="fieldset bg-base-100 border-base-300 rounded-box max-w-md border p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<legend className="fieldset-legend">
|
||||
{mode === "add" ? "New user" : form.username}
|
||||
</legend>
|
||||
<button type="button" className="btn btn-ghost btn-sm btn-square" onClick={closeForm} aria-label="Close">
|
||||
<LuX className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
{mode === "add" ? (
|
||||
<>
|
||||
<label className="label">Username</label>
|
||||
<input
|
||||
className="input w-full"
|
||||
value={form.username}
|
||||
onChange={(e) => setForm({ ...form, username: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
<label className="label">{mode === "add" ? "Password" : "New password"}</label>
|
||||
<input
|
||||
type="password"
|
||||
className="input w-full"
|
||||
value={form.password}
|
||||
onChange={(e) => setForm({ ...form, password: e.target.value })}
|
||||
required={mode === "add"}
|
||||
minLength={mode === "add" ? 8 : undefined}
|
||||
placeholder={mode === "edit" ? "leave blank to keep" : ""}
|
||||
/>
|
||||
<label className="label">Role</label>
|
||||
<select
|
||||
className="select w-full"
|
||||
value={form.role}
|
||||
onChange={(e) => setForm({ ...form, role: e.target.value })}
|
||||
>
|
||||
<option value="operator">operator</option>
|
||||
<option value="admin">admin</option>
|
||||
</select>
|
||||
{mutation.isError ? (
|
||||
<p className="text-error text-sm">{errorMessage(mutation.error)}</p>
|
||||
) : null}
|
||||
<button type="submit" className="btn btn-primary mt-2" disabled={mutation.isPending}>
|
||||
Save
|
||||
</button>
|
||||
</form>
|
||||
) : null}
|
||||
|
||||
{confirmDelete ? (
|
||||
<dialog className="modal modal-open">
|
||||
<div className="modal-box">
|
||||
<h3 className="font-bold">Delete {confirmDelete.username}?</h3>
|
||||
{del.isError ? (
|
||||
<p className="text-error text-sm mt-2">{errorMessage(del.error)}</p>
|
||||
) : null}
|
||||
<div className="modal-action">
|
||||
<button type="button" className="btn btn-ghost" onClick={() => setConfirmDelete(null)}>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-error"
|
||||
disabled={del.isPending}
|
||||
onClick={() =>
|
||||
del.mutate(confirmDelete.id, { onSuccess: () => setConfirmDelete(null) })
|
||||
}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" className="modal-backdrop">
|
||||
<button type="button" onClick={() => setConfirmDelete(null)}>
|
||||
close
|
||||
</button>
|
||||
</form>
|
||||
</dialog>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user