From bdff952f9b75894b455c2362603aafa4e6943d96 Mon Sep 17 00:00:00 2001
From: Tim Wilkinson <tim.j.wilkinson@gmail.com>
Date: Wed, 13 Nov 2024 16:53:09 -0800
Subject: [PATCH] Make tunnel server name optional if you have no server
 tunnels (#1688)

* Make tunnel server name optional if yuo have no server tunnels

* Do less if we're already invalid
---
 files/app/main/status/e/tunnels.ut | 61 ++++++++++++++++--------------
 1 file changed, 33 insertions(+), 28 deletions(-)

diff --git a/files/app/main/status/e/tunnels.ut b/files/app/main/status/e/tunnels.ut
index 65ae84ea..71c091f4 100755
--- a/files/app/main/status/e/tunnels.ut
+++ b/files/app/main/status/e/tunnels.ut
@@ -272,11 +272,12 @@ function t2t(type)
                 <div class="m">DNS name of this tunnel server</div>
             </div>
             <div style="flex:0">
-                <input hx-put="{{request.env.REQUEST_URI}}" name="tunnel_server" type="text" size="25" required placeholder="DNS name or IP address" value="{{uciMesh.get("vtun", "@network[0]", "dns")}}">
+                <input hx-put="{{request.env.REQUEST_URI}}" name="tunnel_server" type="text" size="25" {{servercount > 0 ? "required": ""}} placeholder="DNS name or IP address" value="{{uciMesh.get("vtun", "@network[0]", "dns")}}">
             </div>
         </div>
         {{_H("Set either the hostname or the Internet IP Address for this tunnel server. This is the target for any tunnels
-        created which will connect to this node (legacy or wireguard).")}}
+        created which will connect to this node (legacy or wireguard). This only needs to be set if you are creating server tunnels.
+        It is not required for client tunnels.")}}
         <hr>
         <div id="tunnel-templates" class="cols">
             <div>
@@ -379,42 +380,45 @@ 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;
             const tuns = htmx.findAll("#tunnels .tunnel");
+            const isvalid = htmx.closest(htmx.find("#tunnels"), "form").checkValidity();
             for (let i = 0; i < tuns.length; i++) {
                 const t = tuns[i];
-                const index = t.dataset.index;
-                const name = htmx.find(t, "input[name=name]");
-                const password = htmx.find(t, "input[name=password]");
-                const key = htmx.find(t, "input[name=key]");
                 const type = htmx.find(t, "div[data-type]").dataset.type;
-                const network = htmx.find(t, "input[name=network]");
-                const notes = htmx.find(t, "input[name=notes]");
-                const enable = htmx.find(t, "input[name=enable]");
-                const weight = htmx.find(t, "input[name=weight]");
-                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 (isvalid) {
+                    const index = t.dataset.index;
+                    const name = htmx.find(t, "input[name=name]");
+                    const password = htmx.find(t, "input[name=password]");
+                    const key = htmx.find(t, "input[name=key]");
+                    const network = htmx.find(t, "input[name=network]");
+                    const notes = htmx.find(t, "input[name=notes]");
+                    const enable = htmx.find(t, "input[name=enable]");
+                    const weight = htmx.find(t, "input[name=weight]");
+                    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++;
                 }
             }
-            htmx.ajax("PUT", "{{request.env.REQUEST_URI}}", {
-                swap: "none",
-                values: { tunnels: JSON.stringify(tunnels) }
-            });
+            if (isvalid) {
+                htmx.ajax("PUT", "{{request.env.REQUEST_URI}}", {
+                    swap: "none",
+                    values: { tunnels: JSON.stringify(tunnels) }
+                });
+            }
+            htmx.find("input[name=tunnel_server]").required = servercount > 0 ? true : false;
             {% if (includeAdvanced) { %}
             htmx.find("input[name=tunnel_range_start]").disabled = servercount > 0 ? true : false;
             {% } %}
@@ -551,6 +555,7 @@ This value is used by default, but each tunnel may overide it.
             }
             {% } %}
             htmx.find("#dialog-done").disabled = true;
+            updateTunnels();
         }
         htmx.on("#tunnel-templates button", "click", newTunnelEntry);
         htmx.on("#tunnels", "change", updateTunnels);