Merge pull request #1901 from pi-hole/devel

Pi-hole web v5.7

.github/workflows/test.yml

@@ -10,21 +10,22 @@ on:
       - "**"
 
 env:
-  CI: true
+  FORCE_COLOR: 2
 
 jobs:
   run:
-    name: Node ${{ matrix.node }}
+    name: Node
     runs-on: ubuntu-latest
 
     steps:
       - name: Clone repository
         uses: actions/checkout@v2
 
-      - name: Set Node.js version
-        uses: actions/setup-node@v1
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
         with:
-          node-version: "12.x"
+          node-version: "14.x"
+          cache: npm
 
       - name: Install npm dependencies
         run: npm ci

groups-clients.php

@@ -44,7 +44,7 @@
                            IP subnets (CIDR notation, like <code>192.168.2.0/24</code>),
                            their MAC addresses (like <code>12:34:56:78:9A:BC</code>),
                            by their hostnames (like <code>localhost</code>), or by the interface they are connected to (prefaced with a colon, like <code>:eth0</code>).</p>
-                        <p>Note that client recognition by IP addresses (incl. subnet ranges) are prefered over MAC address, host name or interface recognition as
+                        <p>Note that client recognition by IP addresses (incl. subnet ranges) are preferred over MAC address, host name or interface recognition as
                            the two latter will only be available after some time.
                            Furthermore, MAC address recognition only works for devices at most one networking hop away from your Pi-hole.</p>
                     </div>

messages.php

@@ -31,6 +31,7 @@
                         <th>Data3</th>
                         <th>Data4</th>
                         <th>Data5</th>
+                        <th>Action</th>
                     </tr>
                     </thead>
                 </table>

package.json

@@ -23,12 +23,12 @@
     "test": "npm run prettier:check && npm run xo"
   },
   "devDependencies": {
-    "autoprefixer": "^10.2.5",
-    "eslint-plugin-compat": "^3.9.0",
-    "postcss": "^8.2.15",
+    "autoprefixer": "^10.3.6",
+    "eslint-plugin-compat": "^3.13.0",
+    "postcss": "^8.3.8",
     "postcss-cli": "^8.3.1",
-    "prettier": "2.3.1",
-    "xo": "^0.38.2"
+    "prettier": "2.4.1",
+    "xo": "^0.44.0"
   },
   "browserslist": [
     "defaults",
@@ -54,7 +54,6 @@
       "ecmaVersion": 5,
       "sourceType": "script"
     },
