Bugzilla – Attachment 184147 Details for
Bug 24949
Provide password visibility toggle / icon to unmask password on staff login screen
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 24949: Provide password visibility toggle / icon to unmask password on staff login screen
Bug-24949-Provide-password-visibility-toggle--icon.patch (text/plain), 6.33 KB, created by
Owen Leonard
on 2025-07-16 11:27:56 UTC
(
hide
)
Description:
Bug 24949: Provide password visibility toggle / icon to unmask password on staff login screen
Filename:
MIME Type:
Creator:
Owen Leonard
Created:
2025-07-16 11:27:56 UTC
Size:
6.33 KB
patch
obsolete
>From 53e073f740b11b9514d0dcead7004ac3839c6a47 Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >Date: Tue, 15 Jul 2025 16:35:21 +0000 >Subject: [PATCH] Bug 24949: Provide password visibility toggle / icon to > unmask password on staff login screen > >This patch adapts the work on Bug 34778 to the staff client, adding a >"Show password" checkbox to the login form. > >To test, apply the batch and go to the staff client login screen. > >- You should see a "Show password" checkbox under the password field. >- Type something in the password field. It should be masked (****). >- Click the "Show password" label or check the checkbox. >- The password field should now show the text you entered. >- Confirm that you can log in successfully whether or not the password > is visible. >- `prove t/db_dependent/selenium/authentication.t` should pass. > >Sponsored-by: Athens County Public Libraries >--- > koha-tmpl/intranet-tmpl/prog/css/login.css | 9 ++++ > .../intranet-tmpl/prog/en/modules/auth.tt | 9 ++-- > .../prog/js/show-password-toggle.js | 44 +++++++++++++++++++ > t/db_dependent/selenium/authentication.t | 18 +++++++- > 4 files changed, 75 insertions(+), 5 deletions(-) > create mode 100644 koha-tmpl/intranet-tmpl/prog/js/show-password-toggle.js > >diff --git a/koha-tmpl/intranet-tmpl/prog/css/login.css b/koha-tmpl/intranet-tmpl/prog/css/login.css >index d41928c236d..0957a5af18d 100644 >--- a/koha-tmpl/intranet-tmpl/prog/css/login.css >+++ b/koha-tmpl/intranet-tmpl/prog/css/login.css >@@ -158,3 +158,12 @@ input[type="password"] { > font-size: 1.7em; > width: 97%; > } >+ >+.show-password-toggle { >+ margin: .7rem 0; >+} >+ >+input.show-password-toggle-checkbox { >+ float: left; >+ margin: 0 .5rem 0 0; >+} >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/auth.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/auth.tt >index 4a0a2109049..142b98fba4e 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/auth.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/auth.tt >@@ -169,12 +169,12 @@ > [% NEXT IF INPUT.name == "branch" %] > <input type="hidden" name="[% INPUT.name | html %]" value="[% INPUT.value | html %]" /> > [% END %] >- <p >- ><label for="userid">Username:</label> >+ <p> >+ <label for="userid">Username:</label> > <input type="text" name="login_userid" id="userid" class="input focus" value="[% userid | html %]" size="20" tabindex="1" autocomplete="off" /> > </p> >- <p >- ><label for="password">Password:</label> >+ <p> >+ <label for="password">Password:</label> > <input type="password" name="login_password" id="password" class="input" value="" size="20" tabindex="2" autocomplete="off" /> > </p> > >@@ -291,6 +291,7 @@ > <!-- /.main.container-fluid --> > > [% MACRO jsinclude BLOCK %] >+ [% Asset.js("js/show-password-toggle.js") | $raw %] > <script> > $(document).ready( function() { > if ( document.location.hash ) { >diff --git a/koha-tmpl/intranet-tmpl/prog/js/show-password-toggle.js b/koha-tmpl/intranet-tmpl/prog/js/show-password-toggle.js >new file mode 100644 >index 00000000000..9d07a7d3eec >--- /dev/null >+++ b/koha-tmpl/intranet-tmpl/prog/js/show-password-toggle.js >@@ -0,0 +1,44 @@ >+function create_show_password_toggle(loop_counter) { >+ const container = document.createElement("div"); >+ container.className = "show-password-toggle"; >+ >+ const checkbox = document.createElement("input"); >+ checkbox.type = "checkbox"; >+ checkbox.className = "show-password-toggle-checkbox"; >+ checkbox.id = `show-password-toggle-checkbox-${loop_counter}`; >+ >+ const label = document.createElement("label"); >+ label.className = "show-password-toggle-label"; >+ label.htmlFor = checkbox.id; >+ label.textContent = " " + __("Show password"); >+ >+ container.appendChild(checkbox); >+ container.appendChild(label); >+ >+ return container; >+} >+ >+document.addEventListener("DOMContentLoaded", function () { >+ const local_logins = document.querySelectorAll(".validated"); >+ local_logins.forEach((local_login, i) => { >+ let show_password_toggle_node = create_show_password_toggle(i); >+ local_login >+ .querySelector("input[type='password']") >+ .after(show_password_toggle_node); >+ 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"; >+ } >+ }); >+ } >+ }); >+}); >diff --git a/t/db_dependent/selenium/authentication.t b/t/db_dependent/selenium/authentication.t >index 2d613ed6c2e..1cbe6915e53 100755 >--- a/t/db_dependent/selenium/authentication.t >+++ b/t/db_dependent/selenium/authentication.t >@@ -43,7 +43,7 @@ SKIP: { > my $driver = $s->driver; > > subtest 'Staff interface authentication' => sub { >- plan tests => 7; >+ plan tests => 9; > my $mainpage = $s->base_url . q|mainpage.pl|; > $driver->get($mainpage); > like( $driver->get_title, qr(Log in to Koha), 'Hitting the main page should redirect to the login form' ); >@@ -60,6 +60,22 @@ SKIP: { > 'Patron without permission should be redirected to the login form' > ); > >+ is( >+ $driver->find_element('//input[@id="password"]')->get_attribute('type'), >+ 'password', >+ 'Password field is obscured initially' >+ ); >+ >+ $driver->find_element('//input[@class="show-password-toggle-checkbox"]')->click; >+ >+ is( >+ $driver->find_element('//input[@id="password"]')->get_attribute('type'), >+ 'text', >+ 'Password field is shown' >+ ); >+ >+ $driver->find_element('//input[@class="show-password-toggle-checkbox"]')->click; >+ > # Try logging in as someone else (even a non-existent patron) and you should still be denied access > $s->auth( 'Bond', 'James Bond' ); > like( >-- >2.39.5
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 24949
:
184146
|
184147
|
184167
|
184168
|
184181