Files
wireguard-ui/src/pages/admin/hosts/[host_id]/index.tsx
T
2026-09-20 15:37:57 +01:00

94 lines
3.5 KiB
TypeScript

import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
import { useContext } from "react";
import AdminHero from "@/src/components/general/admin-hero";
import DeleteHostButton from "@/src/components/general/delete-host-button";
import { SiteData } from "@/src/data/site-data";
import Button from "@/src/components/twui/layout/Button";
import Divider from "@/src/components/twui/layout/Divider";
import EmptyContent from "@/src/components/twui/elements/EmptyContent";
import Stack from "@/src/components/twui/layout/Stack";
import { AppContext } from "@/src/pages/__root";
import MainHostStatusSection from "../(sections)/main-host-status-section";
import HostPublicIpSection from "../(sections)/host-public-ip-section";
import InterfaceConfigSection from "../(sections)/interface-config-section";
export default function AdminSingleHostPage() {
const { pageProps, query } = useContext(AppContext);
const host_id = Number(query?.host_id || pageProps?.host?.id || 0);
const host = pageProps?.host || undefined;
const clients = pageProps?.clients || [];
if (!pageProps?.host && host_id != 0) {
return (
<>
<AdminHero
title="Host"
description="WireGuard server configuration and interface details"
/>
<Divider className="mb-6" />
<Stack className="w-full px-6 pb-8 gap-5 items-stretch">
<EmptyContent title="Host not found" />
</Stack>
</>
);
}
const title = host_id == 0 ? "Main Host" : `Host #${host_id}`;
return (
<>
<AdminHero
title={host ? title : "Host"}
description="WireGuard server configuration and interface details"
buttons={
<>
<Button
title="Edit Host"
size="small"
variant="outlined"
href={`/admin/hosts/${host_id}/edit`}
>
Edit Host
</Button>
<Button
title="View Clients"
size="small"
variant="outlined"
color="primary"
href={`/admin/hosts/${host_id}/clients`}
>
View Clients
</Button>
<Button
title="Add Client"
size="small"
href={`/admin/hosts/${host_id}/clients/add-client`}
>
Add Client
</Button>
<DeleteHostButton host_id={host_id} />
</>
}
/>
<Divider className="mb-6" />
<Stack className="w-full px-6 pb-8 gap-5 items-stretch">
<MainHostStatusSection host={host} clients={clients} />
<HostPublicIpSection
host_id={host_id}
current_ip={host?.public_ip_address || ""}
/>
<InterfaceConfigSection host={host} clients={clients} />
</Stack>
</>
);
}
export const meta: BunextPageModuleMeta = {
title: `Host | ${SiteData["SiteName"]}`,
description: `WireGuard host page`,
};