Bugzilla – Attachment 173115 Details for
Bug 34778
Add a 'Show password'/eye icon to toggle visibility of password when logging into OPAC
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 34778: Add a 'Show password' toggle when logging into the OPAC
Bug-34778-Add-a-Show-password-toggle-when-logging-.patch (text/plain), 6.70 KB, created by
David Cook
on 2024-10-22 03:14:27 UTC
(
hide
)
Description:
Bug 34778: Add a 'Show password' toggle when logging into the OPAC
Filename:
MIME Type:
Creator:
David Cook
Created:
2024-10-22 03:14:27 UTC
Size:
6.70 KB
patch
obsolete
>From 3eed2acd938d7c88df1924ad2c00204e98cff054 Mon Sep 17 00:00:00 2001 >From: David Cook <dcook@prosentient.com.au> >Date: Tue, 22 Oct 2024 03:11:58 +0000 >Subject: [PATCH] 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 >--- > koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 5 +++++ > .../bootstrap/en/includes/masthead.inc | 1 + > .../bootstrap/en/includes/opac-bottom.inc | 1 + > .../en/includes/show-password-toggle.inc | 4 ++++ > .../opac-tmpl/bootstrap/en/modules/opac-auth.tt | 1 + > .../opac-tmpl/bootstrap/en/modules/opac-main.tt | 1 + > .../bootstrap/js/show-password-toggle.js | 17 +++++++++++++++++ > 7 files changed, 30 insertions(+) > create mode 100644 koha-tmpl/opac-tmpl/bootstrap/en/includes/show-password-toggle.inc > create mode 100644 koha-tmpl/opac-tmpl/bootstrap/js/show-password-toggle.js > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >index 7892d9847b..67d522d3ff 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >@@ -2981,4 +2981,9 @@ $star-selected: #EDB867; > } > } > >+#loginModal .local-login input.show-password-toggle-checkbox { >+ width: inherit; >+ display: inline; >+} >+ > @import "responsive"; >diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc >index e284d1ec9b..67364e85dd 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc >+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc >@@ -440,6 +440,7 @@ > <div class="local-login"> > <label for="muserid">Login:</label><input type="text" id="muserid" name="login_userid" autocomplete="off" /> > <label for="mpassword">Password:</label><input type="password" id="mpassword" name="login_password" autocomplete="off" /> >+ [% INCLUDE 'show-password-toggle.inc' %] > <fieldset class="action"> > <input type="hidden" name="op" value="cud-login" /> > <input type="submit" class="btn btn-primary" value="Log in" /> >diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc >index 50d78ea97b..d58340f1bd 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc >+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc >@@ -162,6 +162,7 @@ > [% END %] > > [% Asset.js("lib/js-cookie/js.cookie-3.0.1.min.js") | $raw %] >+[% Asset.js("bootstrap/js/show-password-toggle.js") | $raw %] > <script> > $(document).ready(function() { > if($('#searchsubmit').length) { >diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/show-password-toggle.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/show-password-toggle.inc >new file mode 100644 >index 0000000000..17a854b074 >--- /dev/null >+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/show-password-toggle.inc >@@ -0,0 +1,4 @@ >+<div class="show-password-toggle"> >+ <input type="checkbox" class="show-password-toggle-checkbox"> >+ <span class="show-password-toggle-label"> Show password</span> >+</div> >diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth.tt >index 632dab59cd..d3c4fcfca4 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth.tt >+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth.tt >@@ -243,6 +243,7 @@ > <label for="password">Password:</label> > <input class="form-control" type="password" size="25" id="password" name="login_password" autocomplete="off" /> > </div> >+ [% INCLUDE 'show-password-toggle.inc' %] > <fieldset class="action"> > <input type="submit" value="Log in" class="btn btn-primary" /> > </fieldset> >diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-main.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-main.tt >index 211e1e1419..fa351e6fc5 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-main.tt >+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-main.tt >@@ -204,6 +204,7 @@ > <input class="form-control" type="text" id="userid" name="login_userid" autocomplete="off" /> > <label for="password">Password:</label> > <input class="form-control" type="password" id="password" name="login_password" autocomplete="off" /> >+ [% INCLUDE 'show-password-toggle.inc' %] > <fieldset class="action"> > <input type="hidden" name="op" value="cud-login" /> > <input type="submit" value="Log in" class="btn btn-primary" /> >diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/show-password-toggle.js b/koha-tmpl/opac-tmpl/bootstrap/js/show-password-toggle.js >new file mode 100644 >index 0000000000..03a7f34c15 >--- /dev/null >+++ b/koha-tmpl/opac-tmpl/bootstrap/js/show-password-toggle.js >@@ -0,0 +1,17 @@ >+document.addEventListener("DOMContentLoaded", function() { >+ const local_logins = document.querySelectorAll('.local-login'); >+ local_logins.forEach( (local_login) => { >+ const password_field = local_login.querySelector('#password,#mpassword'); >+ const toggle_box = local_login.querySelector('input.show-password-toggle-checkbox'); >+ if (password_field && toggle_box){ >+ toggle_box.addEventListener('click',function(ev){ >+ if (password_field.type === 'password'){ >+ password_field.type = 'text'; >+ } >+ else { >+ password_field.type = 'password'; >+ } >+ }); >+ } >+ }); >+}); >-- >2.39.2
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 34778
:
173115
|
173310
|
174442
|
176485
|
176486
|
176501
|
176502
|
176505
|
176506
|
176703
|
176904
|
176905
|
176907
|
176908
|
176909
|
176910
|
176911
|
177272