From 1e79e95afd2df19f3ba4794a81230758af644601 Mon Sep 17 00:00:00 2001 From: Tim Wilkinson Date: Tue, 8 Oct 2024 21:01:07 -0700 Subject: [PATCH] Make the validation simpler (#1569) --- files/app/main/status/e/local-services.ut | 71 +++++------- files/app/main/status/e/ports-and-xlinks.ut | 19 ++-- files/app/main/status/e/tunnels.ut | 118 ++++++++++---------- 3 files changed, 91 insertions(+), 117 deletions(-) diff --git a/files/app/main/status/e/local-services.ut b/files/app/main/status/e/local-services.ut index 0395ec16..c8f5e67c 100755 --- a/files/app/main/status/e/local-services.ut +++ b/files/app/main/status/e/local-services.ut @@ -377,8 +377,10 @@ if (f) { const hosts = {{hosts}}; function updateServices() { + if (!htmx.closest(htmx.find("#local-services"), "form").checkValidity()) { + return; + } const services = []; - let invalid = 0; const svc = htmx.findAll("#local-services .service"); for (let i = 0; i < svc.length; i++) { const s = svc[i]; @@ -389,57 +391,41 @@ if (f) { const port = htmx.find(s, "input[name=port]"); const path = htmx.find(s, "input[name=path]"); if (protocol && port && path) { - if (name.validity.valid && protocol.validity.valid && port.validity.valid && path.validity.valid) { - services.push(`${name.value}${type.value ? " [" + type.value + "]" : ""}|1|${protocol.value}|${host.value}|${port.value}|${path.value}`); - } - else { - invalid++; - } + services.push(`${name.value}${type.value ? " [" + type.value + "]" : ""}|1|${protocol.value}|${host.value}|${port.value}|${path.value}`); } else { - if (name.validity.valid) { - services.push(`${name.value}${type.value ? " [" + type.value + "]" : ""}|0||${host.value}||`); - } - else { - invalid++; - } + services.push(`${name.value}${type.value ? " [" + type.value + "]" : ""}|0||${host.value}||`); } } - if (invalid === 0) { - htmx.ajax("PUT", "{{request.env.REQUEST_URI}}", { - swap: "none", - values: { services: JSON.stringify(services) } - }); - htmx.find("#dialog-done").disabled = false; - } + htmx.ajax("PUT", "{{request.env.REQUEST_URI}}", { + swap: "none", + values: { services: JSON.stringify(services) } + }); } function updateAliases() { + if (!htmx.closest(htmx.find("#host-aliases"), "form").checkValidity()) { + return; + } const aliases = []; - let invalid = 0; const al = htmx.findAll("#host-aliases .alias"); for (let i = 0; i < al.length; i++) { const s = al[i]; const hostname = htmx.find(s, "input[name=hostname]"); const address = htmx.find(s, "select[name=address]"); - if (hostname.validity.valid) { - aliases.push(`${address.value} ${hostname.value}`); - } - else { - invalid++; - } - } - if (invalid === 0) { - htmx.ajax("PUT", "{{request.env.REQUEST_URI}}", { - swap: "none", - values: { aliases: JSON.stringify(aliases) } - }); + aliases.push(`${address.value} ${hostname.value}`); } + htmx.ajax("PUT", "{{request.env.REQUEST_URI}}", { + swap: "none", + values: { aliases: JSON.stringify(aliases) } + }); } function updatePortForwards() { + if (!htmx.closest(htmx.find("#port-forwards"), "form").checkValidity()) { + return; + } const ports = []; - let invalid = 0; const rows = htmx.findAll("#port-forwards .cols .row"); for (let i = 0; i < rows.length; i++) { const r = rows[i]; @@ -449,19 +435,12 @@ if (f) { const dst = htmx.find(r, "[name=port_dst]"); const dport = htmx.find(r, "[name=port_dport]"); const enabled = htmx.find(r, "[name=port_enable]"); - if (sports.validity.valid && dport.validity.valid) { - ports.push(`${src.value}:${type.value}:${sports.value}:${dst.value}:${dport.value}:${enabled.checked ? "1" : "0"}`); - } - else { - invalid++; - } - } - if (invalid === 0) { - htmx.ajax("PUT", "{{request.env.REQUEST_URI}}", { - swap: "none", - values: { ports: JSON.stringify(ports) } - }); + ports.push(`${src.value}:${type.value}:${sports.value}:${dst.value}:${dport.value}:${enabled.checked ? "1" : "0"}`); } + htmx.ajax("PUT", "{{request.env.REQUEST_URI}}", { + swap: "none", + values: { ports: JSON.stringify(ports) } + }); } function refreshHostSelectors() { diff --git a/files/app/main/status/e/ports-and-xlinks.ut b/files/app/main/status/e/ports-and-xlinks.ut index dc976609..bb3cdbef 100755 --- a/files/app/main/status/e/ports-and-xlinks.ut +++ b/files/app/main/status/e/ports-and-xlinks.ut @@ -388,6 +388,9 @@ uciMesh.foreach("xlink", "interface", x => { }); } htmx.on("#ctrl-modal .dialog #xlink-list", "change", event => { + if (!htmx.closest(htmx.find("#ctrl-modal .dialog #xlink-list"), "form").checkValidity()) { + return; + } const target = htmx.closest(event.target, "[data-name]"); const xlink = xlinks.find(x => x.name == target.dataset.name); const vlan = htmx.find(target, "[name=vlan]"); @@ -396,15 +399,13 @@ uciMesh.foreach("xlink", "interface", x => { const weight = htmx.find(target, "[name=weight]"); const port = htmx.find(target, "[name=port]"); const cidr = htmx.find(target, "[name=cidr]"); - if (vlan.validity.valid && ipaddr.validity.valid && peer.validity.valid && weight.validity.valid) { - xlink.vlan = parseInt(vlan.value); - xlink.ipaddr = ipaddr.value; - xlink.peer = peer.value; - xlink.weight = parseInt(weight.value); - xlink.port = port ? port.value : null; - xlink.cidr = parseInt(cidr.value); - update(); - } + xlink.vlan = parseInt(vlan.value); + xlink.ipaddr = ipaddr.value; + xlink.peer = peer.value; + xlink.weight = parseInt(weight.value); + xlink.port = port ? port.value : null; + xlink.cidr = parseInt(cidr.value); + update(); }); htmx.on("#ctrl-modal .dialog #xlink-list", "click", event => { if (event.target.nodeName === "BUTTON") { diff --git a/files/app/main/status/e/tunnels.ut b/files/app/main/status/e/tunnels.ut index ab08e5f1..71e4ceea 100755 --- a/files/app/main/status/e/tunnels.ut +++ b/files/app/main/status/e/tunnels.ut @@ -379,9 +379,11 @@ This value is used by default, but each tunnel may overide it. const available = {{sprintf("%J", available)}}; function updateTunnels() { + if (!htmx.closest(htmx.find("#tunnels"), "form").checkValidity()) { + return; + } const tunnels = []; let servercount = 0; - let invalid = 0; const tuns = htmx.findAll("#tunnels .tunnel"); for (let i = 0; i < tuns.length; i++) { const t = tuns[i]; @@ -394,77 +396,68 @@ This value is used by default, but each tunnel may overide it. const notes = htmx.find(t, "input[name=notes]"); const enable = htmx.find(t, "input[name=enable]"); const weight = htmx.find(t, "input[name=weight]"); - if (name.validity.valid && password.validity.valid && network.validity.valid && notes.validity.valid && weight.validity.valid) { - tunnels.push({ - index: index, - type: type, - name: name.value, - enabled: enable.checked, - notes: notes.value || "", - network: network.value, - passwd: password.value, - key: key && key.value, - weight: weight.value - }); - } - else { - invalid++; - } + tunnels.push({ + index: index, + type: type, + name: name.value, + enabled: enable.checked, + notes: notes.value || "", + network: network.value, + passwd: password.value, + key: key && key.value, + weight: weight.value + }); if (type === "ls" || type === "ws") { servercount++; } } - if (invalid === 0) { - htmx.ajax("PUT", "{{request.env.REQUEST_URI}}", { - swap: "none", - values: { tunnels: JSON.stringify(tunnels) } - }); - } - const start = htmx.find("input[name=tunnel_range_start]"); - if (start) { - start.disabled = servercount > 0 ? true : false; - } + htmx.ajax("PUT", "{{request.env.REQUEST_URI}}", { + swap: "none", + values: { tunnels: JSON.stringify(tunnels) } + }); + {% if (includeAdvanced) { %} + htmx.find("input[name=tunnel_range_start]").disabled = servercount > 0 ? true : false; + {% } %} } htmx.on("input[name=tunnel_server]", "change", e => { if (e.target.validity.valid) { server = e.target.value; } }); - const rangeStart = htmx.find("input[name=tunnel_range_start]"); - if (rangeStart) { - htmx.on(rangeStart, "change", e => { - available.l = {}; - available.w = {}; - if (e.target.validity.valid) { - const l = e.target.value.split(".").map(v => parseInt(v)); - const w = [ l[0], l[1], (l[2] === 255 ? 0 : l[2] + 1), l[3] ]; - for (let i = 0; i < 62; i++) { - available.l[`${l[0]}.${l[1]}.${l[2]}.${l[3]}`] = 1; - l[3] += 4; - if (l[3] >= 252) { - l[2]++; - if (l[2] === 256) { - l[2] = 0; - } - l[3] = 4; + {% if (includeAdvanced) { %} + htmx.on("input[name=tunnel_range_start]", "change", e => { + available.l = {}; + available.w = {}; + if (e.target.validity.valid) { + const l = e.target.value.split(".").map(v => parseInt(v)); + const w = [ l[0], l[1], (l[2] === 255 ? 0 : l[2] + 1), l[3] ]; + for (let i = 0; i < 62; i++) { + available.l[`${l[0]}.${l[1]}.${l[2]}.${l[3]}`] = 1; + l[3] += 4; + if (l[3] >= 252) { + l[2]++; + if (l[2] === 256) { + l[2] = 0; } - } - let p = {{uciMesh.get("aredn", "@supernode[0]", "enable") === "1" ? 6526 : 5525}}; - for (let i = 0; i < 126; i++) { - available.w[`${w[0]}.${w[1]}.${w[2]}.${w[3]}:${p}`] = 1; - w[3] += 2; - if (w[3] >= 254) { - w[2]++; - if (w[2] === 256) { - w[2] = 0; - } - w[3] = 2; - } - p++; + l[3] = 4; } } - }); - } + let p = {{uciMesh.get("aredn", "@supernode[0]", "enable") === "1" ? 6526 : 5525}}; + for (let i = 0; i < 126; i++) { + available.w[`${w[0]}.${w[1]}.${w[2]}.${w[3]}:${p}`] = 1; + w[3] += 2; + if (w[3] >= 254) { + w[2]++; + if (w[2] === 256) { + w[2] = 0; + } + w[3] = 2; + } + p++; + } + } + }); + {% } %} function newTunnelEntry() { const type = htmx.find("#tunnel-templates select").value; @@ -551,10 +544,11 @@ This value is used by default, but each tunnel may overide it. newTunnelEntry(); } }); - const start = htmx.find("input[name=tunnel_range_start]"); - if (start && !client) { - start.disabled = true; + {% if (includeAdvanced) { %} + if (!client) { + htmx.find("input[name=tunnel_range_start]").disabled = true; } + {% } %} htmx.find("#dialog-done").disabled = true; } htmx.on("#tunnel-templates button", "click", newTunnelEntry);