-    "esnext": false,
     "prettier": true,
     "space": 2,
     "ignores": [
@@ -77,7 +76,10 @@
       "no-alert": "off",
       "no-console": "error",
       "no-negated-condition": "off",
+      "no-var": "off",
+      "object-shorthand": "off",
       "one-var": "off",
+      "prefer-arrow-callback": "off",
       "spaced-comment": "off",
       "unicorn/explicit-length-check": [
         "error",
@@ -87,8 +89,9 @@
       ],
       "unicorn/filename-case": "off",
       "unicorn/no-array-for-each": "off",
-      "unicorn/no-fn-reference-in-iterator": "off",
       "unicorn/no-for-loop": "off",
+      "unicorn/no-document-cookie": "off",
+      "unicorn/numeric-separators-style": "off",
       "unicorn/prefer-includes": "off",
       "unicorn/prefer-node-append": "off",
       "unicorn/prefer-number-properties": "off",

queryads.php

@@ -1,4 +1,4 @@
-<?php /* 
+<?php /*
 *    Pi-hole: A black hole for Internet advertisements
 *    (c) 2017 Pi-hole, LLC (https://pi-hole.net)
 *    Network-wide ad blocking via your own hardware.

scripts/pi-hole/js/db_queries.js

@@ -202,96 +202,100 @@ $(function () {
     rowCallback: function (row, data) {
       var fieldtext,
         buttontext = "",
-        color;
+        blocked = true;
       switch (data[4]) {
         case 1:
-          color = "red";
-          fieldtext = "Blocked (gravity)";
+          fieldtext = "<span class='text-red'>Blocked (gravity)</span>";
           buttontext =
             '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+          blocked = true;
           break;
         case 2:
-          color = "green";
           fieldtext =
-            "OK <br class='hidden-lg'>(forwarded to " +
+            "<span class='text-green'>OK</span> (forwarded to <br class='hidden-lg'>" +
             (data.length > 5 && data[5] !== "N/A" ? data[5] : "") +
             ")";
           buttontext =
             '<button type="button" class="btn btn-default btn-sm text-red"><i class="fa fa-ban"></i> Blacklist</button>';
           break;
         case 3:
-          color = "green";
-          fieldtext = "OK <br class='hidden-lg'>(cached)";
+          fieldtext = "<span class='text-green'>OK</span> <br class='hidden-lg'>(cache)";
           buttontext =
             '<button type="button" class="btn btn-default btn-sm text-red"><i class="fa fa-ban"></i> Blacklist</button>';
           break;
         case 4:
-          color = "red";
-          fieldtext = "Blocked <br class='hidden-lg'>(regex blacklist)";
+          fieldtext = "<span class='text-red'>Blocked <br class='hidden-lg'>(regex blacklist)";
           buttontext =
             '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+          blocked = true;
           break;
         case 5:
-          color = "red";
-          fieldtext = "Blocked <br class='hidden-lg'>(exact blacklist)";
+          fieldtext = "<span class='text-red'>Blocked <br class='hidden-lg'>(exact blacklist)";
           buttontext =
             '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+          blocked = true;
           break;
         case 6:
-          color = "red";
-          fieldtext = "Blocked <br class='hidden-lg'>(external, IP)";
+          fieldtext = "<span class='text-red'>Blocked <br class='hidden-lg'>(external, IP)";
+          blocked = true;
           break;
         case 7:
-          color = "red";
-          fieldtext = "Blocked <br class='hidden-lg'>(external, NULL)";
+          fieldtext =
+            "<span class='text-red'>Blocked <br class='hidden-lg'>(external, NULL)</span>";
+          blocked = true;
           break;
         case 8:
-          color = "red";
-          fieldtext = "Blocked <br class='hidden-lg'>(external, NXRA)";
+          fieldtext =
+            "<span class='text-red'>Blocked <br class='hidden-lg'>(external, NXRA)</span>";
+          blocked = true;
           break;
         case 9:
-          color = "red";
-          fieldtext = "Blocked (gravity, CNAME)";
+          fieldtext = "<span class='text-red'>Blocked (gravity, CNAME)</span>";
           buttontext =
             '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+          blocked = true;
           break;
         case 10:
-          color = "red";
-          fieldtext = "Blocked <br class='hidden-lg'>(regex blacklist, CNAME)";
+          fieldtext =
+            "<span class='text-red'>Blocked <br class='hidden-lg'>(regex blacklist, CNAME)</span>";
           buttontext =
             '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+          blocked = true;
           break;
         case 11:
-          color = "red";
-          fieldtext = "Blocked <br class='hidden-lg'>(exact blacklist, CNAME)";
+          fieldtext =
+            "<span class='text-red'>Blocked <br class='hidden-lg'>(exact blacklist, CNAME)</span>";
+          blocked = true;
           buttontext =
             '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+          blocked = true;
           break;
         case 12:
-          color = "green";
-          fieldtext = "Retried";
+          fieldtext = "<span class='text-green'>Retried</span>";
           break;
         case 13:
-          color = "green";
-          fieldtext = "Retried <br class='hidden-lg'>(ignored)";
-          buttontext = "";
+          fieldtext = "<span class='text-green'>Retried</span> <br class='hidden-lg'>(ignored)";
           break;
         case 14:
-          color = "green";
-          fieldtext = "OK <br class='hidden-lg'>(already forwarded)";
+          fieldtext =
+            "<span class='text-green'>OK</span> <br class='hidden-lg'>(already forwarded)";
           buttontext =
             '<button type="button" class="btn btn-default btn-sm text-red"><i class="fa fa-ban"></i> Blacklist</button>';
           break;
         case 15:
-          color = "text-orange";
-          fieldtext = "Blocked <br class='hidden-lg'>(database is busy)";
+          fieldtext =
+            "<span class='text-orange'>Blocked <br class='hidden-lg'>(database is busy)</span>";
+          blocked = true;
           break;
         default:
-          color = "black";
           fieldtext = "Unknown";
       }
 
-      $(row).css("color", color);
+      $(row).addClass(blocked === true ? "blocked-row" : "allowed-row");
+      if (localStorage.getItem("colorfulQueryLog_chkbox") === "true") {
+        $(row).addClass(blocked === true ? "text-red" : "text-green");
+      }
+
       $("td:eq(4)", row).html(fieldtext);
       $("td:eq(5)", row).html(buttontext);
 

scripts/pi-hole/js/footer.js

@@ -287,17 +287,13 @@ if (sessionvalidity > 0) {
       seconds = "0" + seconds;
     }
 
-    if (totalseconds > 0) {
-      sessionTimerCounter.textContent = minutes + ":" + seconds;
-    } else {
-      sessionTimerCounter.textContent = "-- : --";
-    }
+    sessionTimerCounter.textContent = totalseconds > 0 ? minutes + ":" + seconds : "-- : --";
   }, 1000);
 } else {
   document.getElementById("sessiontimer").style.display = "none";
 }
 
-// Handle Strg + Enter button on Login page
+// Handle Ctrl + Enter button on Login page
 $(document).keypress(function (e) {
   if ((e.keyCode === 10 || e.keyCode === 13) && e.ctrlKey && $("#loginpw").is(":focus")) {
     $("#loginform").attr("action", "settings.php");

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

@@ -276,7 +276,7 @@ function addClient() {
   // - IPv4 address (with and without CIDR)
   // - IPv6 address (with and without CIDR)
   // - MAC address (in the form AA:BB:CC:DD:EE:FF)
-  // - host name (arbitrary form, we're only checking against some reserved charaters)
+  // - host name (arbitrary form, we're only checking against some reserved characters)
   if (utils.validateIPv4CIDR(ip) || utils.validateIPv6CIDR(ip) || utils.validateMAC(ip)) {
     // Convert input to upper case (important for MAC addresses)
     ip = ip.toUpperCase();

scripts/pi-hole/js/ip-address-sorting.js

@@ -13,7 +13,7 @@
 $.extend($.fn.dataTableExt.oSort, {
   "ip-address-pre": function (a) {
     // Skip empty fields (IP address might have expired or
-    // reassigned to a differenct device)
+    // reassigned to a different device)
     if (!a || a.length === 0) {
       return Infinity;
     }
@@ -59,20 +59,38 @@ $.extend($.fn.dataTableExt.oSort, {
           xa += ":";
         }
 
-        if (item.length === 0) {
-          count += 0;
-        } else if (item.length === 1) {
-          xa += "000" + item;
-          count += 4;
-        } else if (item.length === 2) {
-          xa += "00" + item;
-          count += 4;
-        } else if (item.length === 3) {
-          xa += "0" + item;
-          count += 4;
-        } else {
-          xa += item;
-          count += 4;
+        switch (item.length) {
+          case 0: {
+            count += 0;
+
+            break;
+          }
+
+          case 1: {
+            xa += "000" + item;
+            count += 4;
+
+            break;
+          }
+
+          case 2: {
+            xa += "00" + item;
+            count += 4;
+
+            break;
+          }
+
+          case 3: {
+            xa += "0" + item;
+            count += 4;
+
+            break;
+          }
+
+          default: {
+            xa += item;
+            count += 4;
+          }
         }
       }