Update hosts form

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

@@ -2,29 +2,15 @@ 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 {}
-            }
-        });
-    }, []);
+export default function AddHostFormInterface({
+    form,
+    setForm,
+    app_context,
+}: Props) {
+    const interfaces = app_context.pageProps?.network_interfaces || [];
 
     return (
         <Stack className="w-full gap-2 items-stretch">

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

@@ -1,36 +1,66 @@
 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 Row from "@/src/components/twui/layout/Row";
+import Span from "@/src/components/twui/layout/Span";
+import Toggle from "@/src/components/twui/elements/Toggle";
 import useFormInit from "@/src/hooks/use-form-init";
-import { useEffect } from "react";
+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";
+import Checkbox from "@/src/components/twui/form/Checkbox";
+import { twMerge } from "tailwind-merge";
+import useStatus from "@/src/components/twui/hooks/useStatus";
+import LoadingOverlay from "@/src/components/twui/elements/LoadingOverlay";
 
 type Props = ReturnType<typeof useFormInit<BUN_SQLITE_WGUI_HOSTS>>;
 
 export default function AddHostFormPublicIP({ form, setForm }: Props) {
+    const [useLocalIP, setUseLocalIP] = useState(false);
+
+    const { loading, setLoading } = useStatus({ initialLoading: true });
+
+    function fetchIP(iface: string, local: boolean) {
+        if (!iface) return;
+
+        const endpoint = local
+            ? `/api/admin/interface-local-ip?interface=${iface}`
+            : `/api/admin/public-ip?interface=${iface}`;
+
+        setLoading(true);
+
+        fetchApi<ApiReqParams, APIResponseObject>(endpoint, {
+            method: "GET",
+        })
+            .then((res) => {
+                if (res.success && res.stringRes) {
+                    setForm((prev) => ({
+                        ...prev,
+                        public_ip_address: res.stringRes!,
+                    }));
+                }
+            })
+            .finally(() => {
+                setTimeout(() => {
+                    setLoading(false);
+                }, 1000);
+            });
+    }
+
     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!,
-                }));
-            }
-        });
-    }, []);
+        if (!form.interface) return;
+        fetchIP(form.interface, useLocalIP);
+    }, [form.interface, useLocalIP]);
 
     return (
-        <Stack className="w-full gap-2">
+        <Stack className={twMerge("w-full gap-2 relative")}>
+            {loading ? <LoadingOverlay /> : null}
             <Input
                 name="public_ip_address"
-                label="Public IP Address"
+                label="IP Address"
                 showLabel
-                placeholder="e.g. 203.0.113.10"
+                placeholder="e.g. 203.0.113.10 or 192.168.1.10"
                 value={form.public_ip_address || ""}
                 changeHandler={(v) => {
                     setForm((prev) => ({
@@ -39,6 +69,15 @@ export default function AddHostFormPublicIP({ form, setForm }: Props) {
                     }));
                 }}
             />
+            <Checkbox
+                changeHandler={(checked) => {
+                    setUseLocalIP(checked);
+                }}
+                label={
+                    <span className="text-base opacity-80">Use Local IP?</span>
+                }
+                defaultChecked={useLocalIP}
+            />
         </Stack>
     );
 }

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

@@ -21,6 +21,16 @@ export default function AddHostForm() {
             wg_ip_address: AppData["DefaultPrivateIP"],
         },
         title: "Add Host",
+        async before_ready_function(params) {
+            if (!params.form.interface) {
+                params.setForm((prev) => ({
+                    ...prev,
+                    interface:
+                        params.app_context.pageProps?.network_interfaces?.[0] ||
+                        undefined,
+                }));
+            }
+        },
     });
 
     const [ipStatus, setIpStatus] = useState<HostWgIpFieldStatus>("checking");
@@ -39,8 +49,8 @@ export default function AddHostForm() {
             {init.ready ? (
                 <Stack className="w-full gap-6 items-stretch">
                     {/* <AddHostFormSubnet /> */}
-                    <AddHostFormPublicIP {...init} />
                     <AddHostFormInterface {...init} />
+                    <AddHostFormPublicIP {...init} />
                     <AddHostFormWgIpAddress
                         {...init}
                         setIpStatus={setIpStatus}

src/pages/admin/hosts/add/index.server.ts

@@ -0,0 +1,15 @@
+import grabHostNetworkInterfaces from "@/src/functions/backend/setup/grab-host-network-interfaces";
+import type { PagePropsType } from "@/src/types";
+import type { BunextPageServerFn } from "@moduletrace/bunext/types";
+
+const server: BunextPageServerFn<PagePropsType> = async ({ req }) => {
+    const network_interfaces = await grabHostNetworkInterfaces();
+
+    return {
+        props: {
+            network_interfaces,
+        },
+    };
+};
+
+export default server;