Updates

src/pages/admin/clients/(functions)/submit-client-form.ts

@@ -0,0 +1,54 @@
+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<SetStateAction<boolean>>;
+    busy: boolean;
+    setError: Dispatch<SetStateAction<string | undefined>>;
+    error?: string;
+    data: AddClientFormData;
+    open: boolean;
+    setOpen: Dispatch<SetStateAction<boolean>>;
+    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<BUN_SQLITE_WGUI_CLIENTS>({
+        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?.();
+}

src/pages/admin/clients/(partials)/client-form-modal.tsx

@@ -1,10 +1,4 @@
-import {
-    useState,
-    type Dispatch,
-    type ReactNode,
-    type SetStateAction,
-} from "react";
-import { X } from "lucide-react";
+import { useState, type Dispatch, type SetStateAction } from "react";
 import Modal from "@/src/components/twui/elements/Modal";
 import Input from "@/src/components/twui/form/Input";
 import AdminButton from "@/src/components/general/admin-button";
@@ -13,8 +7,12 @@ import Stack from "@/src/components/twui/layout/Stack";
 import Span from "@/src/components/twui/layout/Span";
 import H3 from "@/src/components/twui/layout/H3";
 import Row from "@/src/components/twui/layout/Row";
-import adminCrudHandler from "@/src/functions/frontend/admin-crud-handler";
-import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
+import type { AddClientFormData } from "@/src/types";
+import submitClientForm from "../(functions)/submit-client-form";
+import { useAdminCrudGet } from "@/src/hooks/use-admin-crud-get";
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
+import Select from "@/src/components/twui/form/Select";
+import { Globe } from "lucide-react";
 
 type Props = {
     open: boolean;
@@ -22,49 +20,27 @@ type Props = {
     onCreated?: () => void;
 };
 
-type FormFieldProps = {
-    label: string;
-    htmlFor: string;
-    children: ReactNode;
-};
-
-type FormData = {
-    client_name?: string;
-    tunnel_ip?: string;
-    allowed_ips?: string;
-};
-
 export default function ClientFormModal({ open, setOpen, onCreated }: Props) {
     const [busy, setBusy] = useState(false);
     const [error, setError] = useState<string>();
 
-    async function handleSubmit(data: FormData) {
-        setBusy(true);
-        setError(undefined);
+    const [host_id, set_host_id] = useState(0);
 
-        const res = await adminCrudHandler<BUN_SQLITE_WGUI_CLIENTS>({
-            action: "insert",
-            table: "clients",
-            insert_data: [
-                {
-                    name: data.client_name || "",
-                    wg_ip_address: data.tunnel_ip || "",
-                    allowed_ips: data.allowed_ips || "",
-                },
-            ],
-        });
+    const { res: additional_hosts } = useAdminCrudGet<BUN_SQLITE_WGUI_HOSTS>({
+        table: "hosts",
+    });
 
-        setBusy(false);
-
-        if (!res.success) {
-            setError(res.msg || "Could not add client");
-            return;
-        }
-
-        setOpen(false);
-        onCreated?.();
+    if (!additional_hosts) {
+        return null;
     }
 
+    const hosts: BUN_SQLITE_WGUI_HOSTS[] = [
+        {
+            id: 0,
+        },
+        ...additional_hosts,
+    ];
+
     return (
         <Modal open={open} setOpen={setOpen} className="p-6">
             <Stack className="gap-4 mb-6">
@@ -78,10 +54,35 @@ export default function ClientFormModal({ open, setOpen, onCreated }: Props) {
 
             <Form
                 submitHandler={(e, data) => {
-                    handleSubmit(data as FormData);
+                    submitClientForm({
+                        data: data as AddClientFormData,
+                        busy,
+                        open,
+                        setBusy,
+                        setError,
+                        setOpen,
+                        error,
+                        onCreated,
+                        host_id,
+                    });
                 }}
             >
                 <Stack className="w-full items-stretch gap-6">
+                    <Select
+                        options={hosts.map((h) => ({
+                            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);
+                            }
+                        }}
+                    />
+
                     <Input
                         name="client_name"
                         id="client_name"