Add wireguard-ui-multi core: multi-server DB, WireGuard manager, REST API, UI, installers
Implements the from-scratch multi-server WireGuard management fork per CLAUDE.md spec: sqlite schema (servers/peers/audit_log/users), Curve25519 key generation, per-interface config rendering + wg-quick/systemd control, nftables hook scaffolding, session+CSRF-protected REST API with QR code and config download endpoints, a minimal vanilla-JS web UI, legacy wg0.conf migration, and both a native installer and a Proxmox LXC provisioning script (with auto-detected latest Debian template). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
sysops
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
3d6608ef80
commit
3b3ffd8ebf
@@ -0,0 +1,106 @@
|
||||
function getCookie(name) {
|
||||
const match = document.cookie.match(new RegExp("(?:^|; )" + name + "=([^;]*)"));
|
||||
return match ? decodeURIComponent(match[1]) : "";
|
||||
}
|
||||
|
||||
async function apiFetch(url, options) {
|
||||
options = options || {};
|
||||
options.headers = options.headers || {};
|
||||
if (options.method && options.method !== "GET") {
|
||||
options.headers["X-CSRF-Token"] = getCookie("wgm_csrf");
|
||||
}
|
||||
const res = await fetch(url, options);
|
||||
if (res.status === 401) {
|
||||
window.location.href = "/login";
|
||||
throw new Error("unauthenticated");
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
async function loadServers() {
|
||||
const tbody = document.querySelector("#servers tbody");
|
||||
tbody.innerHTML = "";
|
||||
const res = await apiFetch("/api/servers");
|
||||
if (!res.ok) return;
|
||||
const servers = await res.json();
|
||||
|
||||
for (const s of servers) {
|
||||
const tr = document.createElement("tr");
|
||||
|
||||
const nameTd = document.createElement("td");
|
||||
const link = document.createElement("a");
|
||||
link.href = "/servers/" + s.ID;
|
||||
link.textContent = s.Name;
|
||||
nameTd.appendChild(link);
|
||||
|
||||
const ifaceTd = document.createElement("td");
|
||||
ifaceTd.textContent = s.InterfaceName;
|
||||
|
||||
const portTd = document.createElement("td");
|
||||
portTd.textContent = s.ListenPort;
|
||||
|
||||
const statusTd = document.createElement("td");
|
||||
const badge = document.createElement("span");
|
||||
badge.className = "badge " + (s.status === "UP" ? "up" : "down");
|
||||
badge.textContent = s.status;
|
||||
statusTd.appendChild(badge);
|
||||
|
||||
const actionsTd = document.createElement("td");
|
||||
actionsTd.appendChild(makeActionButton("Start", () => serverAction(s.ID, "start")));
|
||||
actionsTd.appendChild(makeActionButton("Stop", () => serverAction(s.ID, "stop")));
|
||||
actionsTd.appendChild(makeActionButton("Reload", () => serverAction(s.ID, "reload")));
|
||||
|
||||
tr.appendChild(nameTd);
|
||||
tr.appendChild(ifaceTd);
|
||||
tr.appendChild(portTd);
|
||||
tr.appendChild(statusTd);
|
||||
tr.appendChild(actionsTd);
|
||||
tbody.appendChild(tr);
|
||||
}
|
||||
}
|
||||
|
||||
function makeActionButton(label, onClick) {
|
||||
const btn = document.createElement("button");
|
||||
btn.textContent = label;
|
||||
btn.className = "secondary";
|
||||
btn.addEventListener("click", onClick);
|
||||
return btn;
|
||||
}
|
||||
|
||||
async function serverAction(id, action) {
|
||||
await apiFetch("/api/servers/" + id + "/" + action, { method: "POST" });
|
||||
loadServers();
|
||||
}
|
||||
|
||||
document.getElementById("new-server").addEventListener("click", async () => {
|
||||
const name = prompt("Name des Servers (z.B. WGhome):");
|
||||
if (!name) return;
|
||||
const interfaceName = prompt("Interface (z.B. wg-home):");
|
||||
if (!interfaceName) return;
|
||||
const listenPort = parseInt(prompt("Listen Port (z.B. 51822):"), 10);
|
||||
if (!listenPort) return;
|
||||
const addressRange = prompt("Address Range (z.B. 10.20.22.0/24):");
|
||||
if (!addressRange) return;
|
||||
const dns = prompt("DNS (optional):") || "";
|
||||
|
||||
const res = await apiFetch("/api/servers", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
name: name,
|
||||
interface_name: interfaceName,
|
||||
listen_port: listenPort,
|
||||
address_range: addressRange,
|
||||
dns: dns,
|
||||
mtu: 1420,
|
||||
}),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
alert(data.error || "Server konnte nicht erstellt werden.");
|
||||
return;
|
||||
}
|
||||
loadServers();
|
||||
});
|
||||
|
||||
loadServers();
|
||||
@@ -0,0 +1,25 @@
|
||||
document.getElementById("login-form").addEventListener("submit", async function (e) {
|
||||
e.preventDefault();
|
||||
const errEl = document.getElementById("login-error");
|
||||
errEl.textContent = "";
|
||||
|
||||
const form = e.target;
|
||||
const username = form.username.value;
|
||||
const password = form.password.value;
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/login", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ username, password }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
errEl.textContent = data.error || "Anmeldung fehlgeschlagen.";
|
||||
return;
|
||||
}
|
||||
window.location.href = "/";
|
||||
} catch (err) {
|
||||
errEl.textContent = "Verbindung fehlgeschlagen.";
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,173 @@
|
||||
function getCookie(name) {
|
||||
const match = document.cookie.match(new RegExp("(?:^|; )" + name + "=([^;]*)"));
|
||||
return match ? decodeURIComponent(match[1]) : "";
|
||||
}
|
||||
|
||||
async function apiFetch(url, options) {
|
||||
options = options || {};
|
||||
options.headers = options.headers || {};
|
||||
if (options.method && options.method !== "GET") {
|
||||
options.headers["X-CSRF-Token"] = getCookie("wgm_csrf");
|
||||
}
|
||||
const res = await fetch(url, options);
|
||||
if (res.status === 401) {
|
||||
window.location.href = "/login";
|
||||
throw new Error("unauthenticated");
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
function serverIDFromPath() {
|
||||
const parts = window.location.pathname.split("/").filter(Boolean);
|
||||
return parts[1];
|
||||
}
|
||||
|
||||
const serverID = serverIDFromPath();
|
||||
const errEl = document.getElementById("server-error");
|
||||
|
||||
async function loadServer() {
|
||||
errEl.textContent = "";
|
||||
const res = await apiFetch("/api/servers/" + serverID);
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
errEl.textContent = data.error || "Server konnte nicht geladen werden.";
|
||||
return;
|
||||
}
|
||||
const s = await res.json();
|
||||
document.getElementById("server-name").textContent = s.Name;
|
||||
document.getElementById("d-interface").textContent = s.InterfaceName;
|
||||
document.getElementById("d-port").textContent = s.ListenPort;
|
||||
document.getElementById("d-address").textContent = s.AddressRange;
|
||||
document.getElementById("d-dns").textContent = s.DNS || "-";
|
||||
document.getElementById("d-mtu").textContent = s.MTU;
|
||||
|
||||
const statusRes = await apiFetch("/api/servers");
|
||||
if (statusRes.ok) {
|
||||
const servers = await statusRes.json();
|
||||
const match = servers.find((x) => String(x.ID) === String(serverID));
|
||||
const statusTd = document.getElementById("d-status");
|
||||
statusTd.innerHTML = "";
|
||||
const badge = document.createElement("span");
|
||||
const status = match ? match.status : "DOWN";
|
||||
badge.className = "badge " + (status === "UP" ? "up" : "down");
|
||||
badge.textContent = status;
|
||||
statusTd.appendChild(badge);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadPeers() {
|
||||
const tbody = document.querySelector("#peers tbody");
|
||||
tbody.innerHTML = "";
|
||||
const res = await apiFetch("/api/server/" + serverID + "/peers");
|
||||
if (!res.ok) return;
|
||||
const peers = await res.json();
|
||||
|
||||
for (const p of peers) {
|
||||
const tr = document.createElement("tr");
|
||||
|
||||
const nameTd = document.createElement("td");
|
||||
nameTd.textContent = p.name;
|
||||
|
||||
const emailTd = document.createElement("td");
|
||||
emailTd.textContent = p.email || "-";
|
||||
|
||||
const allowedTd = document.createElement("td");
|
||||
allowedTd.textContent = p.allowed_ips;
|
||||
|
||||
const enabledTd = document.createElement("td");
|
||||
enabledTd.textContent = p.enabled ? "Ja" : "Nein";
|
||||
|
||||
const actionsTd = document.createElement("td");
|
||||
|
||||
const qrBtn = document.createElement("button");
|
||||
qrBtn.textContent = "QR-Code";
|
||||
qrBtn.className = "secondary";
|
||||
qrBtn.addEventListener("click", () => showQRCode(p.id));
|
||||
actionsTd.appendChild(qrBtn);
|
||||
|
||||
const dlLink = document.createElement("a");
|
||||
dlLink.href = "/api/server/" + serverID + "/peer/" + p.id + "/config?host=" + encodeURIComponent(window.location.hostname);
|
||||
dlLink.textContent = "Config";
|
||||
dlLink.style.marginLeft = "0.5rem";
|
||||
actionsTd.appendChild(dlLink);
|
||||
|
||||
const delBtn = document.createElement("button");
|
||||
delBtn.textContent = "Löschen";
|
||||
delBtn.className = "danger";
|
||||
delBtn.addEventListener("click", () => deletePeer(p.id));
|
||||
actionsTd.appendChild(delBtn);
|
||||
|
||||
tr.appendChild(nameTd);
|
||||
tr.appendChild(emailTd);
|
||||
tr.appendChild(allowedTd);
|
||||
tr.appendChild(enabledTd);
|
||||
tr.appendChild(actionsTd);
|
||||
tbody.appendChild(tr);
|
||||
}
|
||||
}
|
||||
|
||||
function showQRCode(peerID) {
|
||||
const modal = document.getElementById("qrcode-modal");
|
||||
const img = document.getElementById("qrcode-img");
|
||||
img.src = "/api/server/" + serverID + "/peer/" + peerID + "/qrcode?host=" + encodeURIComponent(window.location.hostname) + "&t=" + Date.now();
|
||||
modal.classList.remove("hidden");
|
||||
}
|
||||
|
||||
document.getElementById("qrcode-close").addEventListener("click", () => {
|
||||
document.getElementById("qrcode-modal").classList.add("hidden");
|
||||
});
|
||||
|
||||
async function deletePeer(peerID) {
|
||||
if (!confirm("Peer wirklich löschen?")) return;
|
||||
await apiFetch("/api/server/" + serverID + "/peer/" + peerID, { method: "DELETE" });
|
||||
loadPeers();
|
||||
}
|
||||
|
||||
document.getElementById("btn-start").addEventListener("click", async () => {
|
||||
await apiFetch("/api/servers/" + serverID + "/start", { method: "POST" });
|
||||
loadServer();
|
||||
});
|
||||
|
||||
document.getElementById("btn-stop").addEventListener("click", async () => {
|
||||
await apiFetch("/api/servers/" + serverID + "/stop", { method: "POST" });
|
||||
loadServer();
|
||||
});
|
||||
|
||||
document.getElementById("btn-reload").addEventListener("click", async () => {
|
||||
await apiFetch("/api/servers/" + serverID + "/reload", { method: "POST" });
|
||||
loadServer();
|
||||
});
|
||||
|
||||
document.getElementById("btn-download").addEventListener("click", () => {
|
||||
window.location.href = "/api/servers/" + serverID + "/config";
|
||||
});
|
||||
|
||||
document.getElementById("peer-form").addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const errP = document.getElementById("peer-error");
|
||||
errP.textContent = "";
|
||||
const form = e.target;
|
||||
const body = {
|
||||
name: form.name.value,
|
||||
email: form.email.value,
|
||||
allowed_ips: form.allowed_ips.value,
|
||||
persistent_keepalive: parseInt(form.persistent_keepalive.value, 10) || 25,
|
||||
use_preshared_key: form.use_preshared_key.checked,
|
||||
};
|
||||
const res = await apiFetch("/api/server/" + serverID + "/peer", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
errP.textContent = data.error || "Peer konnte nicht erstellt werden.";
|
||||
return;
|
||||
}
|
||||
form.reset();
|
||||
form.persistent_keepalive.value = 25;
|
||||
loadPeers();
|
||||
});
|
||||
|
||||
loadServer();
|
||||
loadPeers();
|
||||
@@ -0,0 +1,209 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
|
||||
max-width: 960px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
color: #1c1c1c;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1rem 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
table.details {
|
||||
width: auto;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
th, td {
|
||||
text-align: left;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid #e2e2e2;
|
||||
}
|
||||
|
||||
thead th {
|
||||
background: #f0f0f0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.4rem 0.8rem;
|
||||
margin: 0.15rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #1d4ed8;
|
||||
}
|
||||
|
||||
button.danger {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
button.danger:hover {
|
||||
background: #b91c1c;
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
background: #6b7280;
|
||||
}
|
||||
|
||||
button.secondary:hover {
|
||||
background: #4b5563;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
padding: 1rem;
|
||||
border: 1px solid #e2e2e2;
|
||||
border-radius: 6px;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
form#login-form {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
max-width: 320px;
|
||||
margin: 3rem auto;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="number"] {
|
||||
padding: 0.4rem 0.6rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #dc2626;
|
||||
font-size: 0.9rem;
|
||||
min-height: 1.2em;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.15rem 0.6rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.badge.up {
|
||||
background: #16a34a;
|
||||
}
|
||||
|
||||
.badge.down {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: #fff;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-content img {
|
||||
display: block;
|
||||
margin-top: 0.5rem;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background: #17181a;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
table, form {
|
||||
background: #212226;
|
||||
}
|
||||
|
||||
thead th {
|
||||
background: #2a2b30;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border-bottom: 1px solid #33343a;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: #26272c;
|
||||
}
|
||||
|
||||
input {
|
||||
background: #1b1c1f;
|
||||
color: #e6e6e6;
|
||||
border: 1px solid #3a3b41;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: #212226;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user