v0.34.5

src/admin/web/vhosts/core.js

@@ -20,10 +20,18 @@ const field = (parent, name, key, value, type = "text", options = {}) => {
 };
 const group = (key, advanced = false) => {
   const box = el(advanced ? "details" : "fieldset", undefined, "vh-group");
-  box.dataset.tab = ({ vhEditor: "details", vhFrontends: "details", vhBackendPool: "backends", vhBackendDiagnostics: "backends", vhProxyTimeouts: "backends", vhBalancing: "backends", vhSticky: "backends", vhHealth: "health", vhPassiveHealth: "health", vhSecurity: "security", vhTrafficPolicy: "security", vhTinyauth: "auth", vhResponsePolicy: "security", vhHeaders: "security", vhAdvanced: "advanced", vhLocations: "locations", vhSsl: "ssl", vhCache: "cache", vhCompression: "compression", vhTransform: "transform", vhPages: "pages" })[key] || "advanced"; box.append(text(advanced ? "summary" : "legend", key));
+  box.dataset.tab = ({ vhEditor: "details", vhFrontends: "details", vhBackendPool: "backends", vhBackendDiagnostics: "backends", vhProxyTimeouts: "backends", vhBalancing: "backends", vhSticky: "backends", vhHealth: "health", vhPassiveHealth: "health", vhSecurity: "security", vhTrafficPolicy: "security", vhTinyauth: "auth", vhResponsePolicy: "security", vhHeaders: "security", vhAdvanced: "advanced", vhLocations: "locations", vhSsl: "ssl", vhSslSettings: "ssl", vhCache: "cache", vhCompression: "compression", vhTransform: "transform", vhPages: "pages" })[key] || "advanced"; box.append(text(advanced ? "summary" : "legend", key));
   const body = el("div", undefined, "vh-grid"); box.append(body); container.append(box); return body;
 };
 const note = (parent, key) => { const node = text("p", key, "fine vh-wide"); parent.append(node); return node; };
+// Presentation-only subgroup: all existing inputs remain inside their original form.
+const subsection = (parent, key) => {
+  const box = el("section", undefined, "vh-wide vh-setting-section");
+  box.append(text("h3", key));
+  const body = el("div", undefined, "vh-grid");
+  box.append(body); parent.append(box);
+  return body;
+};
 const button = (key, callback, cls = "quiet") => { const b = text("button", key, cls); b.type = "button"; b.addEventListener("click", callback); return b; };
 const read = (name, scope = form) => scope.querySelector(`[name="${name}"]`);
 const str = (name, scope) => read(name, scope).value.trim();
@@ -403,17 +411,21 @@ function locationsEditor(parent, values) {
     note(handlingBody, "locationRewriteHelp");
 
     const extra = el("details", undefined, "vh-wide location-section"), accessBody = el("div", undefined, "vh-grid"); extra.append(text("summary", "locationAccess"), accessBody); body.append(extra);
-    const locationProfile = field(accessBody, "location-acl-profile", "locationAclProfile", value.acl_profile_id || "", "select");
+    const locationProfiles = subsection(accessBody, "vhAclProfile");
+    const locationProfile = field(locationProfiles, "location-acl-profile", "locationAclProfile", value.acl_profile_id || "", "select");
     const locationNoProfile = text("option", "vhAclProfileNone"); locationNoProfile.value = "";
     locationProfile.append(locationNoProfile, ...(envelope?.config.acl_profiles || []).map(profile => { const option = el("option", profile.name || profile.id); option.value = profile.id; return option; }));
     locationProfile.value = value.acl_profile_id || "";
-    field(accessBody, "location-method-mode", "locationMethodMode", value.method_policy?.mode || "off", "select", { values: [["off", "vhOff"], ["allow", "locationMethodAllow"], ["block", "locationMethodBlock"]] });
-    field(accessBody, "location-method-list", "locationMethodList", (value.method_policy?.methods || []).join("\n"), "textarea", { rows: 3, maxLength: 1024 });
-    note(accessBody, "locationMethodHelp");
-    field(accessBody, "location-country-mode", "locationCountryMode", value.country_access?.mode || "off", "select", { values: [["off", "vhOff"], ["block", "vhCountryBlock"], ["allow", "vhCountryAllow"]] });
-    field(accessBody, "location-country-list", "locationCountryList", (value.country_access?.countries || []).join("\n"), "textarea", { rows: 3, maxLength: 1024 });
-    note(accessBody, "locationCountryHelp");
-    const acl = aclEditor(accessBody, value.acl, sync); row.readAcl = () => acl.read();
+    const locationMethods = subsection(accessBody, "vhTrafficMethodsSection");
+    field(locationMethods, "location-method-mode", "locationMethodMode", value.method_policy?.mode || "off", "select", { values: [["off", "vhOff"], ["allow", "locationMethodAllow"], ["block", "locationMethodBlock"]] });
+    field(locationMethods, "location-method-list", "locationMethodList", (value.method_policy?.methods || []).join("\n"), "textarea", { rows: 3, maxLength: 1024 });
+    note(locationMethods, "locationMethodHelp");
+    const locationCountries = subsection(accessBody, "vhTrafficCountrySection");
+    field(locationCountries, "location-country-mode", "locationCountryMode", value.country_access?.mode || "off", "select", { values: [["off", "vhOff"], ["block", "vhCountryBlock"], ["allow", "vhCountryAllow"]] });
+    field(locationCountries, "location-country-list", "locationCountryList", (value.country_access?.countries || []).join("\n"), "textarea", { rows: 3, maxLength: 1024 });
+    note(locationCountries, "locationCountryHelp");
+    const locationAcl = subsection(accessBody, "vhLocationIpAclSection");
+    const acl = aclEditor(locationAcl, value.acl, sync); row.readAcl = () => acl.read();
     const headerBox = el("details", undefined, "vh-wide location-section location-header-editor"), headerBody = el("div", undefined, "vh-grid"); headerBox.append(text("summary", "locationHeaders"), headerBody); body.append(headerBox);
     const headerToolbar = el("div", undefined, "vh-wide location-header-toolbar"), visualPane = el("div", undefined, "vh-wide vh-grid"), jsonPane = el("div", undefined, "vh-wide vh-grid"); jsonPane.hidden = true;
     const visualButton = button("headersVisualBuilder", () => { visualPane.hidden = false; jsonPane.hidden = true; }), jsonButton = button("headersAdvancedJson", () => { visualPane.hidden = true; jsonPane.hidden = false; }), docsButton = button("documentation", () => openLocationHelp("headers"));