Bug 34778 - Add a 'Show password'/eye icon to toggle visibility of password when logging into OPAC
Summary: Add a 'Show password'/eye icon to toggle visibility of password when logging ...
Status: Pushed to main
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement
Assignee: Jonathan Druart
QA Contact: David Cook
URL:
Keywords: additional_work_needed, release-notes-needed
Depends on:
Blocks:
 
Reported: 2023-09-13 05:40 UTC by Amit Gupta
Modified: 2025-02-03 13:29 UTC (History)
6 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
25.05.00
Circulation function:


Attachments
Bug 34778: Add a 'Show password' toggle when logging into the OPAC (6.70 KB, patch)
2024-10-22 03:14 UTC, David Cook
Details | Diff | Splinter Review
Bug 34778: Add a 'Show password' toggle when logging into the OPAC (6.75 KB, patch)
2024-10-25 04:39 UTC, David Nind
Details | Diff | Splinter Review
Bug 34778: (follow-up) convert label from 'span' to 'label' element (5.15 KB, patch)
2024-11-13 01:37 UTC, David Cook
Details | Diff | Splinter Review
Bug 34778: Add a 'Show password' toggle when logging into the OPAC (6.76 KB, patch)
2025-01-14 05:10 UTC, David Cook
Details | Diff | Splinter Review
Bug 34778: (follow-up) convert label from 'span' to 'label' element (3.99 KB, patch)
2025-01-14 05:10 UTC, David Cook
Details | Diff | Splinter Review
Bug 34778: Add a 'Show password' toggle when logging into the OPAC (6.90 KB, patch)
2025-01-14 13:26 UTC, Biblibre Sandboxes
Details | Diff | Splinter Review
Bug 34778: (follow-up) convert label from 'span' to 'label' element (4.14 KB, patch)
2025-01-14 13:26 UTC, Biblibre Sandboxes
Details | Diff | Splinter Review
Bug 34778: Add a 'Show password' toggle when logging into the OPAC (6.97 KB, patch)
2025-01-14 16:37 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 34778: (follow-up) convert label from 'span' to 'label' element (4.20 KB, patch)
2025-01-14 16:37 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 34778: Add a selenium test (2.86 KB, patch)
2025-01-16 23:43 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 34778: Remove extra 'bootstrap' when loading the js asset (1.02 KB, patch)
2025-01-22 11:52 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 34778: Remove the include file (5.81 KB, patch)
2025-01-22 11:52 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 34778: Add a 'Show password' toggle when logging into the OPAC (7.01 KB, patch)
2025-01-22 12:43 UTC, Biblibre Sandboxes
Details | Diff | Splinter Review
Bug 34778: (follow-up) convert label from 'span' to 'label' element (4.24 KB, patch)
2025-01-22 12:43 UTC, Biblibre Sandboxes
Details | Diff | Splinter Review
Bug 34778: Add a selenium test (3.00 KB, patch)
2025-01-22 12:43 UTC, Biblibre Sandboxes
Details | Diff | Splinter Review
Bug 34778: Remove extra 'bootstrap' when loading the js asset (1.16 KB, patch)
2025-01-22 12:43 UTC, Biblibre Sandboxes
Details | Diff | Splinter Review
Bug 34778: Remove the include file (5.95 KB, patch)
2025-01-22 12:43 UTC, Biblibre Sandboxes
Details | Diff | Splinter Review
Bug 34778: (follow-up) Remove the include file (2.41 KB, patch)
2025-01-28 13:26 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 34778: Add a 'Show password' toggle when logging into the OPAC (7.06 KB, patch)
2025-01-28 23:05 UTC, David Cook
Details | Diff | Splinter Review
Bug 34778: (follow-up) convert label from 'span' to 'label' element (4.30 KB, patch)
2025-01-28 23:05 UTC, David Cook
Details | Diff | Splinter Review
Bug 34778: Add a selenium test (3.06 KB, patch)
2025-01-28 23:05 UTC, David Cook
Details | Diff | Splinter Review
Bug 34778: Remove extra 'bootstrap' when loading the js asset (1.21 KB, patch)
2025-01-28 23:05 UTC, David Cook
Details | Diff | Splinter Review
Bug 34778: Remove the include file (6.00 KB, patch)
2025-01-28 23:06 UTC, David Cook
Details | Diff | Splinter Review
Bug 34778: (follow-up) Remove the include file (2.46 KB, patch)
2025-01-28 23:06 UTC, David Cook
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
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.
Comment 9 Emmanuel Bétemps 2025-01-13 13:44:12 UTC
CONFLICT (content): Merge conflict in koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc
Comment 10 David Cook 2025-01-14 05:09:21 UTC
(In reply to Emmanuel Bétemps from comment #9)
> CONFLICT (content): Merge conflict in
> koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc

Thanks Emmanuel. Uploading a rebased version.
Comment 11 David Cook 2025-01-14 05:10:15 UTC
Created attachment 176485 [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 12 David Cook 2025-01-14 05:10:18 UTC
Created attachment 176486 [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.
Comment 13 Biblibre Sandboxes 2025-01-14 13:26:23 UTC
Created attachment 176501 [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: Emmanuel Bétemps <e.betemps@gmail.com>
Comment 14 Biblibre Sandboxes 2025-01-14 13:26:25 UTC
Created attachment 176502 [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.

Signed-off-by: Emmanuel Bétemps <e.betemps@gmail.com>
Comment 15 Emmanuel Bétemps 2025-01-14 13:33:00 UTC
Hi,

each step of the test plan is ok (please, note I tested on a sandbox)

one thing (which wasn't asked) I looked at is 'What if I want to change my password ?'
-> there is no 'show my password' option
Could it be useful to work on that ?
Comment 16 Emmanuel Bétemps 2025-01-14 13:52:29 UTC
Perhaps Opac self-registration could also include this option 'show my password' when the account is created.
The syspref is PatronSelfRegistration.
Comment 17 Victor Grousset/tuxayo 2025-01-14 14:21:47 UTC
(In reply to Emmanuel Bétemps from comment #16)
> Perhaps Opac self-registration could also include this option 'show my
> password' when the account is created.
> The syspref is PatronSelfRegistration.

We though of this because someone when creating their bugzilla account good locked out due to a password mistake. ^^"
And Bugzilla doesn't have the feature proposed here for Koha.
But it turns out the proposal here wouldn't have prevented the scenario that happened with bugzilla.

Note *if* self registration is too different it might risk stalling this bug.
Comment 18 Lucas Gass (lukeg) 2025-01-14 16:37:52 UTC
Created attachment 176505 [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: Emmanuel Bétemps <e.betemps@gmail.com>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 19 Lucas Gass (lukeg) 2025-01-14 16:37:55 UTC
Created attachment 176506 [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.

Signed-off-by: Emmanuel Bétemps <e.betemps@gmail.com>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 20 Jonathan Druart 2025-01-14 17:34:07 UTC
Auth is well covered by selenium tests. It should be easy and could be useful to have a couple of tests to cover this change.
Comment 21 Lucas Gass (lukeg) 2025-01-16 23:43:14 UTC
Created attachment 176703 [details] [review]
Bug 34778: Add a selenium test

prove -v t/db_dependent/selenium/authentication.t
Comment 22 Jonathan Druart 2025-01-22 11:52:03 UTC
Created attachment 176904 [details] [review]
Bug 34778: Remove extra 'bootstrap' when loading the js asset

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 23 Jonathan Druart 2025-01-22 11:52:06 UTC
Created attachment 176905 [details] [review]
Bug 34778: Remove the include file
Comment 24 Jonathan Druart 2025-01-22 11:52:46 UTC
What about this last patch? It feels better to not rely on an additional include file when it can be done using JS easily.
Comment 25 Jonathan Druart 2025-01-22 11:54:17 UTC
Also it would have been good to apply this to all password fields we have in Koha, not only the login screens at the OPAC.
Comment 26 Biblibre Sandboxes 2025-01-22 12:43:14 UTC
Created attachment 176907 [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: Emmanuel Bétemps <e.betemps@gmail.com>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Emmanuel Bétemps <e.betemps@gmail.com>
Comment 27 Biblibre Sandboxes 2025-01-22 12:43:17 UTC
Created attachment 176908 [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.

Signed-off-by: Emmanuel Bétemps <e.betemps@gmail.com>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Emmanuel Bétemps <e.betemps@gmail.com>
Comment 28 Biblibre Sandboxes 2025-01-22 12:43:19 UTC
Created attachment 176909 [details] [review]
Bug 34778: Add a selenium test

prove -v t/db_dependent/selenium/authentication.t

Signed-off-by: Emmanuel Bétemps <e.betemps@gmail.com>
Comment 29 Biblibre Sandboxes 2025-01-22 12:43:22 UTC
Created attachment 176910 [details] [review]
Bug 34778: Remove extra 'bootstrap' when loading the js asset

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Emmanuel Bétemps <e.betemps@gmail.com>
Comment 30 Biblibre Sandboxes 2025-01-22 12:43:24 UTC
Created attachment 176911 [details] [review]
Bug 34778: Remove the include file

Signed-off-by: Emmanuel Bétemps <e.betemps@gmail.com>
Comment 31 Jonathan Druart 2025-01-23 13:18:04 UTC
(In reply to Jonathan Druart from comment #24)
> What about this last patch? It feels better to not rely on an additional
> include file when it can be done using JS easily.

David, if you agree with this change please set to PQA.
Comment 32 David Cook 2025-01-28 00:57:34 UTC
(In reply to Jonathan Druart from comment #24)
> What about this last patch? It feels better to not rely on an additional
> include file when it can be done using JS easily.

Sounds good to me. I like how you've written the JS there. 

(In reply to Jonathan Druart from comment #31)
> (In reply to Jonathan Druart from comment #24)
> > What about this last patch? It feels better to not rely on an additional
> > include file when it can be done using JS easily.
> 
> David, if you agree with this change please set to PQA.

I don't know that I agree that the change was needed, but I've just tested and it works, so happy to PQA it.
Comment 33 David Cook 2025-01-28 01:00:01 UTC
(In reply to Jonathan Druart from comment #25)
> Also it would have been good to apply this to all password fields we have in
> Koha, not only the login screens at the OPAC.

We've still got time to do that.

What other screens do you have in mind for the OPAC?

/cgi-bin/koha/opac-memberentry.pl is the only one that springs to mind at the moment for me, but I imagine there could be others.
Comment 34 David Cook 2025-01-28 01:00:23 UTC
Actually, it looks like the selenium test is failing now, so got to FQA it.
Comment 35 Jonathan Druart 2025-01-28 13:26:57 UTC
Created attachment 177272 [details] [review]
Bug 34778: (follow-up) Remove the include file
Comment 36 David Cook 2025-01-28 23:05:49 UTC
Created attachment 177300 [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: Emmanuel Bétemps <e.betemps@gmail.com>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Emmanuel Bétemps <e.betemps@gmail.com>
Signed-off-by: David Cook <dcook@prosentient.com.au>
Comment 37 David Cook 2025-01-28 23:05:52 UTC
Created attachment 177301 [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.

Signed-off-by: Emmanuel Bétemps <e.betemps@gmail.com>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Emmanuel Bétemps <e.betemps@gmail.com>
Signed-off-by: David Cook <dcook@prosentient.com.au>
Comment 38 David Cook 2025-01-28 23:05:55 UTC
Created attachment 177302 [details] [review]
Bug 34778: Add a selenium test

prove -v t/db_dependent/selenium/authentication.t

Signed-off-by: Emmanuel Bétemps <e.betemps@gmail.com>
Signed-off-by: David Cook <dcook@prosentient.com.au>
Comment 39 David Cook 2025-01-28 23:05:58 UTC
Created attachment 177303 [details] [review]
Bug 34778: Remove extra 'bootstrap' when loading the js asset

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Emmanuel Bétemps <e.betemps@gmail.com>
Signed-off-by: David Cook <dcook@prosentient.com.au>
Comment 40 David Cook 2025-01-28 23:06:00 UTC
Created attachment 177304 [details] [review]
Bug 34778: Remove the include file

Signed-off-by: Emmanuel Bétemps <e.betemps@gmail.com>
Signed-off-by: David Cook <dcook@prosentient.com.au>
Comment 41 David Cook 2025-01-28 23:06:04 UTC
Created attachment 177305 [details] [review]
Bug 34778: (follow-up) Remove the include file

Signed-off-by: David Cook <dcook@prosentient.com.au>
Comment 42 Katrin Fischer 2025-02-03 13:25:56 UTC
Would love to see bug 24949 also in my queue for 25.05...
Comment 43 Katrin Fischer 2025-02-03 13:29:13 UTC
Pushed for 25.05!

Well done everyone, thank you!