Bug 34778

Summary: Add a 'Show password'/eye icon to toggle visibility of password when logging into OPAC
Product: Koha Reporter: Amit Gupta <amitddng135>
Component: OPACAssignee: David Cook <dcook>
Status: Needs Signoff --- QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: amitddng135, dcook, jonathan.druart
Version: Main   
Hardware: All   
OS: All   
See Also: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=24949
Change sponsored?: --- Patch complexity: ---
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:
Attachments: Bug 34778: Add a 'Show password' toggle when logging into the OPAC
Bug 34778: Add a 'Show password' toggle when logging into the OPAC
Bug 34778: (follow-up) convert label from 'span' to 'label' element

Description Amit Gupta 2023-09-13 05:40:26 UTC
OPAC: Toggle the visibility of the “Show Password"/eye icon in the Login widget
Comment 1 David Cook 2024-10-20 23:17:22 UTC
I'm going to re-word this title, as I don't think it's quite accurate.
Comment 2 David Cook 2024-10-20 23:24:04 UTC
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.
Comment 3 David Cook 2024-10-21 02:57:46 UTC
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...
Comment 4 David Cook 2024-10-22 03:14:27 UTC
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
Comment 5 David Nind 2024-10-25 04:39:24 UTC
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>
Comment 6 Jonathan Druart 2024-10-29 10:21:19 UTC
"Show password" need to be a label for the checkbox, so that when you click on the label you can easily toggle the checkbox.
Comment 7 David Cook 2024-10-29 22:27:30 UTC
(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...
Comment 8 David Cook 2024-11-13 01:37:21 UTC
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.