added selectable hosted dns servers

app/js/custom.js

@@ -165,6 +165,25 @@ $(document).on("submit", ".js-dhcp-settings-form", function(e) {
     $(".js-add-dhcp-upstream-server").trigger("click");
 });
 
+/**
+ * mark a form field, e.g. a select box, with the class `.js-field-preset`
+ * and give it an attribute `data-field-preset-target` with a text field's
+ * css selector.
+ *
+ * now, if the element marked `.js-field-preset` receives a `change` event,
+ * its value will be copied to all elements matching the selector in
+ * data-field-preset-target.
+ */
+$(document).on("change", ".js-field-preset", function(e) {
+    var selector = this.getAttribute("data-field-preset-target")
+    var value = "" + this.value
+    var syncValue = function(el) { el.value = value }
+
+    if (value.trim() === "") { return }
+
+    document.querySelectorAll(selector).forEach(syncValue)
+});
+
 $(document).on("click", "#gen_wpa_passphrase", function(e) {
     $('#txtwpapassphrase').val(genPassword(63));
 });

config/dns-servers.json

@@ -0,0 +1,27 @@
+{
+  "Cloudflare": [
+    "1.0.0.1",
+    "1.1.1.1"
+  ],
+  "German Privacy Foundation": [
+    "62.141.58.13",
+    "85.25.251.254",
+    "87.118.100.175",
+    "94.75.228.29"
+  ],
+  "Google": [
+    "8.8.4.4",
+    "8.8.8.8"
+  ],
+  "OpenDNS": [
+    "208.67.220.220",
+    "208.67.222.222"
+  ],
+  "Quad9": [
+    "9.9.9.9"
+  ],
+  "Yandex.DNS": [
+    "77.88.8.2",
+    "77.88.8.88"
+  ]
+}

includes/functions.php

@@ -346,3 +346,27 @@ function mb_escapeshellarg($arg)
     return "\"$escaped_arg\"";
 }
 
+function dnsServers()
+{
+    $data = json_decode(file_get_contents("./config/dns-servers.json"));
+    return (array) $data;
+}
+
+function optionsForSelect($options)
+{
+    $html = "";
+    foreach ($options as $key => $value) {
+        // optgroup
+        if (is_array($value)) {
+            $html .= "<optgroup label=\"$key\">";
+            $html .= optionsForSelect($value);
+            $html .= "</optgroup>";
+        }
+        // option
+        else {
+            $key = is_int($key) ? $value : $key;
+            $html .= "<option value=\"$value\">$key</option>";
+        }
+    }
+    return $html;
+}

templates/dhcp.php

@@ -139,6 +139,13 @@
                 <button type="button" class="btn btn-outline-secondary js-add-dhcp-upstream-server"><i class="fas fa-plus"></i></button>
               </div>
             </div>
+            <div class="input-group">
+              <select class="custom-select custom-select-sm my-3 js-field-preset" data-field-preset-target="#add-dhcp-upstream-server-field">
+                <option value=""><?php echo _("Choose a hosted server") ?></option>
+                <option disabled="disabled"></option>
+                <?php echo optionsForSelect(dnsServers()) ?>
+              </select>
+            </div>
             <p id="new-dhcp-upstream-server" class="form-text text-muted">
               <small>
                 <?php echo _("Format: ") ?>