Complete client form

2026-09-17 08:43:00 +01:00
parent 90ee3debf0
commit cda6cff34f
19 changed files with 661 additions and 4 deletions
@@ -0,0 +1,41 @@
+import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
+import fetchApi from "@/src/components/twui/utils/fetch/fetchApi";
+import type useFormInit from "@/src/hooks/use-form-init";
+import type { ApiReqParams } from "@/src/types";
+import type { APIResponseObject } from "@moduletrace/bunext/types";
+
+type Params = {
+    host_id?: string | number;
+    setForm: ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_CLIENTS>>["setForm"];
+};
+
+export default async function grabNextAvailableClientIp({
+    host_id,
+    setForm,
+}: Params) {
+    const res = await fetchApi<ApiReqParams, APIResponseObject>(
+        `/api/admin/grab-next-available-client-ip`,
+        {
+            method: "POST",
+            body: { host_id },
+        },
+    );
+
+    if (!res?.success || !res.msg) {
+        return {
+            success: false,
+            msg: res?.msg || `Couldn't grab the next available client IP`,
+        };
+    }
+
+    setForm((prev) => ({
+        ...prev,
+        wg_ip_address: res.msg,
+        allowed_ips: `${res.msg}/32`,
+    }));
+
+    return {
+        success: true,
+        msg: res.msg,
+    };
+}
@@ -0,0 +1,71 @@
+import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
+import adminCrudHandler from "@/src/functions/frontend/admin-crud-handler";
+import type useFormInit from "@/src/hooks/use-form-init";
+import _ from "lodash";
+
+type Params = {
+    host_id?: string | number;
+};
+
+export default async function submitAddClientForm(
+    {
+        setLoading,
+        setStatus,
+        form,
+        existing_full,
+        app_context,
+    }: ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_CLIENTS>>,
+    { host_id }: Params,
+) {
+    try {
+        if (!window.confirm(`Create new client?`)) {
+            return;
+        }
+
+        const final_host_id = Number(app_context.query?.host_id || 0);
+
+        const new_client_data: BUN_SQLITE_WGUI_CLIENTS = _.omitBy(
+            {
+                name: form.name || "",
+                wg_ip_address: form.wg_ip_address || "",
+                allowed_ips: form.allowed_ips || "",
+                notes: form.notes || "",
+                host_id: final_host_id,
+                user_id: app_context?.user?.id,
+            },
+            (value) => value === undefined,
+        );
+
+        setLoading(true);
+
+        const res = existing_full?.id
+            ? await adminCrudHandler({
+                  action: "update",
+                  table: "clients",
+                  update_data: new_client_data,
+                  id: existing_full.id,
+              })
+            : await adminCrudHandler({
+                  action: "insert",
+                  table: "clients",
+                  insert_data: [new_client_data],
+              });
+
+        if (res.success) {
+            if (existing_full?.id) {
+                window.location.reload();
+            } else {
+                window.location.pathname = `/admin/hosts/${final_host_id}/clients`;
+            }
+        } else {
+            throw new Error(res.msg || "Client Creation Failed");
+        }
+    } catch (error: any) {
+        setStatus({
+            error: true,
+            msg: error.message || "Add Client Form Error",
+        });
+
+        setLoading(false);
+    }
+}
@@ -0,0 +1,20 @@
+import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
+import Button from "@/src/components/twui/layout/Button";
+import useFormInit from "@/src/hooks/use-form-init";
+
+export default function AddClientFormAction({
+    status,
+    existing_full,
+}: ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_CLIENTS>>) {
+    const title = existing_full?.id ? "Update Client" : "Create New Client";
+
+    if (status?.error) {
+        return null;
+    }
+
+    return (
+        <Button title={title} type="submit">
+            {title}
+        </Button>
+    );
+}
@@ -0,0 +1,23 @@
+import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
+import Input from "@/src/components/twui/form/Input";
+import useFormInit from "@/src/hooks/use-form-init";
+
+export default function AddClientFormAllowedIps({
+    form,
+    setForm,
+}: ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_CLIENTS>>) {
+    return (
+        <Input
+            title="Allowed IPs"
+            placeholder="Eg. 10.0.0.2/32"
+            onChange={(e) => {
+                setForm((prev) => ({
+                    ...prev,
+                    allowed_ips: e.target.value,
+                }));
+            }}
+            value={form.allowed_ips}
+            showLabel
+        />
+    );
+}
@@ -0,0 +1,24 @@
+import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
+import Input from "@/src/components/twui/form/Input";
+import useFormInit from "@/src/hooks/use-form-init";
+
+export default function AddClientFormNotes({
+    form,
+    setForm,
+}: ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_CLIENTS>>) {
+    return (
+        <Input
+            title="Notes"
+            placeholder="Eg. Personal phone of John Doe"
+            istextarea
+            onChange={(e) => {
+                setForm((prev) => ({
+                    ...prev,
+                    notes: e.target.value,
+                }));
+            }}
+            defaultValue={form.notes}
+            showLabel
+        />
+    );
+}
@@ -10,7 +10,15 @@ export default function AddClientFormTitle({
        <Input
            title="Client Display Name"
            placeholder="Eg. Pixel 2XL Phone"
+            onChange={(e) => {
+                setForm((prev) => ({
+                    ...prev,
+                    name: e.target.value,
+                }));
+            }}
+            defaultValue={form.name}
            showLabel
+            required
        />
    );
-}
+}
@@ -0,0 +1,81 @@
+import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
+import Button from "@/src/components/twui/layout/Button";
+import Input from "@/src/components/twui/form/Input";
+import Span from "@/src/components/twui/layout/Span";
+import Stack from "@/src/components/twui/layout/Stack";
+import useFormInit from "@/src/hooks/use-form-init";
+import { Wand2 } from "lucide-react";
+import { useState } from "react";
+import grabNextAvailableClientIp from "../../(functions)/grab-next-available-client-ip";
+import Row from "@/src/components/twui/layout/Row";
+
+type Props = ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_CLIENTS>> & {
+    host_id?: string | number;
+};
+
+export default function AddClientFormWgIpAddress({
+    form,
+    setForm,
+    host_id,
+}: Props) {
+    const [grabbing, setGrabbing] = useState(false);
+    const [grab_error, setGrabError] = useState<string>();
+
+    function handleGrabNextIp() {
+        setGrabbing(true);
+        setGrabError(undefined);
+
+        grabNextAvailableClientIp({ host_id, setForm })
+            .then((res) => {
+                if (!res.success) {
+                    setGrabError(res.msg);
+                }
+            })
+            .finally(() => {
+                setGrabbing(false);
+            });
+    }
+
+    return (
+        <Stack className="w-full items-stretch gap-2">
+            <Row className="flex-nowrap items-stretch">
+                <Input
+                    name="wg_ip_address"
+                    id="add_client_wg_ip_address"
+                    title="WireGuard IP Address"
+                    placeholder="Eg. 10.0.0.2"
+                    onChange={(e) => {
+                        setForm((prev) => ({
+                            ...prev,
+                            wg_ip_address: e.target.value,
+                            allowed_ips: `${e.target.value}/32`,
+                        }));
+                    }}
+                    value={form.wg_ip_address}
+                    showLabel
+                />
+
+                <Button
+                    title="Grab the next available client IP from the host's WireGuard subnet"
+                    variant="outlined"
+                    color="primary"
+                    size="small"
+                    beforeIcon={<Wand2 size={16} />}
+                    loading={grabbing}
+                    onClick={(e) => {
+                        e.preventDefault();
+                        handleGrabNextIp();
+                    }}
+                >
+                    Grab Next Available IP
+                </Button>
+            </Row>
+
+            {grab_error ? (
+                <Span className="text-[12.5px] text-error dark:text-error">
+                    {grab_error}
+                </Span>
+            ) : null}
+        </Stack>
+    );
+}
@@ -1,8 +1,15 @@
 import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
 import Form from "@/src/components/twui/form/Form";
