Improve domain list inout fields

I haven't had much time to code something, however, you may want to continue discussing based on what I crafted up in the few spare minutes I had this evening.

Run

pihole checkout web tweak/domain_regex_input

to get my test code.

Impression of how it looks like:

small screen:
Screenshot at 2020-03-05 21-33-37

The appearance of the checkbox can clearly be improved on, see this only as a first base for ongoing discussions. Feel free to draft some text to put next/below this filed if you still find that this is necessary.

I even made the input fault tolerant against *. input into the domains field when "wildcard blocking" is enabled. If the domain starts in *., this is stripped before conversion to regex to ensure it does what the user intended it to do. Note that this is not tolerant against *domain.com as this is something different (and will result in an error).

1 Like

What do you mean? On the "full" domain page you always see both. If you are on the black- or whitelist pages, the dropdown menu is gone and you can only add either white- or blacklisted domains.

Invert the default sorting is something we can discuss, jumping around in the table and highlight is something I don't like, especially because you can mass insert domains when separating them by whitespaces.

Or you can trust the green success message :wink:

Might people be less likely to try put * in if you changed the checkbox label to something like "Also block subdomains" or "block subdomains (wildcard)"

Tested this branch and found a bug:

Adding test as wildcard in "blacklist" gives a green success message but I can't see the added domain in the list. I can find it under 'Group Management/Domains' as "exact whitelist". Under "Whitelist" it is also not visible.
Additionally adding a wildcard blacklist under "Group Management/Domains" also results in the domain beeing added as "exact whitelist"

Adding a wildcard domain under "whitelist" is working as expected.

  Pi-hole version is v4.3.5-444-gf617ed2 (Latest: v4.4)
  AdminLTE version is v4.3.2-436-g56de14a (Latest: v4.3.3)
  FTL version is vDev-71e8498 (Latest: v4.3.1)

https://tricorder.pi-hole.net/f7zl57bz3p

Some thoughts about the layout:
I second mmotti's idea of renaming it to something like

I would prefer to see the checkbox right next to the "domain input field" to make it clearer that they belong together. You could switch the checkbox with the regex input field and separate them with a horizontal dash from type and comment. Something like this.
There would also some space left for some explanation of "wildcard"

What about using tabs to avoid overwhelming the user with the multitude of input fields?

This could look like this (hammered together in the browser's development tools):
xs screen:

sm/md screen:

lg screen:

We could also think about replacing the add to select box with buttons Add to Blacklist and Add to whitelist.
This would allow faster interacting and is easier to code, I think (considering that the same site is used as Blacklist/Whitelist site and for managing Group Management Domains).

3 Likes

Looks great! :heart_eyes:

Thanks for checking this out. At first, I had a similar design as suggested by @yubiuser, however, it turned out to look badly when display on small displays.

Can you open a PR from your code into tweak/domain_regex_input or provide a patch so I can absorb your changes without having to do them myself and to preserve your authorship? It doesn't need to be the final design, but it certainly looks like a step into the right direction. No rush on this, I'll only be back Monday and cannot test anything web-related meanwhile.

Yes. The necessary change in the logic can easily be done in the JS code, no need to modify groups.php. If you prefer, I can do this step later myself.

1 Like

I think this is a valuable information and should be kept.

Reason:
People want test.com and all its subdomains blocked, so they enter *.test.com. For them it looks like it is an exact/single domain (with subdomains - so no fancy regex stuff to block hundreds of different domains). If they ever want to look for/delete this entry they will look in the exact black/whitelist for something like *.test.com. Giving them a hint that it is converted and they have to look in the regex black/whitelist and it will be looking like (\.|^)test\.com$ is valuable. I think people will be thankful if they know this.

On the other side, there is a certain danger when everything is so simple that really anything can be done without even having to invest a single thought. I'd say it's very likely that they have less then ten domains on their list when they add their first regex. It will appear at the end.

DNS is a critical and central part of the network. While Pi-hole already makes it very easy to manage anything, people should invest at least a bit of willingness to learn. I think they typically do. Giving them some little challenges (like not highlighting what was recently added (however, it also comes last!)) seems a nice thing. You see, everything depending on the personal point of view.

3 Likes

@TheME Thanks, works great :slight_smile:

Additionally it also fixed the bug I saw above

Bug from above

Open for review and merge into v5.0:

1 Like

Merged!

Please go back onto release/v5.0.
Thanks for contributing anyone!

1 Like