TEXTINPUT_PASSWORD fields rendered as plain text

Thank you for this, it is a great enhancement !! :+1:

almost all field look beautiful, like changing the password of a user

afbeelding

For me: Only login looks a bit weird in Firefox and MS-edge (windows 10)

afbeelding

In chromium on windows and firefox on linux it looks oke!

afbeelding

A non issue, nothing to worry about.
Do not forget my first words :grinning:

EDIT: and firefox on linux

1 Like

Confirmed. Played around with the CSS settings in firefox and it seems to be enough to set the font size of the password field to 125% instead of 130% at least for firefox. It does not work for edge.

2 Likes

reopening for consideration https://github.com/NethServer/dev/issues/5554#issuecomment-414036698

AFAIK there is no “operating system” selector on CSS.

We could refactor a bit the CSS as @mrmarkuz suggested, just for the login page.
If someone can do open a PR, I will be really happy.
Otherwise let wait until @davidep returns from his holidays, but honestly I want to avoid wasting time in such things :smiling_imp:

I’m going to close again the issue. If you find a fix, please open a new issue with all information to reproduce it (like the browser version).

Unfortunately windows is widely used and the login page is the first impression you have about the server-manager… :rofl:

You’re right, so let write down a real issue with all the information needed to reproduce the problem.

I’m really glad of the excellent work done by @dnutan and I really appreciate the effort!

1 Like

Would someone like to try if this css workaround is enough?

#Login_password {
    padding-right: 20px;/*or 24-28px*/
}

Another variation (optional):

#Login_password {
    padding-right: 24px;/*or 30-32px*/
}
#LoginAction .PasswordButton {
    right: 0px; /*no slip out of input field by the right side*/
}

Using padding-right can increase login panel width, but without annoyances.
In both cases, padding-right has room to be increased until 32px (the size of the eye button, more would be unnecessary).

Test it with multiple OS and web browsers, if possible, and check if:

  1. password field is (nearly) the same size as username field
  2. eye correctly positioned
  3. the eye icon does not overlap the (un)masked password (characters seen behind the icon). Increase padding if more separation is wanted (suggested values in css comments).

Optional: If cannot test on mobile, test mobile/responsive design mode.

I’ve tested it on GNU/Linux with Firefox and Chromium; on Windows 10 with Firefox, Chrome and Edge, by changing css from browser’s developer tools.

3 Likes

Tested first and optional variation and all pixel suggestions;
did not notice difference between them:

Windows 10 (on a workstation and 2 laptops)

  • Firefox: all zoom-levels oke except :
    30% (eye icon out of the much smaller box) and
    60% (eye icon overlaps in slightly smaller box)
    Consider it as fixed !
  • MS-Edge : all zoom-levels oke
  • Chromium : all zoom-levels oke.

Linux (Debian 9 & Centos 7) (on VM’s > RDP one multi boot laptop)

  • Firefox: all zoom-levels oke

Fixed +1

Edit: see below

1 Like
#Login_password {
    padding-right: 20px;/*or 24-28px*/
    width: -moz-available;
}

YES! now its good on all zoom levels in Firefox on windows too :+1:

(Redid the tests for Edge and Chromium on the workstation without regressions :grinning:)

1 Like

I created a new issue (https://github.com/NethServer/dev/issues/5573) and a new RPM with @dnutan patch is ready for testing.

Just the final effort! Could you please give it a try? @mark_nl @mrmarkuz

Really good work!!

1 Like
  • All zoom levels good with Firefox and Edge on Windows 10

No regressions:

  • All zoom levels good with Chromium on Windows 10
  • All zoom levels good with Firefox on Debian and Centos

+1

1 Like

Thank to you, RPM has been released!