0.36.4

src/admin/web/app/core.js

@@ -668,3 +668,62 @@ $("tunnels-dialog").addEventListener("close", stopTunnelRefresh);
 $("config-editor").addEventListener("input", () => setSettingsDirty("config-editor"));
 $("save-json").addEventListener("click", async event => { const editor = $("config-editor"), page = editor.closest("[data-settings-page]"); if (!envelope || busy) return; try { await withFormSubmitState(page, event.currentTarget, async () => { let config; try { config = JSON.parse(editor.value); } catch { throw fieldError(editor, t("vhJsonInvalid")); } if (await save(config)) setSettingsDirty("config-editor", false); }); } catch (e) { toast(e.message, true); } });
 $("export-config").addEventListener("click", () => { const url = URL.createObjectURL(new Blob([JSON.stringify(envelope.config, null, 2) + "\n"], { type: "application/json" })); const a = el("a"); a.href = url; a.download = `RustProxy-config-r${envelope.revision}.json`; a.click(); setTimeout(() => URL.revokeObjectURL(url), 1000); });
+
+// Auto-generated identifiers: a new entry's ID follows its name (or first host) as a unique slug until the user edits the ID by hand.
+const rustProxyAutoId = (() => {
+    const FOLD = { "ł": "l", "đ": "d", "ø": "o", "ß": "ss", "æ": "ae", "œ": "oe", "þ": "th", "ð": "d" };
+    const states = new WeakMap();
+    function slugify(value, max = 64) {
+        let slug = String(value ?? "").trim().toLowerCase().replace(/^\*\./, "").replace(/[łđøßæœþð]/g, ch => FOLD[ch]).normalize("NFKD").replace(/[̀-ͯ]/g, "");
+        slug = slug.replace(/[^a-z0-9_-]+/g, "-").replace(/-{2,}/g, "-").replace(/^[-_]+/, "").slice(0, max).replace(/[-_]+$/, "");
+        return slug;
+    }
+    function unique(base, taken) {
+        if (!base) return "";
+        const used = new Set([...taken].map(value => String(value).toLowerCase()));
+        if (!used.has(base)) return base;
+        for (let n = 2; n < 10000; n++) { const suffix = `-${n}`, candidate = base.slice(0, 64 - suffix.length).replace(/[-_]+$/, "") + suffix; if (!used.has(candidate)) return candidate; }
+        return base;
+    }
+    const locked = input => input.readOnly || input.disabled;
+    function suggestion(state) { return unique(slugify(state.text()), state.taken()); }
+    // The ID is shown as a plain value with a "Change" link; the input only appears after the user asks for it (or when validation needs it).
+    function paint(input, state) {
+        const isLocked = locked(input), wanted = suggestion(state), value = input.value.trim(), compact = !state.open || isLocked;
+        state.holder.classList.toggle("is-compact", compact);
+        state.value.textContent = value || t("autoIdPending");
+        state.value.classList.toggle("is-pending", !value);
+        state.badge.hidden = !state.auto || !value; state.badge.textContent = t("autoIdBadge");
+        state.change.hidden = isLocked; state.change.textContent = t("autoIdChange");
+        state.row.hidden = !compact;
+        state.hint.hidden = compact || !state.auto; state.hint.textContent = t("autoIdHint");
+        state.reset.hidden = compact || state.auto || state.resettable === false || !wanted || wanted === value; state.reset.textContent = t("autoIdReset");
+    }
+    function regenerate(input, state) { if (!state.auto || locked(input)) return; input.value = suggestion(state); input.setCustomValidity?.(""); paint(input, state); }
+    // options: { elements: inputs whose changes drive the ID, text: () => source string, taken: () => existing IDs }
+    function attach(input, options) {
+        let state = states.get(input);
+        if (!state) {
+            state = { auto: true, open: false, holder: input.closest("label") || input.parentElement, hint: document.createElement("small"), reset: document.createElement("button"), row: document.createElement("div"), value: document.createElement("code"), badge: document.createElement("span"), change: document.createElement("button") };
+            state.holder.classList.add("auto-id-field");
+            state.hint.className = "fine auto-id-hint"; state.reset.type = "button"; state.reset.className = "quiet auto-id-reset";
+            state.row.className = "auto-id-row"; state.value.className = "auto-id-value"; state.badge.className = "auto-id-badge"; state.change.type = "button"; state.change.className = "quiet auto-id-change";
+            state.row.append(state.value, state.badge, state.change); state.holder.append(state.row, state.hint, state.reset);
+            input.addEventListener("input", event => { if (!event.isTrusted) return; state.auto = input.value.trim() === ""; if (state.auto) regenerate(input, state); else paint(input, state); });
+            input.addEventListener("invalid", () => { if (!state.open) { state.open = true; paint(input, state); } });
+            input.addEventListener("blur", () => { if (input.value.trim() && input.validity.valid) { state.open = false; paint(input, state); } });
+            state.change.addEventListener("click", () => { state.open = true; paint(input, state); input.focus(); input.select?.(); });
+            state.reset.addEventListener("mousedown", event => event.preventDefault());
+            state.reset.addEventListener("click", () => { state.auto = true; regenerate(input, state); input.dispatchEvent(new Event("input", { bubbles: true })); });
+            states.set(input, state);
+            for (const source of options.elements || []) source.addEventListener("input", () => { const current = states.get(input); if (current) regenerate(input, current); });
+        }
+        state.text = options.text || (() => (options.elements || []).map(node => node.value).find(value => value.trim()) || "");
+        state.taken = options.taken || (() => []); state.resettable = options.resettable;
+        state.auto = !locked(input) && input.value.trim() === ""; state.open = false;
+        paint(input, state);
+        return { refresh() { const current = states.get(input); if (current) regenerate(input, current); } };
+    }
+    return { slugify, unique, attach };
+})();
+window.rustProxyAutoId = rustProxyAutoId;