Pi-hole Web v6.2 (#3444)

Author: PromoFaux

.devcontainer/Dockerfile

@@ -1,7 +1,7 @@
-FROM node:21-alpine3.18
+FROM node:22-alpine3.21
 RUN apk add --no-cache \
-                git \
-                nano\
-                openssh
+    git \
+    nano \
+    openssh
 
 USER node

.github/CODEOWNERS

@@ -0,0 +1,5 @@
+# see https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners#codeowners-syntax
+
+# These owners will be the default owners for everything in
+# the repo. Unless a later match takes precedence,
+*       @pi-hole/web-maintainers

.github/dependabot.yml

@@ -1,23 +1,19 @@
 version: 2
 updates:
-- package-ecosystem: npm
-  directory: "/"
-  schedule:
-    interval: weekly
-    day: saturday
-    time: "10:00"
-  open-pull-requests-limit: 10
-  target-branch: development
-  versioning-strategy: increase
-  reviewers:
-    - "pi-hole/web-maintainers"
-- package-ecosystem: github-actions
-  directory: "/"
-  schedule:
-    interval: weekly
-    day: saturday
-    time: "10:00"
-  open-pull-requests-limit: 10
-  target-branch: development
-  reviewers:
-    - "pi-hole/web-maintainers"
+  - package-ecosystem: npm
+    directory: "/"
+    schedule:
+      interval: weekly
+      day: saturday
+      time: "10:00"
+    open-pull-requests-limit: 10
+    target-branch: development
+    versioning-strategy: increase
+  - package-ecosystem: github-actions
+    directory: "/"
+    schedule:
+      interval: weekly
+      day: saturday
+      time: "10:00"
+    open-pull-requests-limit: 10
+    target-branch: development

.github/workflows/codeql.yml

@@ -31,16 +31,16 @@ jobs:
           persist-credentials: false
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3.28.13
+        uses: github/codeql-action/init@v3.28.18
         with:
           config-file: ./.github/codeql/codeql-config.yml
           languages: "javascript"
           queries: +security-and-quality
 
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v3.28.13
+        uses: github/codeql-action/autobuild@v3.28.18
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3.28.13
+        uses: github/codeql-action/analyze@v3.28.18
         with:
           category: "/language:javascript"

.github/workflows/codespell.yml

@@ -3,7 +3,7 @@ name: Codespell
 on:
   push:
     branches:
-      - '**'
+      - "**"
   pull_request:
     types: [opened, synchronize, reopened, ready_for_review]
 
@@ -12,11 +12,12 @@ jobs:
     if: github.event.pull_request.draft == false
     runs-on: ubuntu-latest
     steps:
-      -
-        name: Checkout repository
+      - name: Clone repository
         uses: actions/checkout@v4.2.2
-      -
-        name: Spell-Checking
+        with:
+          persist-credentials: false
+
+      - name: Spell-Checking
         uses: codespell-project/actions-codespell@master
         with:
           ignore_words_file: .codespellignore

.github/workflows/editorconfig-checker.yml

@@ -9,6 +9,9 @@ jobs:
     name: editorconfig-checker
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4.2.2
+      - name: Clone repository
+        uses: actions/checkout@v4.2.2
+        with:
+          persist-credentials: false
       - uses: editorconfig-checker/action-editorconfig-checker@main
       - run: editorconfig-checker

.github/workflows/stale.yml

@@ -2,7 +2,7 @@ name: Mark stale issues
 
 on:
   schedule:
-    - cron: '0 8 * * *'
+    - cron: "0 8 * * *"
   workflow_dispatch:
   issue_comment:
 
@@ -17,17 +17,17 @@ jobs:
       issues: write
 
     steps:
-    - uses: actions/stale@v9.1.0
-      with:
-        repo-token: ${{ secrets.GITHUB_TOKEN }}
-        days-before-stale: 30
-        days-before-close: 5
-        stale-issue-message: 'This issue is stale because it has been open 30 days with no activity. Please comment or update this issue or it will be closed in 5 days.'
-        stale-issue-label: '${{ env.stale_label }}'
-        exempt-issue-labels: 'internal, Fixed In Next Release, Bug, never-stale'
-        exempt-all-issue-assignees: true
-        operations-per-run: 300
-        close-issue-reason: 'not_planned'
+      - uses: actions/stale@v9.1.0
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          days-before-stale: 30
+          days-before-close: 5
+          stale-issue-message: "This issue is stale because it has been open 30 days with no activity. Please comment or update this issue or it will be closed in 5 days."
+          stale-issue-label: "${{ env.stale_label }}"
+          exempt-issue-labels: "internal, Fixed In Next Release, Bug, never-stale, Bug: Confirmed"
+          exempt-all-issue-assignees: true
+          operations-per-run: 300
+          close-issue-reason: "not_planned"
 
   remove_stale:
     # trigger "stale" removal immediately when stale issues are commented on
@@ -40,8 +40,10 @@ jobs:
       issues: write #  to edit issues label
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
+      - name: Clone repository
         uses: actions/checkout@v4.2.2
+        with:
+          persist-credentials: false
       - name: Remove 'stale' label
         run: gh issue edit ${{ github.event.issue.number }} --remove-label ${{ env.stale_label }}
         env:

.github/workflows/stale_pr.yml

@@ -5,12 +5,11 @@ name: Close stale PR
 
 on:
   schedule:
-    - cron: '0 10 * * *'
+    - cron: "0 10 * * *"
   workflow_dispatch:
 
 jobs:
   stale:
-
     runs-on: ubuntu-latest
     permissions:
       issues: write
@@ -27,9 +26,9 @@ jobs:
           # Close PRs immediately, after marking them 'stale'
           days-before-pr-close: 0
           # only run the action on merge conflict PR
-          any-of-labels: 'Merge Conflicts'
-          exempt-pr-labels: 'internal, never-stale, ON HOLD, WIP'
+          any-of-labels: "Merge Conflicts"
+          exempt-pr-labels: "internal, never-stale, ON HOLD, WIP"
           exempt-all-pr-assignees: true
           operations-per-run: 300
-          stale-pr-message: ''
-          close-pr-message: 'Existing merge conflicts have not been addressed. This PR is considered abandoned.'
+          stale-pr-message: ""
+          close-pr-message: "Existing merge conflicts have not been addressed. This PR is considered abandoned."

.github/workflows/sync-back-to-dev.yml

@@ -10,8 +10,10 @@ jobs:
     runs-on: ubuntu-latest
     name: Syncing branches
     steps:
-      - name: Checkout
+      - name: Clone repository
         uses: actions/checkout@v4.2.2
+        with:
+          persist-credentials: false
       - name: Opening pull request
         run: gh pr create -B development -H master --title 'Sync master back into development' --body 'Created by Github action' --label 'internal'
         env:

.github/workflows/test.yml

@@ -20,11 +20,13 @@ jobs:
     steps:
       - name: Clone repository
         uses: actions/checkout@v4.2.2
+        with:
+          persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
-          node-version: "20.x"
+          node-version: "22.x"
           cache: npm
 
       - name: Install npm dependencies

README.md

@@ -206,7 +206,7 @@ Lists, domains (block or allow) and regex entries can be managed through groups.
 
 **Local DNS Settings:**
   - Local DNS records
-  - Local CNAME records records
+  - Local CNAME records
 
 **All Settings** (only visible in Expert mode):
   - Advanced settings page, containing all available options

error403.lp

@@ -9,7 +9,7 @@
 
 mg.include('scripts/lua/header.lp','r')
 ?>
-<body class="hold-transition layout-boxed login-page">
+<body class="hold-transition layout-boxed login-page page-<?=pihole.format_path(mg.request_info.request_uri)?>">
     <div class="box login-box">
         <section style="padding: 15px;">
                 <h2 class="error-headline text-danger">403</h2>

error404.lp

@@ -9,7 +9,7 @@
 
 mg.include('scripts/lua/header.lp','r')
 ?>
-<body class="hold-transition layout-boxed login-page">
+<body class="hold-transition layout-boxed login-page page-<?=pihole.format_path(mg.request_info.request_uri)?>">
     <div class="box login-box">
         <section style="padding: 15px;">
                 <h2 class="error-headline text-yellow">404</h2>

gravity.lp

@@ -27,5 +27,5 @@ mg.include('scripts/lua/header_authenticated.lp','r')
 <button type="button" id="gravityBtn" class="btn btn-lg btn-primary btn-block">Update</button>
 <pre id="output" style="width: 100%; height: 100%;" hidden></pre>
 
-<script defer src="<?=pihole.fileversion('scripts/js/gravity.js')?>"></script>
+<script src="<?=pihole.fileversion('scripts/js/gravity.js')?>"></script>
 <? mg.include('scripts/lua/footer.lp','r')?>

groups-clients.lp

@@ -95,10 +95,10 @@ mg.include('scripts/lua/header_authenticated.lp','r')
     </div>
 </div>
 
-<script defer src="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.js')?>"></script>
-<script defer src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
-<script defer src="<?=pihole.fileversion('scripts/js/ip-address-sorting.js')?>"></script>
-<script defer src="<?=pihole.fileversion('scripts/js/groups-common.js')?>"></script>
-<script defer src="<?=pihole.fileversion('scripts/js/groups-clients.js')?>"></script>
+<script src="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.js')?>"></script>
+<script src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
+<script src="<?=pihole.fileversion('scripts/js/ip-address-sorting.js')?>"></script>
+<script src="<?=pihole.fileversion('scripts/js/groups-common.js')?>"></script>
+<script src="<?=pihole.fileversion('scripts/js/groups-clients.js')?>"></script>
 
 <? mg.include('scripts/lua/footer.lp','r')?>

groups-domains.lp

@@ -75,7 +75,7 @@ mg.include('scripts/lua/header_authenticated.lp','r')
                                     </div>
                                     <div class="form-group">
                                         <strong>Hint:</strong> Need help to write a proper RegEx rule? Have a look at our online
-                                        <a href="https://docs.pi-hole.net/ftldns/regex/tutorial" rel="noopener" target="_blank">
+                                        <a href="https://docs.pi-hole.net/ftldns/regex/tutorial" rel="noopener noreferrer" target="_blank">
                                             regular expressions tutorial</a>.
                                     </div>
                                 </div>
@@ -156,9 +156,9 @@ mg.include('scripts/lua/header_authenticated.lp','r')
     </div>
 </div>
 
-<script defer src="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.js')?>"></script>
-<script defer src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
-<script defer src="<?=pihole.fileversion('scripts/js/groups-common.js')?>"></script>
-<script defer src="<?=pihole.fileversion('scripts/js/groups-domains.js')?>"></script>
+<script src="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.js')?>"></script>
+<script src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
+<script src="<?=pihole.fileversion('scripts/js/groups-common.js')?>"></script>
+<script src="<?=pihole.fileversion('scripts/js/groups-domains.js')?>"></script>
 
 <? mg.include('scripts/lua/footer.lp','r')?>

groups-lists.lp

@@ -94,9 +94,9 @@ mg.include('scripts/lua/header_authenticated.lp','r')
     </div>
 </div>
 
-<script defer src="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.js')?>"></script>
-<script defer src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
-<script defer src="<?=pihole.fileversion('scripts/js/groups-common.js')?>"></script>
-<script defer src="<?=pihole.fileversion('scripts/js/groups-lists.js')?>"></script>
+<script src="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.js')?>"></script>
+<script src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
+<script src="<?=pihole.fileversion('scripts/js/groups-common.js')?>"></script>
+<script src="<?=pihole.fileversion('scripts/js/groups-lists.js')?>"></script>
 
 <? mg.include('scripts/lua/footer.lp','r')?>

groups.lp

@@ -79,9 +79,9 @@ mg.include('scripts/lua/header_authenticated.lp','r')
     </div>
 </div>
 
-<script defer src="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.js')?>"></script>
-<script defer src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
-<script defer src="<?=pihole.fileversion('scripts/js/groups-common.js')?>"></script>
-<script defer src="<?=pihole.fileversion('scripts/js/groups.js')?>"></script>
+<script src="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.js')?>"></script>
+<script src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
+<script src="<?=pihole.fileversion('scripts/js/groups-common.js')?>"></script>
+<script src="<?=pihole.fileversion('scripts/js/groups.js')?>"></script>
 
 <? mg.include('scripts/lua/footer.lp','r')?>

index.lp

@@ -16,7 +16,7 @@ mg.include('scripts/lua/header_authenticated.lp','r')
         <!-- small box -->
         <div class="small-box bg-aqua no-user-select" id="total_queries" title="Total number of queries">
             <div class="inner">
-                <p>Total queries</p>
+                <p>Total Queries</p>
                 <h3 class="statistic"><span id="dns_queries">---</span></h3>
             </div>
             <div class="icon">
@@ -108,7 +108,7 @@ mg.include('scripts/lua/header_authenticated.lp','r')
             </div>
             <div class="box-body">
                 <div class="chart" style="width: 100%; height: 180px">
-                    <canvas id="clientsChart" class="extratooltipcanvas no-user-select"></canvas>
+                    <canvas id="clientsChart" class="no-user-select"></canvas>
                 </div>
             </div>
             <div class="overlay">
@@ -144,7 +144,7 @@ mg.include('scripts/lua/header_authenticated.lp','r')
             </div>
             <div class="box-body">
                 <div style="width:50%">
-                    <canvas id="forwardDestinationPieChart" width="280" height="280" class="extratooltipcanvas no-user-select"></canvas>
+                    <canvas id="forwardDestinationPieChart" width="280" height="280" class="no-user-select"></canvas>
                 </div>
                 <div class="chart-legend" style="width:50%" id="forward-destinations-legend"></div>
             </div>
@@ -166,7 +166,7 @@ mg.include('scripts/lua/header_authenticated.lp','r')
             <!-- /.box-header -->
             <div class="box-body">
                 <div class="table-responsive">
-                    <table class="table table-bordered">
+                    <table class="table table-striped table-bordered">
                         <thead>
                             <tr>
                             <th>Domain</th>
@@ -195,7 +195,7 @@ mg.include('scripts/lua/header_authenticated.lp','r')
             <!-- /.box-header -->
             <div class="box-body">
                 <div class="table-responsive">
-                    <table class="table table-bordered">
+                    <table class="table table-striped table-bordered">
                         <thead>
                             <tr>
                             <th>Domain</th>
@@ -226,7 +226,7 @@ mg.include('scripts/lua/header_authenticated.lp','r')
             <!-- /.box-header -->
             <div class="box-body">
                 <div class="table-responsive">
-                    <table class="table table-bordered">
+                    <table class="table table-striped table-bordered">
                         <thead>
                             <tr>
                             <th>Client</th>
@@ -255,7 +255,7 @@ mg.include('scripts/lua/header_authenticated.lp','r')
             <!-- /.box-header -->
             <div class="box-body">
                 <div class="table-responsive">
-                    <table class="table table-bordered">
+                    <table class="table table-striped table-bordered">
                         <thead>
                             <tr>
                             <th>Client</th>
@@ -279,7 +279,7 @@ mg.include('scripts/lua/header_authenticated.lp','r')
 </div>
 <!-- /.row -->
 
-<script defer src="<?=pihole.fileversion('scripts/js/charts.js')?>"></script>
-<script defer src="<?=pihole.fileversion('scripts/js/index.js')?>"></script>
+<script src="<?=pihole.fileversion('scripts/js/charts.js')?>"></script>
+<script src="<?=pihole.fileversion('scripts/js/index.js')?>"></script>
 
 <? mg.include('scripts/lua/footer.lp','r')?>