diff --git a/src/components/general/client-row.tsx b/src/components/general/client-row.tsx index a74ad0f..2d73867 100644 --- a/src/components/general/client-row.tsx +++ b/src/components/general/client-row.tsx @@ -58,6 +58,20 @@ export default function ClientRow({ client, rules }: Props) { {client.name || "—"} + + {typeof host_id == "number" ? ( + + {host_id == 0 ? "Main" : `Host #${host_id}`} + + ) : ( + + — + + )} + {client.wg_ip_address || "—"} @@ -86,7 +100,7 @@ export default function ClientRow({ client, rules }: Props) { {formatUnixTimestamp({ timestamp: client.created_at })} - + ); -} \ No newline at end of file +} diff --git a/src/pages/admin/clients/(functions)/submit-client-form.ts b/src/pages/admin/clients/(functions)/submit-client-form.ts deleted file mode 100644 index 4e82ec9..0000000 --- a/src/pages/admin/clients/(functions)/submit-client-form.ts +++ /dev/null @@ -1,54 +0,0 @@ -import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db"; -import adminCrudHandler from "@/src/functions/frontend/admin-crud-handler"; -import type { AddClientFormData } from "@/src/types"; -import type { Dispatch, SetStateAction } from "react"; - -type Params = { - setBusy: Dispatch>; - busy: boolean; - setError: Dispatch>; - error?: string; - data: AddClientFormData; - open: boolean; - setOpen: Dispatch>; - onCreated?: () => void; - host_id: number; -}; - -export default async function submitClientForm({ - busy, - setBusy, - setError, - error, - data, - open, - setOpen, - onCreated, - host_id, -}: Params) { - setBusy(true); - setError(undefined); - - const res = await adminCrudHandler({ - action: "insert", - table: "clients", - insert_data: [ - { - name: data.client_name || "", - wg_ip_address: data.tunnel_ip || "", - allowed_ips: data.allowed_ips || "", - host_id, - }, - ], - }); - - setBusy(false); - - if (!res.success) { - setError(res.msg || "Could not add client"); - return; - } - - setOpen(false); - onCreated?.(); -} diff --git a/src/pages/admin/clients/(partials)/client-form-action.tsx b/src/pages/admin/clients/(partials)/client-form-action.tsx new file mode 100644 index 0000000..3ce9472 --- /dev/null +++ b/src/pages/admin/clients/(partials)/client-form-action.tsx @@ -0,0 +1,19 @@ +import Button from "@/src/components/twui/layout/Button"; + +type Props = { + host_id: number; +}; + +export default function ClientFormAction({ host_id }: Props) { + const label = + host_id == 0 ? "Add client to Main Host" : `Add client to Host ${host_id}`; + + return ( + + ); +} \ No newline at end of file diff --git a/src/pages/admin/clients/(partials)/client-form-host-select.tsx b/src/pages/admin/clients/(partials)/client-form-host-select.tsx new file mode 100644 index 0000000..41655ff --- /dev/null +++ b/src/pages/admin/clients/(partials)/client-form-host-select.tsx @@ -0,0 +1,27 @@ +import type { Dispatch, SetStateAction } from "react"; +import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db"; +import Select from "@/src/components/twui/form/Select"; + +type Props = { + hosts: BUN_SQLITE_WGUI_HOSTS[]; + host_id: number; + setHostId: Dispatch>; +}; + +export default function ClientFormHostSelect({ + hosts, + host_id, + setHostId, +}: Props) { + return ( + ({ - value: (h.id || 0).toString(), - title: h.id == 0 ? `Main Host` : `Host ${h.id}`, - }))} - changeHandler={(v) => { - const selected_host = hosts.find( - (h) => h.id == Number(v), - ); - if (typeof selected_host?.id == "number") { - set_host_id(selected_host.id); - } - }} - /> - - - - - - - {error ? ( - - {error} - - ) : null} - - setOpen(false)} - disabled={busy} - > - Cancel - - - {busy ? "Adding…" : "Add client"} - - - - ); -} +} \ No newline at end of file diff --git a/src/pages/admin/clients/(partials)/client-form-title.tsx b/src/pages/admin/clients/(partials)/client-form-title.tsx new file mode 100644 index 0000000..a5f66a0 --- /dev/null +++ b/src/pages/admin/clients/(partials)/client-form-title.tsx @@ -0,0 +1,17 @@ +import H3 from "@/src/components/twui/layout/H3"; +import Span from "@/src/components/twui/layout/Span"; +import Stack from "@/src/components/twui/layout/Stack"; + +export default function ClientFormTitle() { + return ( + +

+ Select Host +

+ + Choose the host the client will be added to, then continue on + its add-client form + + + ); +} diff --git a/src/pages/admin/clients/(sections)/clients-table-section.tsx b/src/pages/admin/clients/(sections)/clients-table-section.tsx index 98f2392..15d22cf 100644 --- a/src/pages/admin/clients/(sections)/clients-table-section.tsx +++ b/src/pages/admin/clients/(sections)/clients-table-section.tsx @@ -28,7 +28,7 @@ const thRightClass = `${thClass} text-right`; export default function ClientsTableSection({ addOpen, setAddOpen }: Props) { const [query, setQuery] = useState(""); - const { res, setRes } = useAdminCrudGet({ + const { res } = useAdminCrudGet({ table: "clients", sql_query: { order: { field: "created_at", strategy: "DESC" }, @@ -103,10 +103,11 @@ export default function ClientsTableSection({ addOpen, setAddOpen }: Props) { ) : filtered.length ? (
- +
+ @@ -144,11 +145,7 @@ export default function ClientsTableSection({ addOpen, setAddOpen }: Props) { )} - setRes(undefined)} - /> + ); } \ No newline at end of file diff --git a/src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-wg-ip-address.tsx b/src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-wg-ip-address.tsx index b105126..4221c52 100644 --- a/src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-wg-ip-address.tsx +++ b/src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-wg-ip-address.tsx @@ -17,6 +17,7 @@ export default function AddClientFormWgIpAddress({ form, setForm, host_id, + existing_full, }: Props) { const [grabbing, setGrabbing] = useState(false); const [grab_error, setGrabError] = useState(); @@ -52,23 +53,26 @@ export default function AddClientFormWgIpAddress({ })); }} defaultValue={form.wg_ip_address} + readOnly={Boolean(existing_full?.id)} showLabel /> - + {existing_full?.id ? null : ( + + )} {grab_error ? ( diff --git a/src/utils/format-unix-timestamp.ts b/src/utils/format-unix-timestamp.ts index 733e74d..18efc0f 100644 --- a/src/utils/format-unix-timestamp.ts +++ b/src/utils/format-unix-timestamp.ts @@ -7,11 +7,11 @@ export default function formatUnixTimestamp({ timestamp }: Params) { return "—"; } - const date = new Date(timestamp * 1000); + const date = new Date(Number(timestamp)); return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", }); -} \ No newline at end of file +}
ClientHost Tunnel IP Allowed IPs Access