Add IPv4/IPv6 address validation to clients management page

Signed-off-by: DL6ER <dl6er@dl6er.de>

groups-clients.php

@@ -31,7 +31,7 @@
                         <select id="select" class="form-control" placeholder="">
                             <option disabled selected>Loading...</option>
                         </select><br>
-                        <input id="ip-custom" type="text" class="form-control" disabled placeholder="Client IP address (IPv4 or IPv6, optional)">
+                        <input id="ip-custom" type="text" class="form-control" disabled placeholder="Client IP address (IPv4 or IPv6, CIDR subnetting available, optional)">
                     </div>
                     <div class="col-md-6">
                         <label for="ex3">Comment:</label>

scripts/pi-hole/js/groups-clients.js

@@ -240,6 +240,21 @@ function addClient() {
     return;
   }
 
+  // Validate IP address (may contain CIDR details)
+  var ipv6format = ip.includes(":");
+
+  if (!ipv6format && !utils.validateIPv4CIDR(ip)) {
+    utils.enableAll();
+    utils.showAlert("warning", "", "Warning", "Invalid IPv4 address!");
+    return;
+  }
+
+  if (ipv6format && !utils.validateIPv6CIDR(ip)) {
+    utils.enableAll();
+    utils.showAlert("warning", "", "Warning", "Invalid IPv6 address!");
+    return;
+  }
+
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
     method: "post",

scripts/pi-hole/js/groups-common.js

@@ -83,6 +83,50 @@ function enableAll() {
   $("select").attr("disabled", false);
   $("button").attr("disabled", false);
   $("textarea").attr("disabled", false);
+
+  // Enable custom input field only if applicable
+  var ip = $("#select") ? $("#select").val() : null;
+  if (ip !== null && ip !== "custom") {
+    ip = $("#ip-custom").attr("disabled", true);
+  }
+}
+
+// Pi-hole IPv4/CIDR validator by DL6ER, see regexr.com/50csh
+function validateIPv4CIDR(ip) {
+  // One IPv4 element is 8bit: 0 - 256
+  var ipv4elem = "(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]?|0)";
+  // CIDR for IPv4 is 1 - 32 bit
+  var v4cidr = "(\\/([1-9]|[1-2][0-9]|3[0-2])){0,1}";
+  var ipv4validator = new RegExp(
+    "^" + ipv4elem + "\\." + ipv4elem + "\\." + ipv4elem + "\\." + ipv4elem + v4cidr + "$"
+  );
+  return ipv4validator.test(ip);
+}
+
+// Pi-hole IPv6/CIDR validator by DL6ER, see regexr.com/50csn
+function validateIPv6CIDR(ip) {
+  // One IPv6 element is 16bit: 0000 - FFFF
+  var ipv6elem = "[0-9A-Fa-f]{1,4}";
+  // CIDR for IPv6 is 1- 128 bit
+  var v6cidr = "(\\/([1-9]|[1-9][0-9]|1[0-1][0-9]|12[0-8])){0,1}";
+  var ipv6validator = new RegExp(
+    "^(((?:" +
+      ipv6elem +
+      "))((?::" +
+      ipv6elem +
+      "))*::((?:" +
+      ipv6elem +
+      "))((?::" +
+      ipv6elem +
+      "))*|((?:" +
+      ipv6elem +
+      "))((?::" +
+      ipv6elem +
+      ")){7})" +
+      v6cidr +
+      "$"
+  );
+  return ipv6validator.test(ip);
 }
 
 window.utils = (function() {
@@ -90,6 +134,8 @@ window.utils = (function() {
     showAlert: showAlert,
     datetime: datetime,
     disableAll: disableAll,
-    enableAll: enableAll
+    enableAll: enableAll,
+    validateIPv4CIDR: validateIPv4CIDR,
+    validateIPv6CIDR: validateIPv6CIDR
   };
 })();