101 lines
3.6 KiB
TypeScript
Executable File
101 lines
3.6 KiB
TypeScript
Executable File
import { useState, type ComponentProps } from "react";
|
|
import Button from "../twui/layout/Button";
|
|
import useStatus from "../twui/hooks/useStatus";
|
|
import fetchApi from "../twui/utils/fetch/fetchApi";
|
|
import type { ApiReqParams } from "@/src/types";
|
|
import Row from "../twui/layout/Row";
|
|
import Stack from "../twui/layout/Stack";
|
|
import { CircleCheck, TriangleAlert } from "lucide-react";
|
|
import Span from "../twui/layout/Span";
|
|
import Tag from "../twui/elements/Tag";
|
|
import { AppData } from "@/src/data/app-data";
|
|
import type { APIResponseObject } from "@moduletrace/bunext/types";
|
|
import HostWgIpField, { type HostWgIpFieldStatus } from "./host-wg-ip-field";
|
|
import GrabNextSubnetButton from "./grab-next-subnet-button";
|
|
|
|
type Props = {
|
|
button_props?: Omit<ComponentProps<typeof Button>, "title">;
|
|
};
|
|
|
|
export default function SetupMainHostButton({ button_props }: Props) {
|
|
const { loading, setLoading, status, setStatus } = useStatus();
|
|
|
|
const [wgIP, setWgIP] = useState<string>(AppData["DefaultPrivateIP"]);
|
|
const [ipStatus, setIpStatus] = useState<HostWgIpFieldStatus>("checking");
|
|
|
|
return (
|
|
<Stack className="w-full items-stretch gap-3">
|
|
{/* <HostWgIpField
|
|
value={wgIP}
|
|
onChange={setWgIP}
|
|
onStatus={setIpStatus}
|
|
autoFocus
|
|
/> */}
|
|
|
|
{status?.error && status.msg ? (
|
|
<Tag
|
|
variant="outlined"
|
|
color="error"
|
|
className="w-full py-1.5 outline-error/50 bg-error/5!"
|
|
>
|
|
<Row>
|
|
<TriangleAlert size={15} />
|
|
<Span>{status.msg}</Span>
|
|
</Row>
|
|
</Tag>
|
|
) : null}
|
|
{status?.success && status.msg ? (
|
|
<Tag
|
|
variant="outlined"
|
|
color="success"
|
|
className="w-full py-1.5 outline-success/50 bg-success/5!"
|
|
>
|
|
<Row>
|
|
<CircleCheck size={15} />
|
|
<Span>{status.msg}</Span>
|
|
</Row>
|
|
</Tag>
|
|
) : null}
|
|
|
|
<Row className="w-full items-center gap-2">
|
|
<GrabNextSubnetButton onGrab={setWgIP} />
|
|
|
|
<Button
|
|
title="Setup Main Host"
|
|
{...button_props}
|
|
disabled={ipStatus !== "available"}
|
|
loading={loading}
|
|
onClick={() => {
|
|
setLoading(true);
|
|
setStatus(undefined);
|
|
|
|
fetchApi<ApiReqParams, APIResponseObject>(
|
|
`/api/admin/setup-main-host`,
|
|
{
|
|
method: "POST",
|
|
body: { ip_address: wgIP },
|
|
},
|
|
)
|
|
.then((res) => {
|
|
if (res.success) {
|
|
window.location.reload();
|
|
}
|
|
|
|
setStatus({
|
|
success: res.success,
|
|
error: !res.success,
|
|
msg: res.msg,
|
|
});
|
|
})
|
|
.finally(() => {
|
|
setLoading(false);
|
|
});
|
|
}}
|
|
>
|
|
Setup Main Host
|
|
</Button>
|
|
</Row>
|
|
</Stack>
|
|
);
|
|
}
|