Convert all 35 static checkbox/radio inputs across 9 templates (queries,
search, settings-api, settings-dhcp, groups-domains, settings-dns,
settings-privacy, settings-teleporter) plus the dynamically-generated
ones (settings-advanced.js's per-setting boolean/enum controls,
settings-dns.js's DNS-upstream picker) from icheck-bootstrap's
JS-post-processed styling to Bootstrap 5's native .form-check/
.form-check-input/.form-check-label markup, which needs no JS at all.
Remove footer.js's applyCheckboxRadioStyle() (and its call sites in
settings-advanced.js/settings-dns.js) entirely - it used to strip and
re-add classes on every checkbox/radio's parent after page load, which
would have destroyed the new static .form-check classes at runtime.
Drop the icheck-bootstrap dependency, its vendor CSS and the <link> in
header.lp, and replace its now-dead pseudo-element checkbox styling in
pi-hole.css with a couple of plain .form-check-input/.form-check-label
rules for the one spot that needs a smaller checkbox size (the domain
list's filter-by-type row).
Two "no-icheck"-excluded checkboxes (a table-header select-all in both
settings-dns.lp and settings-dns.js) are left as bare native checkboxes,
matching their original deliberate exclusion.
Also confirmed pi-hole's own text-red/text-green/bg-*/etc. color utility
classes are unaffected by the AdminLTE core removal - each theme file
already defines them fully rather than only overriding an AdminLTE base,
so no fix was needed there.
Verified against a live container: settings/dns (checkbox/radio styling,
custom-servers card-collapse toggle) and settings/privacy (privacy-level
radios) render correctly with zero console errors.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Adam Warner <me@adamwarner.co.uk>
Convert the remaining 20 .lp templates from AdminLTE 2's .box/.panel
component family to Bootstrap 5 .card markup, matching the pattern
established in index.lp/queries.lp during the layout migration:
box/box-header/box-title/box-body/box-footer -> card equivalents,
box-info/-danger/-warning etc. -> card-info/-danger/-warning +
card-outline for the non-solid variant, collapsed-box + data-widget
-> collapsed-card + data-lte-toggle="card-collapse" with the dual
expand/collapse icon AdminLTE 4 expects. Also renames the accompanying
Bootstrap-3-isms throughout (col-xs-*, pull-left/right, input-group-addon,
data-toggle/-dismiss/-backdrop/-keyboard, label -> badge, btn-default,
BS3 modal close-button markup).
Fix the JS-side selectors that referenced the old markup and would have
silently broken once the classes changed: charts.js's tooltip anchor
lookup, footer.js's "no visible cards" redirect check, login.js's
2FA/forgot-password card color swap (plus made both boxes consistently
non-solid so the swap doesn't need to touch card-outline), and
settings-advanced.js's dynamically generated settings cards and its
manual Bootstrap 3 "in"/"active" tab-pane class toggling (Bootstrap 5
renamed .in to .show). Rewrite settings-dhcp.js's jQuery-plugin tooltip
delegation (`$("body").tooltip(...)`, `.tooltip("hide")`) as a small
lazily-instantiating delegated listener plus direct bootstrap.Tooltip
calls, since Bootstrap 5 dropped jQuery integration entirely and the
DHCP lease action buttons are added to the DOM dynamically. Restore
Bootstrap 3's .has-error/.has-warning/.has-success form-validation
color feedback in pi-hole.css, since Bootstrap 5 dropped those classes
in favor of .is-invalid/.is-valid and a couple of pages still toggle
the old class names for simple color-coded feedback.
Refresh package-lock.json for the admin-lte/bootstrap version bump from
the previous commit.
Verified against a live container: dashboard, query log (incl. the
collapsible advanced-filter card and populated DataTable), groups/lists,
groups/domains, and settings/dns all render correctly with zero console
errors; card-collapse toggling confirmed working on the query log's
filter card. Plugin-styled elements (select2/bootstrap-select dropdowns,
DataTables chrome, icheck checkboxes, bootstrap-toggle switches, nav-tabs)
still look wrong until the JS-plugin-swap phase lands, as expected.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Adam Warner <me@adamwarner.co.uk>
Swap vendored AdminLTE 2.4.18 + Bootstrap 3.4.1 for AdminLTE 4.1.0 +
Bootstrap 5.3.8 (AdminLTE's dist CSS now bundles Bootstrap, so the
separate Bootstrap stylesheet is dropped; only its JS bundle remains).
Rewrite the page shell (header, header_authenticated, sidebar, footer)
to AdminLTE 4's app-wrapper/app-header/app-sidebar/app-main/app-content
structure and nav-sidebar/nav-treeview markup, and convert the dashboard
(index.lp) box/small-box markup to Bootstrap 5 cards as the first fully
migrated page.
Verified against a live container: fixed a chart.js tooltip lookup that
still targeted the old .box selector, restored the header logo mini/full
swap and sidebar user-panel collapse behavior that AdminLTE 2 used to
provide for free, and resolved a duplicate id="navigation" collision
with AdminLTE 4's own accessibility skip-link script.
Every other page still uses the old box/Bootstrap-3-grid/BS3-plugin
markup and will render incorrectly until the remaining migration phases
land.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Adam Warner <me@adamwarner.co.uk>
FTL's DoT/DoH client work (pi-hole/FTL#2940) pins tls:// and https://
URIs onto the well-known resolver list, but the picker only rendered
checkboxes for the plain addresses.
- Plain / DoT / DoH tabs, one checkbox per address family per tab
- DoT/DoH tabs omit vendors with no pinned URI for that protocol,
instead of showing empty rows
- keeps the table narrow as more protocols (DoQ, DoH3, ...) get added
- each tab shows a label with how many upstreams are selected there,
positioned top-right with a tooltip, per rdwebdesign's review
comments
Co-authored-by: RD WebDesign <github@rdwebdesign.com.br>
Signed-off-by: Adam Warner <github@promofaux.dev>
Resolves the `// TODO Fix eslint` left on the TTL validation. `ttlVal` is
always a number (`NaN` or a `Math.trunc` result), so `Number.isFinite` is
equivalent to the global `isFinite` here while satisfying
`unicorn/prefer-number-properties`, letting us drop the accompanying
`eslint-disable-next-line`.
Signed-off-by: DL6ER <dl6er@dl6er.de>
The startup timer setup used `Math.trunc(enaT.text())` while `countDown()`
uses `Math.trunc(Number(enaT.text()))`. Both work (the stored value is a
clean millisecond timestamp), but wrap the value in `Number()` here too so
the two call sites read the `#enableTimer` text identically.
Signed-off-by: DL6ER <dl6er@dl6er.de>
`unicorn/prefer-scoped-selector` (new in xo 3) requires `:scope` in
combined element queries, so the selector was changed to
`:scope > .btn-box-tool > i`. The child combinator `>` after `:scope` is
wrong though: the box markup nests the tool button as
`.box > .box-header > .box-tools > button.btn-box-tool`, so a direct-child
query matched nothing and the collapse/expand chevron never toggled on
`#forgot-pw-box` (login) and `#custom-servers-box` (settings/dns). Use the
descendant combinator `:scope .btn-box-tool > i`, which the rule's own
suggestion inserts and which correctly resolves the icon in the header.
Signed-off-by: DL6ER <dl6er@dl6er.de>
The "Add" button has the same `.saveRevServers` CSS class as the other
normal "Save" buttons. This is fine and simplifies the code, as all rows
(including the last one) use the same validation pattern and functions.
The only difference is the `addRevServer` function, used to save the new
values.
Preceding the selector with `tbody`, makes sure only the normal "Save"
buttons will use the `saveRecord()` function.
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
- add a placeholder using CSS
- use a javascript to trim undesired spaces. This command also removes the
"hidden" line break automatically added by browsers when the content of
an editable element is cleared/deleted.
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
- remove `<input>` tags and add contenteditable attribute to all
editable cells
- rows are always enabled now (no "edit" button to enable them)
- Simplify javascript code:
- use classNames to simplify column selection, instead of unique ids
- use datatables "columnDefs" and "createdCell" to add attributes
- use CSS class "editing" and CSS rules to handle buttons
- remove unused and unnecessary attributes from elements
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
Previously, the same function was used to initialize the table and update
the table rows, when lines were added, edited or deleted.
Now, one function initializes the table and another function saves the
changes, shows a message and updates the table to reflect the changes.
The values are "saved and applied" immediately using an AJAX call.
The waitMe overlay is also shown, but the page is NOT reloaded.
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
- add functions and buttons to add, modify, undo changes and delete lines
- generate the table using data already on the textarea
- add functions to read textarea contents and parse then into an array
- add functions to update the textarea contents from the table
- hide the textarea. Only the table will be visible
- make sure the table is not shown when the option was set by ENV VARS
- move some help paragraphs to the table legend
- remove usused original help text for the textarea
- use fixed size for all action buttons
- don't use "icheck" styling on the checkboxes in the table
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
Add an editable table to edit simple static DHCP leases (consisting of MAC Address, IP and hostname).
All advanced options will still available using the text area.
WebKit-based browsers (Safari, DuckDuckGo on macOS) don't yet support
the ES2024 Unicode Sets `v` regex flag, causing a SyntaxError that
prevents all dashboard JavaScript from executing — stats show `---` and
charts spin indefinitely.
None of the affected patterns use v-exclusive features (set notation
`[A--B]`, `[A&&B]`), so downgrading to `u` is fully equivalent and
restores broad compatibility without any functional change.
Also updates xo.config.js to enforce `requireFlag: "u"` so the linter
stays consistent with the codebase.
Affected files (16 occurrences across 8 files):
- scripts/js/utils.js
- scripts/js/index.js
- scripts/js/footer.js
- scripts/js/groups-domains.js
- scripts/js/settings-teleporter.js
- scripts/js/gravity.js
- scripts/js/groups.js
- scripts/js/groups-clients.js
- scripts/js/groups-lists.js
- scripts/js/settings-dns-records.js
- scripts/js/network.js
- scripts/js/taillog.js
Signed-off-by: Austin Gilmour <gilmoursa@gmail.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Now we allow invalid values on the table and highlight them.
This will allow users to find errors in data already saved on pihole.toml.
New parsing rules added - The line is also considered as "advanced" if:
- the line contains an asterisk;
- more than one IP is found;
- more than one Mac Address is found;
- more than one hostname is found.
The table also highlights invalid data onload, before a row is clicked.
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
DL6ER
yubiuser
Mordy OvitsandGitHub
vinayandvinaykulk621
Austin GilmourandClaude Sonnet 4.6