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