Complete client form

db/schema.ts

@@ -187,6 +187,20 @@ const schema: BUN_SQLITE_DatabaseSchemaType = {
                     dataType: "TEXT",
                 },
             ],
+            uniqueConstraints: [
+                {
+                    constraintName: "Unique client IPs per host",
+                    alias: "unique_client_ip_per_host",
+                    constraintTableFields: [
+                        {
+                            value: "host_id",
+                        },
+                        {
+                            value: "wg_ip_address",
+                        },
+                    ],
+                },
+            ],
         },
         {
             tableName: "hosts",

src/functions/backend/setup/setup-wireguard-client.ts

@@ -65,7 +65,7 @@ export default async function setupWireguardClient({
     );
 
     const HOST_CLIENTS_DIR = path.join(
-        WGUI_LIB_HOSTS_CONFIGS_DIR,
+        HOST_CONFIG_DIR,
         WGUI_LIB_HOST_CLIENTS_DIR_NAME,
     );
 

src/pages/admin/hosts/[host_id]/clients/add-client/(functions)/grab-next-available-client-ip.ts

@@ -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,
+    };
+}

src/pages/admin/hosts/[host_id]/clients/add-client/(functions)/submit-add-client-form.ts

@@ -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);
+    }
+}

src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-action.tsx

@@ -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>
+    );
+}

src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-allowed-ips.tsx

@@ -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
+        />
+    );
+}

src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-notes.tsx

@@ -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
+        />
+    );
+}

src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-title.tsx

@@ -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
         />
     );
 }

src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form-wg-ip-address.tsx

@@ -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>
+    );
+}

src/pages/admin/hosts/[host_id]/clients/add-client/(partials)/client-form/add-client-form.tsx

@@ -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,10 +28,24 @@ 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>
     );

src/pages/api/admin/crud/(tables)/clients/(functions)/run-client-setup.ts

@@ -0,0 +1,57 @@
+import type {
+    BUN_SQLITE_WGUI_CLIENTS,
+    BUN_SQLITE_WGUI_HOSTS,
+} from "@/db/types/db";
+import setupWireguardClient from "@/src/functions/backend/setup/setup-wireguard-client";
+import type { TableType, User } from "@/src/types";
+import BunSQLite from "@moduletrace/bun-sqlite";
+import type { APIResponseObject } from "@moduletrace/bunext/types";
+
+type Params = {
+    client_id?: string | number;
+    user: User;
+};
+
+export default async function runClientSetup({
+    client_id,
+    user,
+}: Params): Promise<APIResponseObject> {
+    if (!client_id) {
+        return {
+            success: false,
+            msg: `No client id provided`,
+        };
+    }
+
+    const client_res = await BunSQLite.select<
+        BUN_SQLITE_WGUI_CLIENTS,
+        TableType
+    >({
+        table: "clients",
+        targetId: client_id,
+    });
+
+    const client = client_res.singleRes;
+
+    if (!client) {
+        return {
+            success: false,
+            msg: `Client record not found`,
+        };
+    }
+
+    let host: BUN_SQLITE_WGUI_HOSTS | undefined;
+
+    if (client?.host_id) {
+        const host_res = await BunSQLite.select<BUN_SQLITE_WGUI_HOSTS, TableType>(
+            {
+                table: "hosts",
+                targetId: client.host_id,
+            },
+        );
+
+        host = host_res.singleRes || undefined;
+    }
+
+    return await setupWireguardClient({ client, host, user });
+}

src/pages/api/admin/crud/(tables)/clients/del.ts

@@ -0,0 +1,63 @@
+import _ from "lodash";
+import type { AdminCrudAPIParams, TableType } from "@/src/types";
+import type { APIResponseObject } from "@moduletrace/bunext/types";
+import checkUserAccess from "@/src/functions/backend/auth/check-user-access";
+import type {
+    BUN_SQLITE_WGUI_ALL_TYPEDEFS,
+    BUN_SQLITE_WGUI_CLIENTS,
+} from "@/db/types/db";
+import BunSQLite from "@moduletrace/bun-sqlite";
+import type { ServerQueryParam } from "@moduletrace/bun-sqlite/dist/types";
+
+export default async function (
+    params: AdminCrudAPIParams,
+): Promise<APIResponseObject> {
+    const { user, user_types, body, id } = params;
+
+    const can_delete_client = checkUserAccess({
+        user_types,
+        // includes: ["admin"],
+    });
+
+    if (!can_delete_client.success) {
+        return {
+            success: false,
+            msg: `Can't delete client`,
+        };
+    }
+
+    let query = _.merge<
+        ServerQueryParam<BUN_SQLITE_WGUI_ALL_TYPEDEFS>,
+        ServerQueryParam<BUN_SQLITE_WGUI_ALL_TYPEDEFS>
+    >(body?.sql_query || {}, {});
+
+    const clients_to_delete = await BunSQLite.select<
+        BUN_SQLITE_WGUI_CLIENTS,
+        TableType
+    >({
+        table: "clients",
+        query,
+        targetId: id,
+    });
+
+    if (!clients_to_delete.payload) {
+        return {
+            success: false,
+            msg: `No Media to Delete.`,
+        };
+    }
+
+    for (let i = 0; i < clients_to_delete.payload.length; i++) {
+        const client = clients_to_delete.payload[i];
+        if (!client?.id) continue;
+
+        await BunSQLite.delete<BUN_SQLITE_WGUI_CLIENTS, TableType>({
+            table: "clients",
+            targetId: client.id,
+        });
+    }
+
+    return {
+        success: true,
+    };
+}