+import LoadingOverlay from "@/src/components/twui/elements/LoadingOverlay";
 import Stack from "@/src/components/twui/layout/Stack";
+import Tag from "@/src/components/twui/elements/Tag";
 import useFormInit from "@/src/hooks/use-form-init";
+import submitAddClientForm from "../../(functions)/submit-add-client-form";
+import AddClientFormAction from "./add-client-form-action";
+import AddClientFormAllowedIps from "./add-client-form-allowed-ips";
+import AddClientFormNotes from "./add-client-form-notes";
 import AddClientFormTitle from "./add-client-form-title";
+import AddClientFormWgIpAddress from "./add-client-form-wg-ip-address";

 type Props = {
    existing_client?: BUN_SQLITE_WGUI_CLIENTS;
@@ -21,11 +28,25 @@ export default function AddClientForm({
        title: "Add Client",
    });

+    const { loading, status } = init;
+
    return (
-        <Form>
+        <Form
+            className="w-full gap-6"
+            onSubmit={() => {
+                submitAddClientForm(init, { host_id });
+            }}
+        >
+            {status?.error && <Tag color="error">{status.msg}</Tag>}
+            {loading && <LoadingOverlay />}
+
            <Stack>
                <AddClientFormTitle {...init} />
+                <AddClientFormWgIpAddress {...init} host_id={host_id} />
+                <AddClientFormAllowedIps {...init} />
+                <AddClientFormNotes {...init} />
+                <AddClientFormAction {...init} />
            </Stack>
        </Form>
    );
-}
+}