LP1977554 - Add Password visibility toggle on login screens

Added an icon to each login input of a closed eye when input type is set to password.
If you click the icon it switches to an open eye and the input type is set to text.
It's a pretty standard way to allow people to view their password before submitting it.

Signed-off-by: Scott <scottangel@mobiusconsortium.org>
Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org>
Signed-off-by: Galen Charlton <gmc@equinoxOLI.org>

diff --git a/Open-ILS/src/eg2/src/app/staff/login.component.ts b/Open-ILS/src/eg2/src/app/staff/login.component.ts
index 02d6580..8baf99b 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/login.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/login.component.ts
@@ -78,6 +78,8 @@ export class StaffLoginComponent implements OnInit {
 
     handleSubmit() {
 
+        this.passwordVisible = false;
+
         // post-login URL
         let url: string = this.routeTo || '/staff/splash';
 

diff --git a/Open-ILS/src/templates-bootstrap/opac/parts/base.tt2 b/Open-ILS/src/templates-bootstrap/opac/parts/base.tt2
index bff11bd..0e8d2b1 100755 (executable)
--- a/Open-ILS/src/templates-bootstrap/opac/parts/base.tt2
+++ b/Open-ILS/src/templates-bootstrap/opac/parts/base.tt2
@@ -73,6 +73,10 @@
                     input.type == 'password' ? [input.type = 'text', icon.setAttribute('class','fas fa-eye')] : [input.type = 'password', icon.setAttribute('class', 'fas fa-eye-slash')];
                     input.focus();
                 });
+                let loginForm = document.getElementById('login_form');
+                loginForm.addEventListener('submit', ()=>{
+                    input.type = 'password';
+                });
                        });
                </script>
 

diff --git a/Open-ILS/src/templates-bootstrap/opac/parts/login/form.tt2 b/Open-ILS/src/templates-bootstrap/opac/parts/login/form.tt2
index b9a09bd..7659464 100755 (executable)
--- a/Open-ILS/src/templates-bootstrap/opac/parts/login/form.tt2
+++ b/Open-ILS/src/templates-bootstrap/opac/parts/login/form.tt2
@@ -3,7 +3,7 @@
 <div class='container'>
 <hr>
     <h3 class="text-center">[% l('Log in to Your Account') %]</h3>
-    <form method='post'>
+    <form id="login_form" method='post'>
    <div class="row text-center">[%# INCLUDE "opac/parts/login/help.tt2" %]</div>
     [% IF ctx.login_failed_event %]
 <div id='login-failed-message'>
@@ -39,7 +39,7 @@
                </div>
                <div class="col-sm w-50">
                        <div class="input-group">
-                               <input class="form-control" id="password_field" name="password" type="password" spellcheck="false"/>
+                               <input class="form-control" id="password_field" name="password" type="password" spellcheck="false" autocomplete="false"/>
                                <span id="show_password" class="input-group-text pointer"><i class="fas fa-eye-slash"></i></span>
                        </div>
                </div>

diff --git a/Open-ILS/src/templates-bootstrap/opac/parts/login/login_modal.tt2 b/Open-ILS/src/templates-bootstrap/opac/parts/login/login_modal.tt2
index bbbb560..5a958e3 100755 (executable)
--- a/Open-ILS/src/templates-bootstrap/opac/parts/login/login_modal.tt2
+++ b/Open-ILS/src/templates-bootstrap/opac/parts/login/login_modal.tt2
@@ -1,7 +1,7 @@
 <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">
     <div class="modal-content">
-     <form method='post' action="/eg/opac/login?redirect_to=%2Feg%2Fopac%2Fmyopac%2Fmain">
+     <form id="login_form" method='post' action="/eg/opac/login?redirect_to=%2Feg%2Fopac%2Fmyopac%2Fmain">
       <div class="modal-header">
         <h1 class="modal-title" id="exampleModalLabel">[% l('Login To Evergreen') %]</h1>
         <button type="button" class="close" data-dismiss="modal" aria-label=[% l("Close") %]>
@@ -46,7 +46,7 @@
                        </div>
                        <div class="col-sm w-50">
                 <div class="input-group">
-                    <input class="form-control" id="password_field" name="password" type="password" spellcheck="false"/>
+                    <input class="form-control" id="password_field" name="password" type="password" spellcheck="false" autocomplete="false"/>
                     <span id="show_password" class="input-group-text pointer"><i class="fas fa-eye-slash"></i></span>
                 </div>
                        </div>

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index 07cdb14..8b9582d 100644 (file)
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -3504,3 +3504,6 @@ span.egtd { display:table-cell; }
 .pointer {
     cursor: pointer;
 }
+#password_visibility{
+   display: none;
+}