src/pages/api/admin/crud/(tables)/clients/get.ts

@@ -0,0 +1,38 @@
+import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
+import checkUserAccess from "@/src/functions/backend/auth/check-user-access";
+import type { AdminCrudAPIParams, TableType } from "@/src/types";
+import BunSQLite from "@moduletrace/bun-sqlite";
+import type { APIResponseObject } from "@moduletrace/bunext/types";
+import _ from "lodash";
+
+export default async function (
+    params: AdminCrudAPIParams,
+): Promise<APIResponseObject> {
+    const { table, user_types, body, id, query, user } = params;
+
+    let final_sql_query = _.merge(query?.sql_query, body?.sql_query) || {};
+
+    delete final_sql_query.join;
+
+    const can_user_see_all_clients = checkUserAccess({
+        user_types,
+        includes: ["admin"],
+    });
+
+    if (!can_user_see_all_clients.success) {
+        final_sql_query.query = {
+            ...final_sql_query.query,
+            user_id: {
+                value: user.id,
+            },
+        };
+    }
+
+    const GET = await BunSQLite.select<BUN_SQLITE_WGUI_CLIENTS, TableType>({
+        table,
+        query: final_sql_query,
+        targetId: id,
+    });
+
+    return GET;
+}

src/pages/api/admin/crud/(tables)/clients/index.ts

@@ -0,0 +1,29 @@
+import type { AdminCrudAPIParams } from "@/src/types";
+import type { APIResponseObject } from "@moduletrace/bunext/types";
+import _ from "lodash";
+import get from "./get";
+import post from "./post";
+import put from "./put";
+import del from "./del";
+
+export default async function (
+    params: AdminCrudAPIParams,
+): Promise<APIResponseObject> {
+    const { req, query } = params;
+
+    switch (req.method) {
+        case "GET":
+            return await get(params);
+        case "POST":
+            return await post(params);
+        case "PUT":
+            return await put(params);
+        case "DELETE":
+            return await del(params);
+
+        default:
+            return {
+                success: false,
+            };
+    }
+}

src/pages/api/admin/crud/(tables)/clients/post.ts

@@ -0,0 +1,52 @@
+import type { BUN_SQLITE_WGUI_CLIENTS } from "@/db/types/db";
+import checkUserAccess from "@/src/functions/backend/auth/check-user-access";
+import type { AdminCrudAPIParams } from "@/src/types";
+import BunSQLite from "@moduletrace/bun-sqlite";
+import type { APIResponseObject } from "@moduletrace/bunext/types";
+import runClientSetup from "./(functions)/run-client-setup";
+import _ from "lodash";
+
+export default async function (
+    params: AdminCrudAPIParams,
+): Promise<APIResponseObject> {
+    const { table, body, user_types, user } = params;
+
+    let final_insert_data: BUN_SQLITE_WGUI_CLIENTS[] = [
+        ...(body?.insert_data || []),
+    ].map((d) => ({ ...d, user_id: user.id }));
+
+    const is_user_allowed_to_post_any = checkUserAccess({
+        // includes: ["admin"],
+        user_types,
+    });
+
+    if (!is_user_allowed_to_post_any.success) {
+        final_insert_data = final_insert_data.map((fid) => ({
+            ...fid,
+            user_id: user.id,
+        }));
+    }
+
+    const POST = await BunSQLite.insert({
+        table,
+        data: final_insert_data,
+        update_on_duplicate: body?.update_on_duplicate,
+    });
+
+    if (POST.success) {
+        const client_setup_res = await runClientSetup({
+            client_id: POST.postInsertReturn?.insertId,
+            user,
+        });
+
+        if (!client_setup_res.success) {
+            POST.debug = {
+                ...(POST.debug || {}),
+                client_setup: client_setup_res,
+            };
+            POST.error = client_setup_res.msg || client_setup_res.error;
+        }
+    }
+
+    return POST;
+}

