293 lines
8.3 KiB
TypeScript
293 lines
8.3 KiB
TypeScript
|
import {
|
||
|
|
IconPlus,
|
||
|
|
IconDownload,
|
||
|
|
IconQrcode,
|
||
|
|
IconPlayerPlay,
|
||
|
|
IconPlayerPause,
|
||
|
|
IconTrash,
|
||
|
|
IconNetwork,
|
||
|
|
} from "@tabler/icons-react";
|
||
|
|
import EasyModal from "ez-modal-react";
|
||
|
|
import { useState } from "react";
|
||
|
|
import { downloadWgConfig } from "src/api/backend/wireguard";
|
||
|
|
import { Loading } from "src/components";
|
||
|
|
import {
|
||
|
|
useWgClients,
|
||
|
|
useWgInterface,
|
||
|
|
useCreateWgClient,
|
||
|
|
useDeleteWgClient,
|
||
|
|
useToggleWgClient,
|
||
|
|
} from "src/hooks/useWireGuard";
|
||
|
|
import WireGuardClientModal from "src/modals/WireGuardClientModal";
|
||
|
|
import WireGuardQRModal from "src/modals/WireGuardQRModal";
|
||
|
|
|
||
|
|
function formatBytes(bytes: number | null): string {
|
||
|
|
if (bytes === null || bytes === 0) return "0 B";
|
||
|
|
const k = 1024;
|
||
|
|
const sizes = ["B", "KB", "MB", "GB", "TB"];
|
||
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||
|
|
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function timeAgo(date: string | null): string {
|
||
|
|
if (!date) return "Never";
|
||
|
|
const seconds = Math.floor((Date.now() - new Date(date).getTime()) / 1000);
|
||
|
|
if (seconds < 60) return `${seconds}s ago`;
|
||
|
|
if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
|
||
|
|
if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
|
||
|
|
return `${Math.floor(seconds / 86400)}d ago`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function WireGuard() {
|
||
|
|
const { data: clients, isLoading: clientsLoading } = useWgClients();
|
||
|
|
const { data: wgInterface, isLoading: ifaceLoading } = useWgInterface();
|
||
|
|
const createClient = useCreateWgClient();
|
||
|
|
const deleteClient = useDeleteWgClient();
|
||
|
|
const toggleClient = useToggleWgClient();
|
||
|
|
const [filter, setFilter] = useState("");
|
||
|
|
|
||
|
|
if (clientsLoading || ifaceLoading) {
|
||
|
|
return <Loading />;
|
||
|
|
}
|
||
|
|
|
||
|
|
const filteredClients = clients?.filter(
|
||
|
|
(c) =>
|
||
|
|
!filter ||
|
||
|
|
c.name.toLowerCase().includes(filter.toLowerCase()) ||
|
||
|
|
c.ipv4Address.includes(filter),
|
||
|
|
);
|
||
|
|
|
||
|
|
const handleNewClient = async () => {
|
||
|
|
const result = (await EasyModal.show(WireGuardClientModal)) as any;
|
||
|
|
if (result && result.name) {
|
||
|
|
createClient.mutate({ name: result.name });
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleDelete = async (id: number, name: string) => {
|
||
|
|
if (window.confirm(`Are you sure you want to delete client "${name}"?`)) {
|
||
|
|
deleteClient.mutate(id);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleToggle = (id: number, currentlyEnabled: boolean) => {
|
||
|
|
toggleClient.mutate({ id, enabled: !currentlyEnabled });
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleQR = (id: number, name: string) => {
|
||
|
|
EasyModal.show(WireGuardQRModal, { clientId: id, clientName: name });
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleDownload = (id: number, name: string) => {
|
||
|
|
const cleanName = name.replace(/[^a-zA-Z0-9_.-]/g, "-").substring(0, 32);
|
||
|
|
downloadWgConfig(id, cleanName);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="container-xl">
|
||
|
|
{/* Interface Info Card */}
|
||
|
|
<div className="page-header d-print-none">
|
||
|
|
<div className="row align-items-center">
|
||
|
|
<div className="col-auto">
|
||
|
|
<h2 className="page-title">
|
||
|
|
<IconNetwork className="me-2" size={28} />
|
||
|
|
WireGuard VPN
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{wgInterface && (
|
||
|
|
<div className="card mb-3">
|
||
|
|
<div className="card-body">
|
||
|
|
<div className="row">
|
||
|
|
<div className="col-md-3">
|
||
|
|
<div className="mb-2">
|
||
|
|
<span className="text-muted small">Interface</span>
|
||
|
|
<div className="fw-bold">{wgInterface.name}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="col-md-3">
|
||
|
|
<div className="mb-2">
|
||
|
|
<span className="text-muted small">Public Key</span>
|
||
|
|
<div
|
||
|
|
className="fw-bold text-truncate"
|
||
|
|
title={wgInterface.publicKey}
|
||
|
|
style={{ maxWidth: 200 }}
|
||
|
|
>
|
||
|
|
{wgInterface.publicKey}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="col-md-2">
|
||
|
|
<div className="mb-2">
|
||
|
|
<span className="text-muted small">Address</span>
|
||
|
|
<div className="fw-bold">{wgInterface.ipv4Cidr}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="col-md-2">
|
||
|
|
<div className="mb-2">
|
||
|
|
<span className="text-muted small">Port</span>
|
||
|
|
<div className="fw-bold">{wgInterface.listenPort}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="col-md-2">
|
||
|
|
<div className="mb-2">
|
||
|
|
<span className="text-muted small">DNS</span>
|
||
|
|
<div className="fw-bold">{wgInterface.dns}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Clients Card */}
|
||
|
|
<div className="card">
|
||
|
|
<div className="card-header">
|
||
|
|
<div className="row align-items-center w-100">
|
||
|
|
<div className="col">
|
||
|
|
<h3 className="card-title">
|
||
|
|
Clients ({clients?.length || 0})
|
||
|
|
</h3>
|
||
|
|
</div>
|
||
|
|
<div className="col-auto">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
className="form-control form-control-sm"
|
||
|
|
placeholder="Filter..."
|
||
|
|
value={filter}
|
||
|
|
onChange={(e) => setFilter(e.target.value)}
|
||
|
|
style={{ width: 200 }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="col-auto">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="btn btn-primary btn-sm"
|
||
|
|
onClick={handleNewClient}
|
||
|
|
id="wg-new-client-btn"
|
||
|
|
>
|
||
|
|
<IconPlus size={16} className="me-1" />
|
||
|
|
New Client
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="table-responsive">
|
||
|
|
<table className="table table-vcenter card-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Status</th>
|
||
|
|
<th>Name</th>
|
||
|
|
<th>IP Address</th>
|
||
|
|
<th>Last Handshake</th>
|
||
|
|
<th>Transfer ↓</th>
|
||
|
|
<th>Transfer ↑</th>
|
||
|
|
<th className="text-end">Actions</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{filteredClients?.map((client) => {
|
||
|
|
const isConnected =
|
||
|
|
client.latestHandshakeAt &&
|
||
|
|
Date.now() - new Date(client.latestHandshakeAt).getTime() <
|
||
|
|
3 * 60 * 1000;
|
||
|
|
return (
|
||
|
|
<tr key={client.id}>
|
||
|
|
<td>
|
||
|
|
<span
|
||
|
|
className={`badge ${
|
||
|
|
!client.enabled
|
||
|
|
? "bg-secondary"
|
||
|
|
: isConnected
|
||
|
|
? "bg-success"
|
||
|
|
: "bg-warning"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{!client.enabled
|
||
|
|
? "Disabled"
|
||
|
|
: isConnected
|
||
|
|
? "Connected"
|
||
|
|
: "Idle"}
|
||
|
|
</span>
|
||
|
|
</td>
|
||
|
|
<td className="fw-bold">{client.name}</td>
|
||
|
|
<td>
|
||
|
|
<code>{client.ipv4Address}</code>
|
||
|
|
</td>
|
||
|
|
<td>{timeAgo(client.latestHandshakeAt)}</td>
|
||
|
|
<td>{formatBytes(client.transferRx)}</td>
|
||
|
|
<td>{formatBytes(client.transferTx)}</td>
|
||
|
|
<td className="text-end">
|
||
|
|
<div className="btn-group btn-group-sm">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="btn btn-outline-primary"
|
||
|
|
title="QR Code"
|
||
|
|
onClick={() =>
|
||
|
|
handleQR(client.id, client.name)
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<IconQrcode size={16} />
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="btn btn-outline-primary"
|
||
|
|
title="Download Config"
|
||
|
|
onClick={() =>
|
||
|
|
handleDownload(client.id, client.name)
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<IconDownload size={16} />
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className={`btn ${client.enabled ? "btn-outline-warning" : "btn-outline-success"}`}
|
||
|
|
title={
|
||
|
|
client.enabled ? "Disable" : "Enable"
|
||
|
|
}
|
||
|
|
onClick={() =>
|
||
|
|
handleToggle(client.id, client.enabled)
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{client.enabled ? (
|
||
|
|
<IconPlayerPause size={16} />
|
||
|
|
) : (
|
||
|
|
<IconPlayerPlay size={16} />
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="btn btn-outline-danger"
|
||
|
|
title="Delete"
|
||
|
|
onClick={() =>
|
||
|
|
handleDelete(client.id, client.name)
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<IconTrash size={16} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
{(!filteredClients || filteredClients.length === 0) && (
|
||
|
|
<tr>
|
||
|
|
<td colSpan={7} className="text-center text-muted py-4">
|
||
|
|
{filter
|
||
|
|
? "No clients match your filter"
|
||
|
|
: "No WireGuard clients yet. Click 'New Client' to create one."}
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
)}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default WireGuard;
|