From 442a931f715280e55db250917022cfef699dc883 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Sun, 5 Feb 2023 17:50:40 +0100 Subject: [PATCH] Finish porting of Settings -> DNS and the upper part of Settings -> DHCP Signed-off-by: DL6ER --- login.php | 7 ++- scripts/pi-hole/js/footer.js | 27 ++++++----- scripts/pi-hole/js/login.js | 6 +++ scripts/pi-hole/js/settings.js | 50 ++++++++++++++++---- settings.php | 86 ++++++++++++++++++---------------- 5 files changed, 111 insertions(+), 65 deletions(-) diff --git a/login.php b/login.php index 8ca6e955..ee252b81 100644 --- a/login.php +++ b/login.php @@ -41,8 +41,13 @@ require 'scripts/pi-hole/php/header.php'; +
- +

diff --git a/scripts/pi-hole/js/footer.js b/scripts/pi-hole/js/footer.js index 31a2414d..6d94671e 100644 --- a/scripts/pi-hole/js/footer.js +++ b/scripts/pi-hole/js/footer.js @@ -117,24 +117,24 @@ function testCookies() { return ret; } +var iCheckStyle = "primary"; +function applyCheckboxRadioStyle() { + // Get all radio/checkboxes for theming, with the exception of the two radio buttons on the custom disable timer, + // as well as every element with an id that starts with "status_" + var sel = $("input[type='radio'],input[type='checkbox']") + .not("#selSec") + .not("#selMin") + .not("[id^=status_]"); + sel.parent().removeClass(); + sel.parent().addClass("icheck-" + iCheckStyle); +} + function initCheckboxRadioStyle() { function getCheckboxURL(style) { var extra = style.startsWith("material-") ? "material" : "bootstrap"; return "style/vendor/icheck-" + extra + ".min.css"; } - function applyCheckboxRadioStyle(style) { - boxsheet.attr("href", getCheckboxURL(style)); - // Get all radio/checkboxes for theming, with the exception of the two radio buttons on the custom disable timer, - // as well as every element with an id that starts with "status_" - var sel = $("input[type='radio'],input[type='checkbox']") - .not("#selSec") - .not("#selMin") - .not("[id^=status_]"); - sel.parent().removeClass(); - sel.parent().addClass("icheck-" + style); - } - // Read from local storage, initialize if needed var chkboxStyle = localStorage ? localStorage.getItem("theme_icheck") : null; if (chkboxStyle === null) { @@ -144,7 +144,8 @@ function initCheckboxRadioStyle() { var boxsheet = $(''); boxsheet.appendTo("head"); - applyCheckboxRadioStyle(chkboxStyle); + iCheckStyle = chkboxStyle; + applyCheckboxRadioStyle(); // Add handler when on settings page var iCheckStyle = $("#iCheckStyle"); diff --git a/scripts/pi-hole/js/login.js b/scripts/pi-hole/js/login.js index fe9890a5..61bf605f 100644 --- a/scripts/pi-hole/js/login.js +++ b/scripts/pi-hole/js/login.js @@ -62,6 +62,12 @@ $("#loginform").submit(function (e) { // submitted) because we want to do a two-step challenge-response login e.preventDefault(); + // Check if cookie checkbox is enabled + /* if (!$("#logincookie").is(":checked")) { + alert("Please consent to using a login cookie to be able to log in. It is necessary to keep you logged in between page reloads. You can end the session by clicking on the logout button in the top right menu at any time."); + return; + }*/ + // Get challenge $.ajax({ url: "/api/auth", diff --git a/scripts/pi-hole/js/settings.js b/scripts/pi-hole/js/settings.js index 1aa4a1c1..447cb010 100644 --- a/scripts/pi-hole/js/settings.js +++ b/scripts/pi-hole/js/settings.js @@ -5,7 +5,7 @@ * This file is copyright under the latest version of the EUPL. * Please see LICENSE file for your rights under this license. */ -/* global utils:false, apiFailure:false */ +/* global utils:false, apiFailure:false, initCheckboxRadioStyle:false */ var hostinfoTimer = null; function updateHostInfo() { @@ -98,6 +98,7 @@ function removeFromArray(arr, what) { function fillDNSupstreams(value, servers) { var i = 0; + var customServers = value.value.length; servers.forEach(element => { var row = ""; // Build checkboxes for IPv4 and IPv6 @@ -107,16 +108,17 @@ function fillDNSupstreams(value, servers) { for (let index = 0; index < 2; index++) { if (address.length > index) { row += - '
'; } else { row += ""; } @@ -136,6 +138,7 @@ function fillDNSupstreams(value, servers) { // Add event listener to checkboxes $("input[id^='DNSupstreams-']").on("change", function () { var upstreams = $("#DNSupstreamsTextfield").val().split("\n"); + var customServers = 0; $("#DNSupstreamsTable input").each(function () { if (this.checked && !upstreams.includes(this.title)) { // Add server to array @@ -144,19 +147,28 @@ function fillDNSupstreams(value, servers) { // Remove server from array removeFromArray(upstreams, this.title); } + + if (upstreams.includes(this.title)) customServers--; }); - updateDNSserversTextfield(upstreams); + // The variable will contain a negative value, we need to add the length to + // get the correct number of custom servers + customServers += upstreams.length; + updateDNSserversTextfield(upstreams, customServers); }); // Initialize textfield - updateDNSserversTextfield(value.value); + updateDNSserversTextfield(value.value, customServers); } -function updateDNSserversTextfield(upstreams) { +function updateDNSserversTextfield(upstreams, customServers) { $("#DNSupstreamsTextfield").val(upstreams.join("\n")); + $("#custom-servers-title").text( + "(" + customServers + " custom server" + (customServers === 1 ? "" : "s") + " enabled)" + ); } function generateRow(topic, key, value) { + // If the value is an object, we need to recurse if (!("description" in value)) { Object.keys(value).forEach(function (subkey) { var subvalue = value[subkey]; @@ -165,6 +177,21 @@ function generateRow(topic, key, value) { return; } + // Select listening mode radio button + var escapedKey = key.replace(/\./g, "\\."); + if (value.type === "enum (string)") { + $("#" + escapedKey + "-" + value.value).trigger("click"); + } else if (value.type === "boolean") { + // Select checkboxes (if available) + $("#" + escapedKey).prop("checked", value.value); + } else if ( + ["string", "IPv4 address", "IPv6 address", "integer", "unsigned integer"].includes(value.type) + ) { + // Set input field values (if available) + $("#" + escapedKey).val(value.value); + } + + // else: we have a setting we can display var row = '
' + '
' + @@ -236,11 +263,11 @@ function generateRow(topic, key, value) { row += '' + '
' + - ' " + defaultValueHint + - "
"; + "
"; break; } @@ -361,6 +388,9 @@ function createDynamicConfigTabs() { generateRow(topic, topic + "." + key, value, data); }); }); + $("#advanced-overlay").hide(); + + initCheckboxRadioStyle(); }) .fail(function (data) { apiFailure(data); diff --git a/settings.php b/settings.php index ff5c96bb..4b06afed 100644 --- a/settings.php +++ b/settings.php @@ -10,7 +10,7 @@ require 'scripts/pi-hole/php/header_authenticated.php'; -if (isset($_GET['tab']) && in_array($_GET['tab'], array('sysadmin', 'dns', 'piholedhcp', 'api', 'privacy', 'teleporter'))) { +if (isset($_GET['tab']) && in_array($_GET['tab'], array('sysadmin', 'dns', 'dhcp', 'api', 'privacy', 'advanced', 'teleporter'))) { $tab = $_GET['tab']; } else { $tab = 'sysadmin'; @@ -308,7 +308,7 @@ if (isset($_GET['tab']) && in_array($_GET['tab'], array('sysadmin', 'dns', 'piho
-

Custom DNS servers

+

Custom DNS servers