Add public IP field and Network interface to host form

src/pages/admin/hosts/add/(functions)/submit-add-host-form.ts

@@ -22,6 +22,8 @@ export default async function submitAddHostForm({
                 method: "POST",
                 body: {
                     wg_ip_address: form.wg_ip_address || "",
+                    public_ip_address: form.public_ip_address || "",
+                    interface: form.interface || "",
                 },
             },
         );

src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-interface.tsx

@@ -0,0 +1,49 @@
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
+import Select from "@/src/components/twui/form/Select";
+import Stack from "@/src/components/twui/layout/Stack";
+import useFormInit from "@/src/hooks/use-form-init";
+import { useEffect, useState } from "react";
+import fetchApi from "@/src/components/twui/utils/fetch/fetchApi";
+import type { ApiReqParams } from "@/src/types";
+import type { APIResponseObject } from "@moduletrace/bunext/types";
+
+type Props = ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_HOSTS>>;
+
+export default function AddHostFormInterface({ form, setForm }: Props) {
+    const [interfaces, setInterfaces] = useState<string[]>([]);
+
+    useEffect(() => {
+        fetchApi<ApiReqParams, APIResponseObject>(
+            "/api/admin/network-interfaces",
+            { method: "GET" },
+        ).then((res) => {
+            if (res.success && res.stringRes) {
+                try {
+                    const parsed = JSON.parse(res.stringRes) as string[];
+                    setInterfaces(parsed);
+                } catch {}
+            }
+        });
+    }, []);
+
+    return (
+        <Stack className="w-full gap-2 items-stretch">
+            <Select
+                name="interface"
+                label="Network Interface"
+                showLabel
+                options={interfaces.map((iface) => ({
+                    value: iface,
+                    title: iface,
+                    default: iface === form.interface,
+                }))}
+                changeHandler={(v) => {
+                    setForm((prev) => ({
+                        ...prev,
+                        interface: v,
+                    }));
+                }}
+            />
+        </Stack>
+    );
+}

src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form-public-ip.tsx

@@ -0,0 +1,44 @@
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
+import Input from "@/src/components/twui/form/Input";
+import Stack from "@/src/components/twui/layout/Stack";
+import useFormInit from "@/src/hooks/use-form-init";
+import { useEffect } from "react";
+import fetchApi from "@/src/components/twui/utils/fetch/fetchApi";
+import type { ApiReqParams } from "@/src/types";
+import type { APIResponseObject } from "@moduletrace/bunext/types";
+
+type Props = ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_HOSTS>>;
+
+export default function AddHostFormPublicIP({ form, setForm }: Props) {
+    useEffect(() => {
+        fetchApi<ApiReqParams, APIResponseObject>(
+            "/api/admin/public-ip",
+            { method: "GET" },
+        ).then((res) => {
+            if (res.success && res.stringRes) {
+                setForm((prev) => ({
+                    ...prev,
+                    public_ip_address: res.stringRes!,
+                }));
+            }
+        });
+    }, []);
+
+    return (
+        <Stack className="w-full gap-2">
+            <Input
+                name="public_ip_address"
+                label="Public IP Address"
+                showLabel
+                placeholder="e.g. 203.0.113.10"
+                value={form.public_ip_address || ""}
+                changeHandler={(v) => {
+                    setForm((prev) => ({
+                        ...prev,
+                        public_ip_address: v,
+                    }));
+                }}
+            />
+        </Stack>
+    );
+}

src/pages/admin/hosts/add/(partials)/add-host-form/add-host-form.tsx

@@ -10,6 +10,8 @@ import submitAddHostForm from "../../(functions)/submit-add-host-form";
 import AddHostFormAction from "./add-host-form-action";
 import AddHostFormSubnet from "./add-host-form-subnet";
 import AddHostFormWgIpAddress from "./add-host-form-wg-ip-address";
+import AddHostFormPublicIP from "./add-host-form-public-ip";
+import AddHostFormInterface from "./add-host-form-interface";
 import LoadingRectangleBlock from "@/src/components/twui/layout/LoadingRectangleBlock";
 import type { HostWgIpFieldStatus } from "@/src/components/general/host-wg-ip-field";
 
@@ -35,8 +37,10 @@ export default function AddHostForm() {
             {status?.error && <Tag color="error">{status.msg}</Tag>}
             {loading && <LoadingOverlay />}
             {init.ready ? (
-                <Stack className="w-full gap-2">
-                    <AddHostFormSubnet />
+                <Stack className="w-full gap-6 items-stretch">
+                    {/* <AddHostFormSubnet /> */}
+                    <AddHostFormPublicIP {...init} />
+                    <AddHostFormInterface {...init} />
                     <AddHostFormWgIpAddress
                         {...init}
                         setIpStatus={setIpStatus}