src/pages/api/admin/crud/(tables)/clients/put.ts

@@ -0,0 +1,56 @@
+import checkUserAccess from "@/src/functions/backend/auth/check-user-access";
+import type { AdminCrudAPIParams } from "@/src/types";
+import BunSQLite from "@moduletrace/bun-sqlite";
+import type { APIResponseObject } from "@moduletrace/bunext/types";
+import runClientSetup from "./(functions)/run-client-setup";
+import _ from "lodash";
+
+export default async function (
+    params: AdminCrudAPIParams,
+): Promise<APIResponseObject> {
+    const { table, body, user_types, id, query, user } = params;
+
+    if (!body?.update_data) {
+        return {
+            success: false,
+            msg: `No Update Data`,
+        };
+    }
+
+    const is_user_allowed_to_put = checkUserAccess({
+        // includes: ["admin"],
+        user_types,
+    });
+
+    let final_sql_query = _.merge(query?.sql_query, body?.sql_query) || {};
+    let targetId = id;
+
+    if (!is_user_allowed_to_put.success) {
+        final_sql_query = {};
+        targetId = user.id;
+    }
+
+    const PUT = await BunSQLite.update({
+        table,
+        data: body?.update_data,
+        targetId,
+        query: final_sql_query,
+    });
+
+    if (PUT.success) {
+        const client_setup_res = await runClientSetup({
+            client_id: targetId,
+            user,
+        });
+
+        if (!client_setup_res.success) {
+            PUT.debug = {
+                ...(PUT.debug || {}),
+                client_setup: client_setup_res,
+            };
+            PUT.error = client_setup_res.msg || client_setup_res.error;
+        }
+    }
+
+    return PUT;
+}

src/pages/api/admin/crud/[[...paths]].ts

@@ -13,6 +13,7 @@ import type {
 import type { AdminCrudAPIParams, ApiReqParams, TableType } from "@/src/types";
 import userAuth from "@/src/functions/backend/auth/user-auth";
 import checkUserAccess from "@/src/functions/backend/auth/check-user-access";
+import clients from "./(tables)/clients";
 
 export const handler: BunextAPIRouteHandler<APIResponseObject> = async (
     params,
@@ -58,6 +59,8 @@ export const handler: BunextAPIRouteHandler<APIResponseObject> = async (
         switch (table) {
             case "media":
                 return await media(crud_params);
+            case "clients":
+                return await clients(crud_params);
 
             default:
                 break;

src/pages/api/admin/grab-next-available-client-ip.ts

@@ -0,0 +1,55 @@
+import userAuth from "@/src/functions/backend/auth/user-auth";
+import grabNextAvailableClientIPAddress from "@/src/functions/backend/setup/grab-next-available-client-ip";
+import BunSQLite from "@moduletrace/bun-sqlite";
+import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
+import type { ApiReqParams, TableType } from "@/src/types";
+import type {
+    APIResponseObject,
+    BunextAPIRouteHandler,
+} from "@moduletrace/bunext/types";
+
+export const handler: BunextAPIRouteHandler<APIResponseObject> = async (
+    params,
+) => {
+    const req = params.req;
+    const body = params.body as ApiReqParams;
+
+    if (req.method !== "POST") {
+        return {
+            success: false,
+        };
+    }
+
+    const { user, user_types } = await userAuth({ req });
+
+    if (!user?.logged_in_status) {
+        return {
+            success: false,
+            msg: `Unauthorized`,
+            logoutUser: true,
+        };
+    }
+
+    try {
+        let host: BUN_SQLITE_WGUI_HOSTS | undefined;
+
+        if (body?.host_id) {
+            const host_res = await BunSQLite.select<
+                BUN_SQLITE_WGUI_HOSTS,
+                TableType
+            >({
+                table: "hosts",
+                targetId: body.host_id,
+            });
+
+            host = host_res.singleRes || undefined;
+        }
+
+        return await grabNextAvailableClientIPAddress({ host });
+    } catch (error: any) {
+        return {
+            success: false,
+            msg: error.message,
+        };
+    }
+};

src/types/index.ts

@@ -198,6 +198,7 @@ export type ApiReqParams<
     update_on_duplicate?: boolean;
     user_id?: string | number | null;
     dependent_id?: string | number | null;
+    host_id?: string | number | null;
 
     media_base_64?: string;
     media_base_64_data_url?: string;