OPAC: Toggle the visibility of the “Show Password"/eye icon in the Login widget
I'm going to re-word this title, as I don't think it's quite accurate.
This is an interesting one. While the eye icon is familiar from my memory, it looks like a lot of major sites use "<checkbox> Show password" instead underneath the password box. I'd be inclined to follow that usage.
I've done a little version of this for OPACUserJS. It'll need a little tweak or two for the community I suspect, but hoping to post a patch later today...
Created attachment 173115 [details] [review] Bug 34778: Add a 'Show password' toggle when logging into the OPAC 1. Apply the patch 2. perl build-resources.PL 3. Go to http://localhost:8080/cgi-bin/koha/opac-main.pl 4. Type "ABC" into the "Password" box and click "Show password" 5. Note that the password is now visible. Click again to hide password. 6. Click "Log in to your account" 7. Type "123" into the "Password" box and click "Show password" 8. Note that the password is now visible. Click again to hide password. 9. Note that the password on the main screen wasn't affected by the "Show password" in the modal 10. Repeat the above process on http://localhost:8080/cgi-bin/koha/opac-user.pl
Created attachment 173310 [details] [review] Bug 34778: Add a 'Show password' toggle when logging into the OPAC 1. Apply the patch 2. perl build-resources.PL 3. Go to http://localhost:8080/cgi-bin/koha/opac-main.pl 4. Type "ABC" into the "Password" box and click "Show password" 5. Note that the password is now visible. Click again to hide password. 6. Click "Log in to your account" 7. Type "123" into the "Password" box and click "Show password" 8. Note that the password is now visible. Click again to hide password. 9. Note that the password on the main screen wasn't affected by the "Show password" in the modal 10. Repeat the above process on http://localhost:8080/cgi-bin/koha/opac-user.pl Signed-off-by: David Nind <david@davidnind.com>
"Show password" need to be a label for the checkbox, so that when you click on the label you can easily toggle the checkbox.
(In reply to Jonathan Druart from comment #6) > "Show password" need to be a label for the checkbox, so that when you click > on the label you can easily toggle the checkbox. Ah touché. I remember thinking about that, and then probably went with span to ease the styling when implementing this feature just via OpacUserJS. Will revisit this one...
Created attachment 174442 [details] [review] Bug 34778: (follow-up) convert label from 'span' to 'label' element Also uses the "for" attribute to uniquely point to the correct checkbox.