Improve wg-ui host setup: IP availability checks and current-user install script
- setup-main-host-button: live availability status, grab-next-subnet helper, error/success feedback - setup-wireguard-host: harden generated shell scripts with set -e - check-private-ip-address-availability: add user access check, drop manual body validation - setup-main-host: pass host object with wg_ip_address - install-wg-ui.sh: run service as the invoking user (root or sudo) instead of a dedicated wgui user, and skip systemd/OpenRC daemon setup when NODE_ENV=development
This commit is contained in:
@@ -1,77 +1,229 @@
|
||||
import { useEffect, 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 Input from "../twui/form/Input";
|
||||
import Stack from "../twui/layout/Stack";
|
||||
import { Network } from "lucide-react";
|
||||
import Span from "../twui/layout/Span";
|
||||
import { AppData } from "@/src/data/app-data";
|
||||
|
||||
type Props = {
|
||||
button_props?: Omit<ComponentProps<typeof Button>, "title">;
|
||||
};
|
||||
|
||||
export default function SetupMainHostButton({ button_props }: Props) {
|
||||
const { loading, setLoading, ready, setReady } = useStatus();
|
||||
|
||||
const [wgIP, setWgIP] = useState<string>(AppData["DefaultPrivateIP"]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchApi<ApiReqParams>(
|
||||
`/api/admin/check-private-ip-address-availability`,
|
||||
{
|
||||
method: "POST",
|
||||
body: { ip_address: wgIP },
|
||||
},
|
||||
).then((res) => {
|
||||
console.log(`res`, res);
|
||||
});
|
||||
}, [wgIP]);
|
||||
|
||||
return (
|
||||
<Stack className="w-full items-stretch">
|
||||
<Input
|
||||
defaultValue={wgIP}
|
||||
changeHandler={(v) => {
|
||||
setWgIP(v);
|
||||
}}
|
||||
prefix={<Network size={17} opacity={0.5} />}
|
||||
suffix={
|
||||
<Span className="text-sm opacity-50 whitespace-nowrap">
|
||||
Selected Wireguard IP Address
|
||||
</Span>
|
||||
}
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
<Button
|
||||
title="Setup Main Host"
|
||||
{...button_props}
|
||||
loading={loading}
|
||||
onClick={() => {
|
||||
setLoading(true);
|
||||
|
||||
fetchApi<ApiReqParams>(`/api/admin/setup-main-host`, {
|
||||
method: "POST",
|
||||
body: {
|
||||
ip_address: ``,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(`res`, res);
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 4000);
|
||||
});
|
||||
}}
|
||||
>
|
||||
Setup Main Host
|
||||
</Button>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
import { useEffect, useRef, 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 Input from "../twui/form/Input";
|
||||
import Stack from "../twui/layout/Stack";
|
||||
import {
|
||||
CircleCheck,
|
||||
Loader2,
|
||||
Network,
|
||||
TriangleAlert,
|
||||
Wand2,
|
||||
} from "lucide-react";
|
||||
import Span from "../twui/layout/Span";
|
||||
import Tag from "../twui/elements/Tag";
|
||||
import { AppData } from "@/src/data/app-data";
|
||||
|
||||
type Props = {
|
||||
button_props?: Omit<ComponentProps<typeof Button>, "title">;
|
||||
};
|
||||
|
||||
type AvailabilityType = {
|
||||
success: boolean;
|
||||
};
|
||||
|
||||
type GrabSubnetType = {
|
||||
success: boolean;
|
||||
msg?: string;
|
||||
};
|
||||
|
||||
const subnet_ip_pattern = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.1$/;
|
||||
|
||||
type IPStatusType = "checking" | "available" | "not_available" | "invalid";
|
||||
|
||||
export default function SetupMainHostButton({ button_props }: Props) {
|
||||
const { loading, setLoading, status, setStatus } = useStatus();
|
||||
|
||||
const [wgIP, setWgIP] = useState<string>(AppData["DefaultPrivateIP"]);
|
||||
const [availability, setAvailability] = useState<AvailabilityType>();
|
||||
const [grabbing, setGrabbing] = useState(false);
|
||||
|
||||
const input_ref = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setAvailability(undefined);
|
||||
|
||||
if (!subnet_ip_pattern.test(wgIP)) return;
|
||||
|
||||
let cancelled = false;
|
||||
|
||||
fetchApi<ApiReqParams, AvailabilityType>(
|
||||
`/api/admin/check-private-ip-address-availability`,
|
||||
{
|
||||
method: "POST",
|
||||
body: { ip_address: wgIP },
|
||||
},
|
||||
).then((res) => {
|
||||
if (cancelled) return;
|
||||
setAvailability(res);
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [wgIP]);
|
||||
|
||||
const ip_status: IPStatusType = subnet_ip_pattern.test(wgIP)
|
||||
? availability
|
||||
? availability.success
|
||||
? "available"
|
||||
: "not_available"
|
||||
: "checking"
|
||||
: "invalid";
|
||||
|
||||
function grabNextSubnet() {
|
||||
setGrabbing(true);
|
||||
|
||||
fetchApi<ApiReqParams, GrabSubnetType>(
|
||||
`/api/admin/grab-next-available-private-ip`,
|
||||
{ method: "POST" },
|
||||
)
|
||||
.then((res) => {
|
||||
if (res?.success && res.msg) {
|
||||
setWgIP(res.msg);
|
||||
if (input_ref.current) {
|
||||
input_ref.current.value = res.msg;
|
||||
}
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
setGrabbing(false);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack className="w-full items-stretch gap-3">
|
||||
<Stack className="w-full gap-2">
|
||||
<Input
|
||||
defaultValue={wgIP}
|
||||
changeHandler={(v) => {
|
||||
setWgIP(v);
|
||||
}}
|
||||
prefix={<Network size={17} opacity={0.5} />}
|
||||
suffix={
|
||||
<Span className="text-sm opacity-50 whitespace-nowrap">
|
||||
Selected Wireguard IP Address
|
||||
</Span>
|
||||
}
|
||||
componentRef={input_ref}
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
{ip_status === "invalid" ? (
|
||||
<Tag
|
||||
variant="outlined"
|
||||
color="error"
|
||||
className="w-full py-1.5 outline-error/50 bg-error/5!"
|
||||
>
|
||||
<Row>
|
||||
<TriangleAlert size={15} />
|
||||
<span>Invalid IP</span>
|
||||
</Row>
|
||||
</Tag>
|
||||
) : ip_status === "not_available" ? (
|
||||
<Tag
|
||||
variant="outlined"
|
||||
color="error"
|
||||
className="w-full py-1.5 outline-error/50 bg-error/5!"
|
||||
>
|
||||
<Row>
|
||||
<TriangleAlert size={15} />
|
||||
<span>Not available</span>
|
||||
</Row>
|
||||
</Tag>
|
||||
) : ip_status === "available" ? (
|
||||
<Tag
|
||||
variant="outlined"
|
||||
color="success"
|
||||
className="w-full py-1.5 outline-success/50 bg-success/5!"
|
||||
>
|
||||
<Row>
|
||||
<CircleCheck size={15} />
|
||||
<span>Available</span>
|
||||
</Row>
|
||||
</Tag>
|
||||
) : (
|
||||
<Tag
|
||||
variant="outlined"
|
||||
color="gray"
|
||||
className="w-full py-1.5 outline-gray/50 bg-gray/5!"
|
||||
>
|
||||
<Row>
|
||||
<Loader2 size={15} className="animate-spin" />
|
||||
<span>Checking availability…</span>
|
||||
</Row>
|
||||
</Tag>
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
{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">
|
||||
<Button
|
||||
title="Grab Next Available Subnet"
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
beforeIcon={<Wand2 size={16} />}
|
||||
loading={grabbing}
|
||||
onClick={grabNextSubnet}
|
||||
>
|
||||
Grab Next Subnet
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
title="Setup Main Host"
|
||||
{...button_props}
|
||||
disabled={ip_status !== "available"}
|
||||
loading={loading}
|
||||
onClick={() => {
|
||||
setLoading(true);
|
||||
setStatus(undefined);
|
||||
|
||||
fetchApi<ApiReqParams>(`/api/admin/setup-main-host`, {
|
||||
method: "POST",
|
||||
body: { ip_address: wgIP },
|
||||
})
|
||||
.then((res) => {
|
||||
setStatus({
|
||||
success: res.success,
|
||||
error: !res.success,
|
||||
msg: res.msg,
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
}}
|
||||
>
|
||||
Setup Main Host
|
||||
</Button>
|
||||
</Row>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user