ThatGuyJack/nginx-proxy-manager
1
0
Fork 0
mirror of https://github.com/NginxProxyManager/nginx-proxy-manager.git synced 2025-11-02 00:33:33 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use a modal manager

Browse Source
This commit is contained in:
Jamie Curnow
2025-10-14 17:49:56 +10:00
parent e6f7ae3fba
commit 7af01d0fc7
32 changed files with 291 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/pages/Access/Empty.tsx
View File

@@ -14,7 +14,7 @@ export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
<div className="text-center my-4">
{isFiltered ? (
<h2>
<T id="empty.search" />
<T id="empty-search" />
</h2>
) : (
<>

44
frontend/src/pages/Access/TableWrapper.tsx
View File

@@ -5,14 +5,12 @@ import { deleteAccessList } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useAccessLists } from "src/hooks";
import { intl, T } from "src/locale";
import { AccessListModal, DeleteConfirmModal } from "src/modals";
import { showAccessListModal, showDeleteConfirmModal } from "src/modals";
import { showSuccess } from "src/notifications";
import Table from "./Table";
export default function TableWrapper() {
const [search, setSearch] = useState("");
const [editId, setEditId] = useState(0 as number | "new");
const [deleteId, setDeleteId] = useState(0);
const { isFetching, isLoading, isError, error, data } = useAccessLists(["owner", "items", "clients"]);
if (isLoading) {
@@ -23,21 +21,15 @@ export default function TableWrapper() {
return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
}
const handleDelete = async () => {
await deleteAccessList(deleteId);
const handleDelete = async (id: number) => {
await deleteAccessList(id);
showSuccess(intl.formatMessage({ id: "notification.access-deleted" }));
};
let filtered = null;
if (search && data) {
filtered = data?.filter((_item) => {
return true;
// TODO
// return (
// `${item.incomingPort}`.includes(search) ||
// `${item.forwardingPort}`.includes(search) ||
// item.forwardingHost.includes(search)
// );
filtered = data?.filter((item) => {
return item.name.toLowerCase().includes(search);
});
} else if (search !== "") {
// this can happen if someone deletes the last item while searching
@@ -70,7 +62,7 @@ export default function TableWrapper() {
onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
/>
</div>
<Button size="sm" className="btn-cyan" onClick={() => setEditId("new")}>
<Button size="sm" className="btn-cyan" onClick={() => showAccessListModal("new")}>
<T id="access.add" />
</Button>
</div>
@@ -82,21 +74,17 @@ export default function TableWrapper() {
data={filtered ?? data ?? []}
isFetching={isFetching}
isFiltered={!!filtered}
onEdit={(id: number) => setEditId(id)}
onDelete={(id: number) => setDeleteId(id)}
onNew={() => setEditId("new")}
onEdit={(id: number) => showAccessListModal(id)}
onDelete={(id: number) =>
showDeleteConfirmModal({
title: "access.delete.title",
onConfirm: () => handleDelete(id),
invalidations: [["access-lists"], ["access-list", id]],
children: <T id="access.delete.content" />,
})
}
onNew={() => showAccessListModal("new")}
/>
{editId ? <AccessListModal id={editId} onClose={() => setEditId(0)} /> : null}
{deleteId ? (
<DeleteConfirmModal
title="access.delete.title"
onConfirm={handleDelete}
onClose={() => setDeleteId(0)}
invalidations={[["access-lists"], ["access-list", deleteId]]}
>
<T id="access.delete.content" />
</DeleteConfirmModal>
) : null}
</div>
</div>
);

7
frontend/src/pages/AuditLog/TableWrapper.tsx
View File

@@ -1,13 +1,11 @@
import { useState } from "react";
import Alert from "react-bootstrap/Alert";
import { LoadingPage } from "src/components";
import { useAuditLogs } from "src/hooks";
import { T } from "src/locale";
import { EventDetailsModal } from "src/modals";
import { showEventDetailsModal } from "src/modals";
import Table from "./Table";
export default function TableWrapper() {
const [eventId, setEventId] = useState(0);
const { isFetching, isLoading, isError, error, data } = useAuditLogs(["user"]);
if (isLoading) {
@@ -31,8 +29,7 @@ export default function TableWrapper() {
</div>
</div>
</div>
<Table data={data ?? []} isFetching={isFetching} onSelectItem={setEventId} />
{eventId ? <EventDetailsModal id={eventId} onClose={() => setEventId(0)} /> : null}
<Table data={data ?? []} isFetching={isFetching} onSelectItem={showEventDetailsModal} />
</div>
</div>
);

2
frontend/src/pages/Certificates/Empty.tsx
View File

@@ -14,7 +14,7 @@ export default function Empty({ tableInstance, onNew, onNewCustom, isFiltered }:
<div className="text-center my-4">
{isFiltered ? (
<h2>
<T id="empty.search" />
<T id="empty-search" />
</h2>
) : (
<>

2
frontend/src/pages/Nginx/DeadHosts/Empty.tsx
View File

@@ -14,7 +14,7 @@ export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
<div className="text-center my-4">
{isFiltered ? (
<h2>
<T id="empty.search" />
<T id="empty-search" />
</h2>
) : (
<>

34
frontend/src/pages/Nginx/DeadHosts/TableWrapper.tsx
View File

@@ -6,15 +6,13 @@ import { deleteDeadHost, toggleDeadHost } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useDeadHosts } from "src/hooks";
import { intl, T } from "src/locale";
import { DeadHostModal, DeleteConfirmModal } from "src/modals";
import { showDeadHostModal, showDeleteConfirmModal } from "src/modals";
import { showSuccess } from "src/notifications";
import Table from "./Table";
export default function TableWrapper() {
const queryClient = useQueryClient();
const [search, setSearch] = useState("");
const [deleteId, setDeleteId] = useState(0);
const [editId, setEditId] = useState(0 as number | "new");
const { isFetching, isLoading, isError, error, data } = useDeadHosts(["owner", "certificate"]);
if (isLoading) {
@@ -25,8 +23,8 @@ export default function TableWrapper() {
return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
}
const handleDelete = async () => {
await deleteDeadHost(deleteId);
const handleDelete = async (id: number) => {
await deleteDeadHost(id);
showSuccess(intl.formatMessage({ id: "notification.host-deleted" }));
};
@@ -73,7 +71,7 @@ export default function TableWrapper() {
onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
/>
</div>
<Button size="sm" className="btn-red" onClick={() => setEditId("new")}>
<Button size="sm" className="btn-red" onClick={() => showDeadHostModal("new")}>
<T id="dead-hosts.add" />
</Button>
</div>
@@ -85,22 +83,18 @@ export default function TableWrapper() {
data={filtered ?? data ?? []}
isFiltered={!!search}
isFetching={isFetching}
onEdit={(id: number) => setEditId(id)}
onDelete={(id: number) => setDeleteId(id)}
onEdit={(id: number) => showDeadHostModal(id)}
onDelete={(id: number) =>
showDeleteConfirmModal({
title: "dead-host.delete.title",
onConfirm: () => handleDelete(id),
invalidations: [["dead-hosts"], ["dead-host", id]],
children: <T id="dead-host.delete.content" />,
})
}
onDisableToggle={handleDisableToggle}
onNew={() => setEditId("new")}
onNew={() => showDeadHostModal("new")}
/>
{editId ? <DeadHostModal id={editId} onClose={() => setEditId(0)} /> : null}
{deleteId ? (
<DeleteConfirmModal
title="dead-host.delete.title"
onConfirm={handleDelete}
onClose={() => setDeleteId(0)}
invalidations={[["dead-hosts"], ["dead-host", deleteId]]}
>
<T id="dead-host.delete.content" />
</DeleteConfirmModal>
) : null}
</div>
</div>
);

2
frontend/src/pages/Nginx/ProxyHosts/Empty.tsx
View File

@@ -14,7 +14,7 @@ export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
<div className="text-center my-4">
{isFiltered ? (
<h2>
<T id="empty.search" />
<T id="empty-search" />
</h2>
) : (
<>

35
frontend/src/pages/Nginx/ProxyHosts/TableWrapper.tsx
View File

@@ -6,15 +6,13 @@ import { deleteProxyHost, toggleProxyHost } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useProxyHosts } from "src/hooks";
import { intl, T } from "src/locale";
import { DeleteConfirmModal, ProxyHostModal } from "src/modals";
import { showDeleteConfirmModal, showProxyHostModal } from "src/modals";
import { showSuccess } from "src/notifications";
import Table from "./Table";
export default function TableWrapper() {
const queryClient = useQueryClient();
const [search, setSearch] = useState("");
const [deleteId, setDeleteId] = useState(0);
const [editId, setEditId] = useState(0 as number | "new");
const { isFetching, isLoading, isError, error, data } = useProxyHosts(["owner", "access_list", "certificate"]);
if (isLoading) {
@@ -25,8 +23,8 @@ export default function TableWrapper() {
return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
}
const handleDelete = async () => {
await deleteProxyHost(deleteId);
const handleDelete = async (id: number) => {
await deleteProxyHost(id);
showSuccess(intl.formatMessage({ id: "notification.host-deleted" }));
};
@@ -74,9 +72,10 @@ export default function TableWrapper() {
type="text"
className="form-control form-control-sm"
autoComplete="off"
onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
/>
</div>
<Button size="sm" className="btn-lime">
<Button size="sm" className="btn-lime" onClick={() => showProxyHostModal("new")}>
<T id="proxy-hosts.add" />
</Button>
</div>
@@ -88,22 +87,18 @@ export default function TableWrapper() {
data={filtered ?? data ?? []}
isFiltered={!!search}
isFetching={isFetching}
onEdit={(id: number) => setEditId(id)}
onDelete={(id: number) => setDeleteId(id)}
onEdit={(id: number) => showProxyHostModal(id)}
onDelete={(id: number) =>
showDeleteConfirmModal({
title: "proxy-host.delete.title",
onConfirm: () => handleDelete(id),
invalidations: [["proxy-hosts"], ["proxy-host", id]],
children: <T id="proxy-host.delete.content" />,
})
}
onDisableToggle={handleDisableToggle}
onNew={() => setEditId("new")}
onNew={() => showProxyHostModal("new")}
/>
{editId ? <ProxyHostModal id={editId} onClose={() => setEditId(0)} /> : null}
{deleteId ? (
<DeleteConfirmModal
title="proxy-host.delete.title"
onConfirm={handleDelete}
onClose={() => setDeleteId(0)}
invalidations={[["proxy-hosts"], ["proxy-host", deleteId]]}
>
<T id="proxy-host.delete.content" />
</DeleteConfirmModal>
) : null}
</div>
</div>
);

2
frontend/src/pages/Nginx/RedirectionHosts/Empty.tsx
View File

@@ -14,7 +14,7 @@ export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
<div className="text-center my-4">
{isFiltered ? (
<h2>
<T id="empty.search" />
<T id="empty-search" />
</h2>
) : (
<>

38
frontend/src/pages/Nginx/RedirectionHosts/TableWrapper.tsx
View File

@@ -6,15 +6,13 @@ import { deleteRedirectionHost, toggleRedirectionHost } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useRedirectionHosts } from "src/hooks";
import { intl, T } from "src/locale";
import { DeleteConfirmModal, RedirectionHostModal } from "src/modals";
import { showDeleteConfirmModal, showRedirectionHostModal } from "src/modals";
import { showSuccess } from "src/notifications";
import Table from "./Table";
export default function TableWrapper() {
const queryClient = useQueryClient();
const [search, setSearch] = useState("");
const [deleteId, setDeleteId] = useState(0);
const [editId, setEditId] = useState(0 as number | "new");
const { isFetching, isLoading, isError, error, data } = useRedirectionHosts(["owner", "certificate"]);
if (isLoading) {
@@ -25,8 +23,8 @@ export default function TableWrapper() {
return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
}
const handleDelete = async () => {
await deleteRedirectionHost(deleteId);
const handleDelete = async (id: number) => {
await deleteRedirectionHost(id);
showSuccess(intl.formatMessage({ id: "notification.host-deleted" }));
};
@@ -76,7 +74,11 @@ export default function TableWrapper() {
onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
/>
</div>
<Button size="sm" className="btn-yellow" onClick={() => setEditId("new")}>
<Button
size="sm"
className="btn-yellow"
onClick={() => showRedirectionHostModal("new")}
>
<T id="redirection-hosts.add" />
</Button>
</div>
@@ -88,22 +90,18 @@ export default function TableWrapper() {
data={filtered ?? data ?? []}
isFiltered={!!search}
isFetching={isFetching}
onEdit={(id: number) => setEditId(id)}
onDelete={(id: number) => setDeleteId(id)}
onEdit={(id: number) => showRedirectionHostModal(id)}
onDelete={(id: number) =>
showDeleteConfirmModal({
title: "redirection-host.delete.title",
onConfirm: () => handleDelete(id),
invalidations: [["redirection-hosts"], ["redirection-host", id]],
children: <T id="redirection-host.delete.content" />,
})
}
onDisableToggle={handleDisableToggle}
onNew={() => setEditId("new")}
onNew={() => showRedirectionHostModal("new")}
/>
{editId ? <RedirectionHostModal id={editId} onClose={() => setEditId(0)} /> : null}
{deleteId ? (
<DeleteConfirmModal
title="redirection-host.delete.title"
onConfirm={handleDelete}
onClose={() => setDeleteId(0)}
invalidations={[["redirection-hosts"], ["redirection-host", deleteId]]}
>
<T id="redirection-host.delete.content" />
</DeleteConfirmModal>
) : null}
</div>
</div>
);

2
frontend/src/pages/Nginx/Streams/Empty.tsx
View File

@@ -14,7 +14,7 @@ export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
<div className="text-center my-4">
{isFiltered ? (
<h2>
<T id="empty.search" />
<T id="empty-search" />
</h2>
) : (
<>

35
frontend/src/pages/Nginx/Streams/TableWrapper.tsx
View File

@@ -6,15 +6,14 @@ import { deleteStream, toggleStream } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useStreams } from "src/hooks";
import { intl, T } from "src/locale";
import { DeleteConfirmModal, StreamModal } from "src/modals";
import { showDeleteConfirmModal, showStreamModal } from "src/modals";
import { showSuccess } from "src/notifications";
import Table from "./Table";
export default function TableWrapper() {
const queryClient = useQueryClient();
const [search, setSearch] = useState("");
const [editId, setEditId] = useState(0 as number | "new");
const [deleteId, setDeleteId] = useState(0);
const [_deleteId, _setDeleteIdd] = useState(0);
const { isFetching, isLoading, isError, error, data } = useStreams(["owner", "certificate"]);
if (isLoading) {
@@ -25,8 +24,8 @@ export default function TableWrapper() {
return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
}
const handleDelete = async () => {
await deleteStream(deleteId);
const handleDelete = async (id: number) => {
await deleteStream(id);
showSuccess(intl.formatMessage({ id: "notification.stream-deleted" }));
};
@@ -79,7 +78,7 @@ export default function TableWrapper() {
onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
/>
</div>
<Button size="sm" className="btn-blue" onClick={() => setEditId("new")}>
<Button size="sm" className="btn-blue" onClick={() => showStreamModal("new")}>
<T id="streams.add" />
</Button>
</div>
@@ -91,22 +90,18 @@ export default function TableWrapper() {
data={filtered ?? data ?? []}
isFetching={isFetching}
isFiltered={!!filtered}
onEdit={(id: number) => setEditId(id)}
onDelete={(id: number) => setDeleteId(id)}
onEdit={(id: number) => showStreamModal(id)}
onDelete={(id: number) =>
showDeleteConfirmModal({
title: "stream.delete.title",
onConfirm: () => handleDelete(id),
invalidations: [["streams"], ["stream", id]],
children: <T id="stream.delete.content" />,
})
}
onDisableToggle={handleDisableToggle}
onNew={() => setEditId("new")}
onNew={() => showStreamModal("new")}
/>
{editId ? <StreamModal id={editId} onClose={() => setEditId(0)} /> : null}
{deleteId ? (
<DeleteConfirmModal
title="stream.delete.title"
onConfirm={handleDelete}
onClose={() => setDeleteId(0)}
invalidations={[["streams"], ["stream", deleteId]]}
>
<T id="stream.delete.content" />
</DeleteConfirmModal>
) : null}
</div>
</div>
);

4
frontend/src/pages/Users/Table.tsx
View File

@@ -87,7 +87,7 @@ export default function Table({
},
}),
columnHelper.display({
id: "id", // todo: not needed for a display?
id: "id",
cell: (info: any) => {
return (
<span className="dropdown">
@@ -112,7 +112,7 @@ export default function Table({
}}
>
<IconEdit size={16} />
<T id="users.edit" />
<T id="user.edit" />
</a>
{currentUserId !== info.row.original.id ? (
<>

46
frontend/src/pages/Users/TableWrapper.tsx
View File

@@ -6,17 +6,13 @@ import { deleteUser, toggleUser } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useUser, useUsers } from "src/hooks";
import { intl, T } from "src/locale";
import { DeleteConfirmModal, PermissionsModal, SetPasswordModal, UserModal } from "src/modals";
import { showDeleteConfirmModal, showPermissionsModal, showSetPasswordModal, showUserModal } from "src/modals";
import { showSuccess } from "src/notifications";
import Table from "./Table";
export default function TableWrapper() {
const queryClient = useQueryClient();
const [search, setSearch] = useState("");
const [editUserId, setEditUserId] = useState(0 as number | "new");
const [editUserPermissionsId, setEditUserPermissionsId] = useState(0);
const [editUserPasswordId, setEditUserPasswordId] = useState(0);
const [deleteUserId, setDeleteUserId] = useState(0);
const { isFetching, isLoading, isError, error, data } = useUsers(["permissions"]);
const { data: currentUser } = useUser("me");
@@ -28,8 +24,8 @@ export default function TableWrapper() {
return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
}
const handleDelete = async () => {
await deleteUser(deleteUserId);
const handleDelete = async (id: number) => {
await deleteUser(id);
showSuccess(intl.formatMessage({ id: "notification.user-deleted" }));
};
@@ -81,7 +77,7 @@ export default function TableWrapper() {
/>
</div>
<Button size="sm" className="btn-orange" onClick={() => setEditUserId("new")}>
<Button size="sm" className="btn-orange" onClick={() => showUserModal("new")}>
<T id="users.add" />
</Button>
</div>
@@ -94,30 +90,20 @@ export default function TableWrapper() {
isFiltered={!!search}
isFetching={isFetching}
currentUserId={currentUser?.id}
onEditUser={(id: number) => setEditUserId(id)}
onEditPermissions={(id: number) => setEditUserPermissionsId(id)}
onSetPassword={(id: number) => setEditUserPasswordId(id)}
onDeleteUser={(id: number) => setDeleteUserId(id)}
onEditUser={(id: number) => showUserModal(id)}
onEditPermissions={(id: number) => showPermissionsModal(id)}
onSetPassword={(id: number) => showSetPasswordModal(id)}
onDeleteUser={(id: number) =>
showDeleteConfirmModal({
title: "user.delete.title",
onConfirm: () => handleDelete(id),
invalidations: [["users"], ["user", id]],
children: <T id="user.delete.content" />,
})
}
onDisableToggle={handleDisableToggle}
onNewUser={() => setEditUserId("new")}
onNewUser={() => showUserModal("new")}
/>
{editUserId ? <UserModal userId={editUserId} onClose={() => setEditUserId(0)} /> : null}
{editUserPermissionsId ? (
<PermissionsModal userId={editUserPermissionsId} onClose={() => setEditUserPermissionsId(0)} />
) : null}
{deleteUserId ? (
<DeleteConfirmModal
title="user.delete.title"
onConfirm={handleDelete}
onClose={() => setDeleteUserId(0)}
invalidations={[["users"], ["user", deleteUserId]]}
>
<T id="user.delete.content" />
</DeleteConfirmModal>
) : null}
{editUserPasswordId ? (
<SetPasswordModal userId={editUserPasswordId} onClose={() => setEditUserPasswordId(0)} />
) : null}
</div>
</div>
);