Make the validation simpler (#1569)

This commit is contained in:
Tim Wilkinson 2024-10-08 21:01:07 -07:00 committed by GitHub
parent 2eb3029156
commit 1e79e95afd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 91 additions and 117 deletions

View File

@ -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()
{

View File

@ -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") {

View File

@ -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);