diff --git a/Open-ILS/src/templates/opac/parts/js.tt2 b/Open-ILS/src/templates/opac/parts/js.tt2
index 0e35c0f..9aae9d9 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/js.tt2
+++ b/Open-ILS/src/templates/opac/parts/js.tt2
@@ -44,6 +44,8 @@
 
 <!-- Password Visibility Checkbox -->
 <script>
+    // Show the checkbox if JS is enabled
+    document.getElementById('password_visibility').style.display = 'block';
     let checkbox = document.getElementById('password_visibility_checkbox');
     let input = document.getElementById('password_field');
     checkbox.addEventListener('change', () => {
@@ -51,6 +53,11 @@
         else input.type = 'password';
         input.focus();
     });
+    // If the form is submitted revert the password field to a password input 
+    let form = document.getElementById('opac-login-form');
+    form.addEventListener('submit', () => {
+        input.type = 'password';
+    });
 </script>
 
 [%- IF ctx.use_stripe %]

diff --git a/Open-ILS/src/templates/opac/parts/login/form.tt2 b/Open-ILS/src/templates/opac/parts/login/form.tt2
index c84ed85..ddb9a76 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/login/form.tt2
+++ b/Open-ILS/src/templates/opac/parts/login/form.tt2
@@ -46,7 +46,7 @@
     [% END %]
     [% IF !sso_enabled || sso_native %]
     [% l('Please enter the following information:') %]
-    <form method='post'>
+    <form id="opac-login-form" method='post'>
         <div class='login-form-left'>
             <label for='username_field' class="lbl1" >[% l('Library Card Number or Username') %]</label>
             <div class="input_bg">
@@ -59,7 +59,7 @@
             <div class="input_bg">
                 <input id="password_field" name="password" type="password" spellcheck="false"/>
             </div>
-            <div class="input_bg">
+            <div id="password_visibility" class="input_bg">
                 <input id="password_visibility_checkbox" type="checkbox" />
                 <label for="password_visibility_checkbox">Show Password</label>
             </div>

diff --git a/Open-ILS/src/templates/staff/t_login.tt2 b/Open-ILS/src/templates/staff/t_login.tt2
index 0ad9813..a4f77d9 100644 (file)
--- a/Open-ILS/src/templates/staff/t_login.tt2
+++ b/Open-ILS/src/templates/staff/t_login.tt2
@@ -11,7 +11,7 @@
             The input IDs are there to match the labels.  
             They are not referenced in the Login controller.
           -->
-          <form ng-submit="login(args)" name="login-form" class="form-horizontal" role="form">
+          <form ng-submit="login(args)" id="login_form" name="login-form" class="form-horizontal" role="form">
             <div class="form-group">
               <label class="col-md-4 control-label" for="login-username">[% l('Username') %]</label>
               <div class="col-md-8">
@@ -26,7 +26,7 @@
               <div class="col-md-8">
                 <div class="input-group">
                   <input type="password" id="login-password" class="form-control"
-                    placeholder="Password" spellcheck="false" ng-model="args.password"/>
+                    placeholder="Password" spellcheck="false" autocomplete="false" ng-model="args.password"/>
                   <span id="show_password" class="input-group-addon pointer"><i class="glyphicon glyphicon-eye-close"></i></span>
                 </div>
               </div>
@@ -79,4 +79,7 @@
       input.type == 'password' ? [input.type = 'text', icon.setAttribute('class', 'glyphicon glyphicon-eye-open')] : [input.type = 'password', icon.setAttribute('class', 'glyphicon glyphicon-eye-close')];
       input.focus();
     });
+    $('#login_form').submit(()=>{
+        input.type='password'; 
+    });
 </script>
\ No newline at end of file