Files
wireguard-ui/src/pages/admin/setup/(sections)/setup-actions-section.tsx
T
2026-09-20 18:15:51 +01:00

91 lines
3.4 KiB
TypeScript

import fetchApi from "@/src/components/twui/utils/fetch/fetchApi";
import Row from "@/src/components/twui/layout/Row";
import Span from "@/src/components/twui/layout/Span";
import type useSystemSetupStatus from "../(hooks)/use-system-setup-status";
import SetupActionCard from "../(partials)/setup-action-card";
import SetupUpdateWgUiAction from "../(partials)/setup-update-wg-ui-action";
import type { ApiReqParams } from "@/src/types";
import type { APIResponseObject } from "@moduletrace/bunext/types";
import { RotateCcw, TriangleAlert, Wrench } from "lucide-react";
type Props = {
setup: ReturnType<typeof useSystemSetupStatus>;
};
const WG_TOOL_COMMANDS = [`wg`, `wg-quick`, `ip`, `curl`];
export default function SetupActionsSection({ setup }: Props) {
const setup_status = setup.setup_status;
if (!setup_status) {
return null;
}
const have_wg_tools = setup_status.tools
.filter((tool) => WG_TOOL_COMMANDS.includes(tool.command))
.every((tool) => tool.installed);
const show_restart =
!setup_status.is_dev && setup_status.init_system !== "unknown";
return (
<>
{!setup_status.is_root ? (
<Row className="gap-2 items-center bg-warning/5 rounded-lg px-3 py-2.5 text-warning">
<TriangleAlert size={16} className="shrink-0" />
<Span className="text-[12.5px]">
The server is not running as root — installs and
tunnel management may fail. Run wg-ui as root for full
functionality.
</Span>
</Row>
) : null}
<SetupActionCard
title="WireGuard tools"
description="Installs or updates the WireGuard tools (wg, wg-quick, iproute2) using your distro's package manager. Safe to re-run — the installer is idempotent."
icon={<Wrench size={19} />}
button_title={
have_wg_tools
? "Update WireGuard tools"
: "Install WireGuard tools"
}
on_run={async () => {
const res = await fetchApi<ApiReqParams, APIResponseObject>(
`/api/admin/setup-wireguard-tools`,
{
method: "POST",
},
);
setup.refresh();
return res;
}}
/>
<SetupUpdateWgUiAction setup={setup} />
{show_restart ? (
<SetupActionCard
title="Restart service"
description={`Restarts the ${setup_status.service_name} system service. Use this after manual changes — the server goes briefly offline.`}
icon={<RotateCcw size={19} />}
button_title="Restart service"
on_run={async () => {
const res = await fetchApi<
ApiReqParams,
APIResponseObject
>(`/api/admin/restart-wg-ui-service`, {
method: "POST",
});
setup.refresh();
return res;
}}
/>
) : null}
</>
);
}