Add installer, launch-to-browser, and switching from the web GUI
Three features plus the design-system swap. Installer. Inno-compile.iss builds a per-user installer into %APPDATA%\ipswap with PrivilegesRequired=lowest, so it never shows a UAC prompt. That matches the app's asInvoker manifest, and it is also what lets the in-app updater replace the .exe later without elevation — a Program Files install could not. It offers a desktop shortcut and an optional start-with-Windows entry, and reuses the app's own single-instance mutex as AppMutex so setup notices a running copy, since a running .exe cannot be overwritten. Uninstall leaves presets.json, config.json and the log in place. Launching. Opening ipswap opens the editor in a browser, starting the tray first if it is not already up; if it is, the running copy opens the browser and the second process exits. internal/instance does this with a loopback control listener whose port and token live in a mode-600 session.json, plus a session-local named mutex on Windows to settle a launch race. A stale session file from a crash is detected by a failed call and treated as "no primary", so it can never wedge startup. The Run-key entry now passes --background, because a browser tab at every login is not wanted. Switching from the browser. New endpoints for active state, apply preview and apply. The browser confirms against the same before/after text the tray's MessageBox shows, built from a live read at prompt time. Apply requires the session token in a header like every other mutation — it changes the machine's network, so it is not a weaker case than editing a preset. A netsh refusal for lack of elevation comes back as 409 with a flag, so the page can point at "Relaunch as administrator" instead of showing a generic failure. To avoid two copies of that sequence, internal/switcher now owns everything between "the user said yes" and "the adapter changed", and both front ends call it. It serialises applies: two interleaved netsh sequences on one adapter would leave it matching neither preset, and there are now two ways to start one. CSS. apointless.css is vendored from bsncubed/css and left untouched; the previous file was the boarding-pass stylesheet and its class names did not match this markup. ipswap.css adds only what the design system does not ship — page chrome, tables, modals, stat tiles, a success alert — on its tokens, so re-pulling apointless.css restyles the app. Not verified: the installer is uncompiled (no Inno Setup or wine on this box) and the UI is not visually rendered (headless Firefox hangs here). Both are checked as far as the tooling allows — assets and endpoints serve, and every DOM id the JS touches exists in the markup. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
+235
-137
@@ -1,9 +1,9 @@
|
||||
/*
|
||||
* ipswap preset editor.
|
||||
*
|
||||
* Plain ES modules-free JavaScript on purpose: the whole app is served from an
|
||||
* embed.FS inside a single .exe, and a build step for the front end would mean
|
||||
* a Node toolchain in CI for a few hundred lines of DOM code.
|
||||
* Plain DOM code with no build step: the whole app is served from an embed.FS
|
||||
* inside a single .exe, and a Node toolchain in CI for a few hundred lines of
|
||||
* JavaScript is not a trade worth making.
|
||||
*/
|
||||
|
||||
// The token arrives once in the query string. The server also sets it as a
|
||||
@@ -16,21 +16,23 @@ const state = {
|
||||
groups: [],
|
||||
adapters: [],
|
||||
settings: null,
|
||||
active: { active_id: "", active_name: "" },
|
||||
editing: null,
|
||||
pendingApply: null,
|
||||
};
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
|
||||
// --- theme ---
|
||||
|
||||
const themeToggle = document.getElementById("theme-toggle");
|
||||
|
||||
function applyTheme(light) {
|
||||
document.documentElement.classList.toggle("light", light);
|
||||
themeToggle.textContent = light ? "Dark" : "Light";
|
||||
$("btn-theme").textContent = light ? "Dark" : "Light";
|
||||
localStorage.setItem("ipswap-theme", light ? "light" : "dark");
|
||||
}
|
||||
|
||||
applyTheme(localStorage.getItem("ipswap-theme") === "light");
|
||||
themeToggle.addEventListener("click", () =>
|
||||
$("btn-theme").addEventListener("click", () =>
|
||||
applyTheme(!document.documentElement.classList.contains("light"))
|
||||
);
|
||||
|
||||
@@ -40,68 +42,78 @@ async function api(path, opts = {}) {
|
||||
const headers = Object.assign({}, opts.headers);
|
||||
if (opts.method && opts.method !== "GET") {
|
||||
headers["X-Ipswap-Token"] = TOKEN;
|
||||
if (opts.body && !headers["Content-Type"]) {
|
||||
headers["Content-Type"] = "application/json";
|
||||
}
|
||||
if (opts.body && !headers["Content-Type"]) headers["Content-Type"] = "application/json";
|
||||
}
|
||||
|
||||
const res = await fetch(path, Object.assign({}, opts, { headers }));
|
||||
const text = await res.text();
|
||||
|
||||
let data = null;
|
||||
try {
|
||||
data = text ? JSON.parse(text) : null;
|
||||
} catch {
|
||||
// Non-JSON bodies come from the auth middleware, which writes plain text.
|
||||
// The auth middleware writes plain text, not JSON.
|
||||
if (!res.ok) throw new Error(text || res.statusText);
|
||||
}
|
||||
if (!res.ok) throw new Error((data && data.error) || text || res.statusText);
|
||||
|
||||
if (!res.ok) {
|
||||
const err = new Error((data && data.error) || text || res.statusText);
|
||||
err.status = res.status;
|
||||
err.data = data;
|
||||
throw err;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
// The server shuts down after five minutes without one of these.
|
||||
setInterval(() => {
|
||||
api("/api/heartbeat", { method: "POST" }).catch(() => {});
|
||||
}, 30_000);
|
||||
// The server shuts down five minutes after the last one of these.
|
||||
setInterval(() => api("/api/heartbeat", { method: "POST" }).catch(() => {}), 30_000);
|
||||
|
||||
// --- alerts ---
|
||||
|
||||
function alertBox(kind, message, container = "alerts") {
|
||||
const host = document.getElementById(container);
|
||||
host.innerHTML = `<div class="alert ${kind}">${escapeHTML(message)}</div>`;
|
||||
if (kind === "ok") setTimeout(() => (host.innerHTML = ""), 4000);
|
||||
}
|
||||
|
||||
function escapeHTML(s) {
|
||||
return String(s).replace(/[&<>"']/g, (c) =>
|
||||
({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" })[c]
|
||||
);
|
||||
}
|
||||
|
||||
// --- rendering ---
|
||||
// kind is one of ok, error, warn, info — matching apointless.css's alert
|
||||
// modifiers, with alert-ok supplied by ipswap.css.
|
||||
function alertBox(kind, message, container = "alerts") {
|
||||
const host = $(container);
|
||||
host.innerHTML = `<div class="alert alert-${kind}">${escapeHTML(message)}</div>`;
|
||||
if (kind === "ok") setTimeout(() => (host.innerHTML = ""), 4000);
|
||||
}
|
||||
|
||||
function clearAlert(container) {
|
||||
$(container).innerHTML = "";
|
||||
}
|
||||
|
||||
// --- formatting ---
|
||||
|
||||
function maskOf(prefix) {
|
||||
if (state.settings && state.settings.mask_style === "dotted") {
|
||||
let m = prefix === 0 ? 0 : (0xffffffff << (32 - prefix)) >>> 0;
|
||||
return [m >>> 24, (m >>> 16) & 255, (m >>> 8) & 255, m & 255].join(".");
|
||||
const m = prefix === 0 ? 0 : (0xffffffff << (32 - prefix)) >>> 0;
|
||||
return `${m >>> 24}.${(m >>> 16) & 255}.${(m >>> 8) & 255}.${m & 255}`;
|
||||
}
|
||||
return "/" + prefix;
|
||||
}
|
||||
|
||||
function addrText(a) {
|
||||
return a.address + maskOf(a.prefix).replace(/^(?!\/)/, " ");
|
||||
const m = maskOf(a.prefix);
|
||||
return m.startsWith("/") ? `${a.address}${m}` : `${a.address} ${m}`;
|
||||
}
|
||||
|
||||
// --- rendering ---
|
||||
|
||||
function renderStats() {
|
||||
const adapters = new Set(state.presets.map((p) => p.adapter));
|
||||
document.getElementById("stats").innerHTML = `
|
||||
<div class="stat-card"><div class="label">Presets</div><div class="value">${state.presets.length}</div></div>
|
||||
<div class="stat-card"><div class="label">Groups</div><div class="value">${state.groups.length}</div></div>
|
||||
<div class="stat-card"><div class="label">Adapters in use</div><div class="value">${adapters.size}</div></div>
|
||||
`;
|
||||
$("stat-active").textContent = state.active.active_name || "unmatched";
|
||||
$("stat-count").textContent = state.presets.length;
|
||||
$("stat-groups").textContent = state.groups.length;
|
||||
}
|
||||
|
||||
function renderPresets() {
|
||||
const host = document.getElementById("groups");
|
||||
const host = $("groups");
|
||||
|
||||
if (!state.presets.length) {
|
||||
host.innerHTML = `<div class="card"><div class="empty">No presets yet. Create one, or import a pack from a colleague.</div></div>`;
|
||||
return;
|
||||
@@ -116,41 +128,45 @@ function renderPresets() {
|
||||
|
||||
let html = "";
|
||||
for (const [group, presets] of byGroup) {
|
||||
html += `
|
||||
<div class="group-head">
|
||||
html += `<div class="card">
|
||||
<div class="card-header">
|
||||
<h2>${escapeHTML(group)}</h2>
|
||||
<span class="pill">${presets.length}</span>
|
||||
<span class="badge">${presets.length}</span>
|
||||
</div>
|
||||
<div class="card" style="padding:0">
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>Name</th><th>Adapter</th><th>Address</th><th>Gateway</th><th>DNS</th><th></th>
|
||||
</tr></thead>
|
||||
<tbody>`;
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th></th><th>Name</th><th>Adapter</th><th>Address</th><th>Gateway</th><th>DNS</th><th></th>
|
||||
</tr></thead>
|
||||
<tbody>`;
|
||||
|
||||
for (const p of presets) {
|
||||
const isDHCP = p.mode === "dhcp";
|
||||
const isActive = p.id === state.active.active_id;
|
||||
|
||||
const addr = isDHCP
|
||||
? `<span class="badge accent">DHCP</span>`
|
||||
? `<span class="badge badge-accent">DHCP</span>`
|
||||
: escapeHTML(addrText(p.primary)) +
|
||||
(p.secondary && p.secondary.length
|
||||
? ` <span class="pill">+${p.secondary.length}</span>`
|
||||
: "");
|
||||
(p.secondary && p.secondary.length ? ` <span class="badge">+${p.secondary.length}</span>` : "");
|
||||
|
||||
const dns =
|
||||
p.dns.mode === "dhcp"
|
||||
? `<span class="badge">from DHCP</span>`
|
||||
: escapeHTML((p.dns.servers || []).join(", "));
|
||||
|
||||
html += `<tr>
|
||||
<td>${escapeHTML(p.name)}${p.notes ? `<div class="dim">${escapeHTML(p.notes)}</div>` : ""}</td>
|
||||
<td class="mono">${escapeHTML(p.adapter)}</td>
|
||||
html += `<tr class="${isActive ? "is-active" : ""}">
|
||||
<td>${isActive ? '<span class="badge badge-ok"><span class="dot dot-pulse"></span>live</span>' : ""}</td>
|
||||
<td>${escapeHTML(p.name)}${p.notes ? `<div class="faint">${escapeHTML(p.notes)}</div>` : ""}</td>
|
||||
<td class="addr">${escapeHTML(p.adapter)}</td>
|
||||
<td class="addr">${addr}</td>
|
||||
<td class="addr">${isDHCP ? "" : escapeHTML(p.primary.gateway || "—")}</td>
|
||||
<td class="addr">${dns}</td>
|
||||
<td style="text-align:right; white-space:nowrap">
|
||||
<button class="small" data-edit="${escapeHTML(p.id)}">Edit</button>
|
||||
<button class="small danger" data-del="${escapeHTML(p.id)}">Delete</button>
|
||||
<td class="actions">
|
||||
<button class="btn btn-sm btn-primary" data-apply="${escapeHTML(p.id)}" ${isActive ? "disabled" : ""}>
|
||||
${isActive ? "In use" : "Use"}
|
||||
</button>
|
||||
<button class="btn btn-sm" data-edit="${escapeHTML(p.id)}">Edit</button>
|
||||
<button class="btn btn-sm btn-ghost" data-del="${escapeHTML(p.id)}">Delete</button>
|
||||
</td>
|
||||
</tr>`;
|
||||
}
|
||||
@@ -158,6 +174,9 @@ function renderPresets() {
|
||||
}
|
||||
host.innerHTML = html;
|
||||
|
||||
host.querySelectorAll("[data-apply]").forEach((b) =>
|
||||
b.addEventListener("click", () => openConfirm(b.dataset.apply))
|
||||
);
|
||||
host.querySelectorAll("[data-edit]").forEach((b) =>
|
||||
b.addEventListener("click", () => openEditor(b.dataset.edit))
|
||||
);
|
||||
@@ -167,18 +186,18 @@ function renderPresets() {
|
||||
}
|
||||
|
||||
function renderAdapters() {
|
||||
const body = document.getElementById("adapters");
|
||||
const body = $("adapters");
|
||||
if (!state.adapters.length) {
|
||||
body.innerHTML = `<tr><td colspan="4" class="dim">No adapters found.</td></tr>`;
|
||||
body.innerHTML = `<tr><td colspan="4" class="faint">No adapters found.</td></tr>`;
|
||||
return;
|
||||
}
|
||||
body.innerHTML = state.adapters
|
||||
.map(
|
||||
(a) => `<tr>
|
||||
<td class="mono">${escapeHTML(a.name)}</td>
|
||||
<td class="dim">${escapeHTML(a.description || "")}</td>
|
||||
<td class="addr">${escapeHTML(a.name)}</td>
|
||||
<td class="faint">${escapeHTML(a.description || "")}</td>
|
||||
<td class="addr">${escapeHTML(a.current || "—")}</td>
|
||||
<td>${a.up ? '<span class="badge ok">up</span>' : '<span class="badge">down</span>'}</td>
|
||||
<td>${a.up ? '<span class="badge badge-ok">up</span>' : '<span class="badge">down</span>'}</td>
|
||||
</tr>`
|
||||
)
|
||||
.join("");
|
||||
@@ -187,39 +206,119 @@ function renderAdapters() {
|
||||
// --- loading ---
|
||||
|
||||
async function loadAll() {
|
||||
const [presets, adapters, settings] = await Promise.all([
|
||||
const [presets, adapters, settings, active] = await Promise.all([
|
||||
api("/api/presets"),
|
||||
api("/api/adapters"),
|
||||
api("/api/settings"),
|
||||
api("/api/active"),
|
||||
]);
|
||||
|
||||
state.presets = presets.presets || [];
|
||||
state.groups = presets.groups || [];
|
||||
state.adapters = adapters.adapters || [];
|
||||
state.settings = settings;
|
||||
state.active = active || { active_id: "", active_name: "" };
|
||||
|
||||
renderStats();
|
||||
renderPresets();
|
||||
renderAdapters();
|
||||
|
||||
document.getElementById("group-list").innerHTML = state.groups
|
||||
.map((g) => `<option value="${escapeHTML(g)}">`)
|
||||
.join("");
|
||||
document.getElementById("f-adapter").innerHTML = state.adapters
|
||||
$("group-list").innerHTML = state.groups.map((g) => `<option value="${escapeHTML(g)}">`).join("");
|
||||
$("f-adapter").innerHTML = state.adapters
|
||||
.map((a) => `<option value="${escapeHTML(a.name)}">${escapeHTML(a.name)}</option>`)
|
||||
.join("");
|
||||
}
|
||||
|
||||
// Keep the "live" marker honest without a reload: something outside ipswap can
|
||||
// change the network at any time.
|
||||
setInterval(async () => {
|
||||
try {
|
||||
const active = await api("/api/active");
|
||||
if (active.active_id !== state.active.active_id) {
|
||||
state.active = active;
|
||||
renderStats();
|
||||
renderPresets();
|
||||
}
|
||||
} catch {
|
||||
// A dropped poll is not worth reporting; the next one will tell us.
|
||||
}
|
||||
}, 15_000);
|
||||
|
||||
// --- apply ---
|
||||
|
||||
const confirmDlg = $("confirm");
|
||||
|
||||
async function openConfirm(id) {
|
||||
const p = state.presets.find((x) => x.id === id);
|
||||
state.pendingApply = id;
|
||||
|
||||
$("confirm-title").textContent = `Apply "${p ? p.name : id}"`;
|
||||
$("confirm-diff").textContent = "Reading the adapter…";
|
||||
clearAlert("confirm-error");
|
||||
$("confirm-go").disabled = true;
|
||||
confirmDlg.showModal();
|
||||
|
||||
try {
|
||||
// Read live at prompt time, exactly as the tray does. A stale CURRENT
|
||||
// block would undermine the only check before a destructive change.
|
||||
const prev = await api(`/api/presets/${encodeURIComponent(id)}/preview`);
|
||||
$("confirm-diff").textContent = prev.text;
|
||||
$("confirm-go").disabled = false;
|
||||
} catch (e) {
|
||||
$("confirm-diff").textContent = "";
|
||||
alertBox("error", e.message, "confirm-error");
|
||||
}
|
||||
}
|
||||
|
||||
$("confirm-cancel").addEventListener("click", () => {
|
||||
state.pendingApply = null;
|
||||
confirmDlg.close();
|
||||
});
|
||||
|
||||
$("confirm-go").addEventListener("click", async () => {
|
||||
const id = state.pendingApply;
|
||||
if (!id) return;
|
||||
|
||||
const btn = $("confirm-go");
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = `<span class="spinner"></span> Applying…`;
|
||||
clearAlert("confirm-error");
|
||||
|
||||
try {
|
||||
const active = await api(`/api/presets/${encodeURIComponent(id)}/apply`, { method: "POST" });
|
||||
state.active = active;
|
||||
confirmDlg.close();
|
||||
await loadAll();
|
||||
alertBox("ok", `Applied "${active.active_name || "preset"}".`);
|
||||
} catch (e) {
|
||||
// The server answers 409 when netsh refused for lack of an elevated token,
|
||||
// which has a specific next step rather than being a generic failure.
|
||||
if (e.data && e.data.elevation_required) {
|
||||
alertBox(
|
||||
"warn",
|
||||
"This needs administrator rights. Use \"Relaunch as administrator\" in the tray menu, then try again.",
|
||||
"confirm-error"
|
||||
);
|
||||
} else {
|
||||
alertBox("error", e.message, "confirm-error");
|
||||
}
|
||||
btn.disabled = false;
|
||||
} finally {
|
||||
btn.textContent = "Apply";
|
||||
}
|
||||
});
|
||||
|
||||
// --- editor ---
|
||||
|
||||
const editor = document.getElementById("editor");
|
||||
const editor = $("editor");
|
||||
|
||||
function secondaryRow(addr = "", prefix = "") {
|
||||
const div = document.createElement("div");
|
||||
div.className = "sec-row";
|
||||
div.innerHTML = `
|
||||
<input class="sec-addr" placeholder="10.0.10.50" value="${escapeHTML(addr)}">
|
||||
<input class="sec-prefix" placeholder="/24" value="${escapeHTML(prefix)}" style="max-width:150px">
|
||||
<button type="button" class="small ghost sec-del">✕</button>`;
|
||||
<input class="input sec-addr" placeholder="10.0.10.50" value="${escapeHTML(addr)}">
|
||||
<input class="input narrow sec-prefix" placeholder="/24" value="${escapeHTML(prefix)}">
|
||||
<button type="button" class="btn btn-sm btn-ghost sec-del">Remove</button>`;
|
||||
div.querySelector(".sec-del").addEventListener("click", () => div.remove());
|
||||
return div;
|
||||
}
|
||||
@@ -228,52 +327,48 @@ function openEditor(id) {
|
||||
const p = id ? state.presets.find((x) => x.id === id) : null;
|
||||
state.editing = p ? p.id : null;
|
||||
|
||||
document.getElementById("editor-title").textContent = p ? "Edit preset" : "New preset";
|
||||
document.getElementById("editor-error").innerHTML = "";
|
||||
document.getElementById("f-name").value = p ? p.name : "";
|
||||
document.getElementById("f-group").value = p ? p.group || "" : "";
|
||||
document.getElementById("f-adapter").value = p ? p.adapter : (state.adapters[0] || {}).name || "";
|
||||
document.getElementById("f-mode").value = p ? p.mode : "static";
|
||||
document.getElementById("f-notes").value = p ? p.notes || "" : "";
|
||||
$("editor-title").textContent = p ? "Edit preset" : "New preset";
|
||||
clearAlert("editor-error");
|
||||
$("f-name").value = p ? p.name : "";
|
||||
$("f-group").value = p ? p.group || "" : "";
|
||||
$("f-adapter").value = p ? p.adapter : (state.adapters[0] || {}).name || "";
|
||||
$("f-mode").value = p ? p.mode : "static";
|
||||
$("f-notes").value = p ? p.notes || "" : "";
|
||||
|
||||
const prim = (p && p.primary) || {};
|
||||
document.getElementById("f-address").value = prim.address || "";
|
||||
document.getElementById("f-prefix").value = prim.prefix !== undefined ? maskOf(prim.prefix) : "";
|
||||
document.getElementById("f-gateway").value = prim.gateway || "";
|
||||
document.getElementById("f-metric").value = prim.gateway_metric || 0;
|
||||
$("f-address").value = prim.address || "";
|
||||
$("f-prefix").value = prim.prefix !== undefined ? maskOf(prim.prefix) : "";
|
||||
$("f-gateway").value = prim.gateway || "";
|
||||
$("f-metric").value = prim.gateway_metric || 0;
|
||||
|
||||
const secs = document.getElementById("secondaries");
|
||||
const secs = $("secondaries");
|
||||
secs.innerHTML = "";
|
||||
for (const s of (p && p.secondary) || []) secs.appendChild(secondaryRow(s.address, maskOf(s.prefix)));
|
||||
|
||||
document.getElementById("f-dns-mode").value = p ? p.dns.mode : "static";
|
||||
document.getElementById("f-dns").value = p ? (p.dns.servers || []).join(", ") : "";
|
||||
$("f-dns-mode").value = p ? p.dns.mode : "static";
|
||||
$("f-dns").value = p ? (p.dns.servers || []).join(", ") : "";
|
||||
|
||||
syncModeVisibility();
|
||||
editor.showModal();
|
||||
}
|
||||
|
||||
function syncModeVisibility() {
|
||||
const isDHCP = document.getElementById("f-mode").value === "dhcp";
|
||||
document.getElementById("static-fields").classList.toggle("hidden", isDHCP);
|
||||
const dnsStatic = document.getElementById("f-dns-mode").value === "static";
|
||||
document.getElementById("dns-servers-field").classList.toggle("hidden", !dnsStatic);
|
||||
$("static-fields").hidden = $("f-mode").value === "dhcp";
|
||||
$("dns-servers-field").hidden = $("f-dns-mode").value !== "static";
|
||||
}
|
||||
|
||||
document.getElementById("f-mode").addEventListener("change", syncModeVisibility);
|
||||
document.getElementById("f-dns-mode").addEventListener("change", syncModeVisibility);
|
||||
document.getElementById("btn-add-sec").addEventListener("click", () =>
|
||||
document.getElementById("secondaries").appendChild(secondaryRow())
|
||||
);
|
||||
document.getElementById("btn-new").addEventListener("click", () => openEditor(null));
|
||||
document.getElementById("btn-cancel").addEventListener("click", () => editor.close());
|
||||
$("f-mode").addEventListener("change", syncModeVisibility);
|
||||
$("f-dns-mode").addEventListener("change", syncModeVisibility);
|
||||
$("btn-add-sec").addEventListener("click", () => $("secondaries").appendChild(secondaryRow()));
|
||||
$("btn-new").addEventListener("click", () => openEditor(null));
|
||||
$("btn-cancel").addEventListener("click", () => editor.close());
|
||||
|
||||
// Masks are parsed here so the editor accepts both spellings, matching the Go
|
||||
// side's ParsePrefix. Anything malformed is reported before the request goes
|
||||
// out rather than coming back as a server-side validation error.
|
||||
// Masks are parsed here so both spellings are accepted client-side, mirroring
|
||||
// ParsePrefix in Go. Malformed input is caught before the request goes out.
|
||||
function parsePrefix(s) {
|
||||
s = (s || "").trim().replace(/^\//, "");
|
||||
if (!s) throw new Error("mask is required");
|
||||
|
||||
if (s.includes(".")) {
|
||||
const parts = s.split(".").map(Number);
|
||||
if (parts.length !== 4 || parts.some((n) => !Number.isInteger(n) || n < 0 || n > 255)) {
|
||||
@@ -285,39 +380,40 @@ function parsePrefix(s) {
|
||||
if (ones < 32 && (m << ones) >>> 0) throw new Error(`"${s}" is not a contiguous netmask`);
|
||||
return ones;
|
||||
}
|
||||
|
||||
const n = Number(s);
|
||||
if (!Number.isInteger(n) || n < 0 || n > 32) throw new Error(`"${s}" is not a prefix length`);
|
||||
return n;
|
||||
}
|
||||
|
||||
async function savePreset() {
|
||||
const mode = document.getElementById("f-mode").value;
|
||||
const dnsMode = document.getElementById("f-dns-mode").value;
|
||||
const mode = $("f-mode").value;
|
||||
const dnsMode = $("f-dns-mode").value;
|
||||
|
||||
let body;
|
||||
try {
|
||||
body = {
|
||||
id: state.editing || "",
|
||||
name: document.getElementById("f-name").value.trim(),
|
||||
group: document.getElementById("f-group").value.trim(),
|
||||
adapter: document.getElementById("f-adapter").value,
|
||||
name: $("f-name").value.trim(),
|
||||
group: $("f-group").value.trim(),
|
||||
adapter: $("f-adapter").value,
|
||||
mode,
|
||||
notes: document.getElementById("f-notes").value.trim(),
|
||||
notes: $("f-notes").value.trim(),
|
||||
dns: {
|
||||
mode: dnsMode,
|
||||
servers:
|
||||
dnsMode === "static"
|
||||
? document.getElementById("f-dns").value.split(",").map((s) => s.trim()).filter(Boolean)
|
||||
? $("f-dns").value.split(",").map((s) => s.trim()).filter(Boolean)
|
||||
: undefined,
|
||||
},
|
||||
};
|
||||
|
||||
if (mode === "static") {
|
||||
body.primary = {
|
||||
address: document.getElementById("f-address").value.trim(),
|
||||
prefix: parsePrefix(document.getElementById("f-prefix").value),
|
||||
gateway: document.getElementById("f-gateway").value.trim() || undefined,
|
||||
gateway_metric: Number(document.getElementById("f-metric").value) || undefined,
|
||||
address: $("f-address").value.trim(),
|
||||
prefix: parsePrefix($("f-prefix").value),
|
||||
gateway: $("f-gateway").value.trim() || undefined,
|
||||
gateway_metric: Number($("f-metric").value) || undefined,
|
||||
};
|
||||
const secs = [];
|
||||
for (const row of document.querySelectorAll("#secondaries .sec-row")) {
|
||||
@@ -328,7 +424,7 @@ async function savePreset() {
|
||||
if (secs.length) body.secondary = secs;
|
||||
}
|
||||
} catch (e) {
|
||||
alertBox("danger", e.message, "editor-error");
|
||||
alertBox("error", e.message, "editor-error");
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -339,11 +435,11 @@ async function savePreset() {
|
||||
await loadAll();
|
||||
alertBox("ok", "Preset saved.");
|
||||
} catch (e) {
|
||||
alertBox("danger", e.message, "editor-error");
|
||||
alertBox("error", e.message, "editor-error");
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("btn-save").addEventListener("click", savePreset);
|
||||
$("btn-save").addEventListener("click", savePreset);
|
||||
|
||||
async function deletePreset(id) {
|
||||
const p = state.presets.find((x) => x.id === id);
|
||||
@@ -353,83 +449,85 @@ async function deletePreset(id) {
|
||||
await loadAll();
|
||||
alertBox("ok", "Preset deleted.");
|
||||
} catch (e) {
|
||||
alertBox("danger", e.message);
|
||||
alertBox("error", e.message);
|
||||
}
|
||||
}
|
||||
|
||||
// --- settings ---
|
||||
|
||||
const settingsDlg = document.getElementById("settings");
|
||||
const settingsDlg = $("settings");
|
||||
|
||||
document.getElementById("btn-settings").addEventListener("click", () => {
|
||||
$("btn-settings").addEventListener("click", () => {
|
||||
const s = state.settings || {};
|
||||
document.getElementById("s-mask").value = s.mask_style || "prefix";
|
||||
document.getElementById("s-startup").checked = !!s.start_with_windows;
|
||||
document.getElementById("s-updates").checked = !!s.check_updates;
|
||||
document.getElementById("s-repo").value = s.update_repo || "";
|
||||
$("s-mask").value = s.mask_style || "prefix";
|
||||
$("s-startup").checked = !!s.start_with_windows;
|
||||
$("s-updates").checked = !!s.check_updates;
|
||||
$("s-repo").value = s.update_repo || "";
|
||||
settingsDlg.showModal();
|
||||
});
|
||||
|
||||
document.getElementById("btn-settings-cancel").addEventListener("click", () => settingsDlg.close());
|
||||
$("btn-settings-cancel").addEventListener("click", () => settingsDlg.close());
|
||||
|
||||
document.getElementById("btn-settings-save").addEventListener("click", async () => {
|
||||
$("btn-settings-save").addEventListener("click", async () => {
|
||||
try {
|
||||
await api("/api/settings", {
|
||||
method: "PUT",
|
||||
body: JSON.stringify({
|
||||
mask_style: document.getElementById("s-mask").value,
|
||||
start_with_windows: document.getElementById("s-startup").checked,
|
||||
check_updates: document.getElementById("s-updates").checked,
|
||||
update_repo: document.getElementById("s-repo").value.trim(),
|
||||
mask_style: $("s-mask").value,
|
||||
start_with_windows: $("s-startup").checked,
|
||||
check_updates: $("s-updates").checked,
|
||||
update_repo: $("s-repo").value.trim(),
|
||||
}),
|
||||
});
|
||||
settingsDlg.close();
|
||||
await loadAll();
|
||||
alertBox("ok", "Settings saved.");
|
||||
} catch (e) {
|
||||
alertBox("danger", e.message);
|
||||
alertBox("error", e.message);
|
||||
}
|
||||
});
|
||||
|
||||
// --- import / export ---
|
||||
|
||||
document.getElementById("btn-export").addEventListener("click", () => {
|
||||
$("btn-export").addEventListener("click", () => {
|
||||
// A plain navigation, so the browser's own download UI picks the location.
|
||||
location.href = "/api/export";
|
||||
});
|
||||
|
||||
const importDlg = document.getElementById("import");
|
||||
document.getElementById("btn-import").addEventListener("click", () => {
|
||||
document.getElementById("import-error").innerHTML = "";
|
||||
const importDlg = $("import");
|
||||
|
||||
$("btn-import").addEventListener("click", () => {
|
||||
clearAlert("import-error");
|
||||
importDlg.showModal();
|
||||
});
|
||||
document.getElementById("btn-import-cancel").addEventListener("click", () => importDlg.close());
|
||||
|
||||
document.getElementById("btn-import-go").addEventListener("click", async () => {
|
||||
const file = document.getElementById("i-file").files[0];
|
||||
$("btn-import-cancel").addEventListener("click", () => importDlg.close());
|
||||
|
||||
$("btn-import-go").addEventListener("click", async () => {
|
||||
const file = $("i-file").files[0];
|
||||
if (!file) {
|
||||
alertBox("danger", "Choose a file first.", "import-error");
|
||||
return;
|
||||
}
|
||||
const mode = document.getElementById("i-mode").value;
|
||||
if (mode === "replace" && !confirm("Replace discards every preset you currently have. Continue?")) {
|
||||
alertBox("error", "Choose a file first.", "import-error");
|
||||
return;
|
||||
}
|
||||
|
||||
const mode = $("i-mode").value;
|
||||
if (mode === "replace" && !confirm("Replace discards every preset you currently have. Continue?")) return;
|
||||
|
||||
try {
|
||||
const res = await api(`/api/import?mode=${mode}`, { method: "POST", body: await file.text() });
|
||||
importDlg.close();
|
||||
await loadAll();
|
||||
|
||||
let msg = `Imported ${res.added} preset${res.added === 1 ? "" : "s"}.`;
|
||||
if (res.renamed && res.renamed.length) {
|
||||
msg += ` ${res.renamed.length} had an id collision and were kept alongside the originals.`;
|
||||
}
|
||||
alertBox("ok", msg);
|
||||
} catch (e) {
|
||||
alertBox("danger", e.message, "import-error");
|
||||
alertBox("error", e.message, "import-error");
|
||||
}
|
||||
});
|
||||
|
||||
// --- go ---
|
||||
|
||||
loadAll().catch((e) => alertBox("danger", `Could not load: ${e.message}`));
|
||||
loadAll().catch((e) => alertBox("error", `Could not load: ${e.message}`));
|
||||
|
||||
Reference in New Issue
Block a user