From 0a4b3fb5fc105d9f4078f133fbcc04300eca5f23 Mon Sep 17 00:00:00 2001
From: Scott Angel <scottangel@mobiusconsortium.org>
Date: Tue, 24 Jan 2023 11:26:17 -0600
Subject: [PATCH] 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 Angel <scottangel@mobiusconsortium.org>
Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org>
Signed-off-by: Galen Charlton <gmc@equinoxOLI.org>
---
 .../src/eg2/src/app/staff/login.component.html     |   24 +++++++++++--------
 Open-ILS/src/eg2/src/app/staff/login.component.ts  |    6 +++++
 Open-ILS/src/eg2/src/styles.css                    |    9 ++++++-
 .../src/templates-bootstrap/opac/css/style.css.tt2 |    4 +++
 .../src/templates-bootstrap/opac/parts/base.tt2    |    8 ++++++
 .../templates-bootstrap/opac/parts/login/form.tt2  |    5 +++-
 .../opac/parts/login/login_modal.tt2               |    5 +++-
 Open-ILS/src/templates/opac/css/style.css.tt2      |    3 ++
 Open-ILS/src/templates/opac/parts/js.tt2           |   11 +++++++++
 Open-ILS/src/templates/opac/parts/login/form.tt2   |    6 ++++-
 Open-ILS/src/templates/staff/t_login.tt2           |   17 ++++++++++++-
 11 files changed, 82 insertions(+), 16 deletions(-)

diff --git a/Open-ILS/src/eg2/src/app/staff/login.component.html b/Open-ILS/src/eg2/src/app/staff/login.component.html
index 939fe52..987cd6a 100644
--- a/Open-ILS/src/eg2/src/app/staff/login.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/login.component.html
@@ -24,16 +24,20 @@
         <div class="row row-cols-auto mt-3">
           <label class="form-label col-form-label fw-bold col-4 text-end" for="password" i18n>Password</label>
           <div class="col-8">
-            <input 
-              type="password" 
-              class="form-control"
-              id="password" 
-              name="password"
-              required
-              autocomplete="current-password"
-              i18n-placeholder
-              placeholder="Password" 
-              [(ngModel)]="args.password"/>
+          <input 
+            [type]="passwordVisible ? 'text' : 'password'"
+            class="form-control"
+            id="password"
+            name="password"
+            required
+            autocomplete="current-password"
+            i18n-placeholder
+            placeholder="Password"
+            spellcheck="false"
+            [(ngModel)]="args.password"/>
+          <span id="show_password" class="input-group-text pointer" (click)="togglePasswordVisibility()">
+            <span class="material-icons">{{ passwordVisible ? 'visibility' : 'visibility_off' }}</span>
+          </span>
           </div>
         </div>
 
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 50ec9c6..02d6580 100644
--- a/Open-ILS/src/eg2/src/app/staff/login.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/login.component.ts
@@ -15,6 +15,7 @@ export class StaffLoginComponent implements OnInit {
     loginFailed: boolean;
     routeTo: string;
     pendingXactsDate: Date;
+    passwordVisible: boolean;
 
     args = {
       username : '',
@@ -118,6 +119,11 @@ export class StaffLoginComponent implements OnInit {
             }
         );
     }
+
+    togglePasswordVisibility() {
+        this.passwordVisible = !this.passwordVisible;
+    }
+
 }
 
 
diff --git a/Open-ILS/src/eg2/src/styles.css b/Open-ILS/src/eg2/src/styles.css
index bf4b325..ca59afa 100644
--- a/Open-ILS/src/eg2/src/styles.css
+++ b/Open-ILS/src/eg2/src/styles.css
@@ -560,4 +560,11 @@ a {
 
 .popover-body {
   padding: 0;
-}
\ No newline at end of file
+}
+
+/*
+   CSS Cursor classes
+*/
+.pointer {
+  cursor: pointer;
+}
diff --git a/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2 b/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2
index 1a9e146..92d651b 100755
--- a/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2
@@ -4019,3 +4019,7 @@ padding: 15px;
 .form-control {
     border: 1px solid [% css_colors.border_standard %];
 }
+
+.pointer {
+    cursor: pointer;
+}
diff --git a/Open-ILS/src/templates-bootstrap/opac/parts/base.tt2 b/Open-ILS/src/templates-bootstrap/opac/parts/base.tt2
index 91030b7..bff11bd 100755
--- a/Open-ILS/src/templates-bootstrap/opac/parts/base.tt2
+++ b/Open-ILS/src/templates-bootstrap/opac/parts/base.tt2
@@ -65,6 +65,14 @@
 				$("#loginModal").on('shown.bs.modal', function(){
 					$(this).find('#username_field').focus();
 				});
+                // password visibility eye
+                let btn = document.getElementById('show_password');
+                let input = document.getElementById('password_field');
+                let icon = btn.querySelector('i');
+                btn.addEventListener('click', () => {
+                    input.type == 'password' ? [input.type = 'text', icon.setAttribute('class','fas fa-eye')] : [input.type = 'password', icon.setAttribute('class', 'fas fa-eye-slash')];
+                    input.focus();
+                });
 			});
 		</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 fcd8d87..b9a09bd 100755
--- a/Open-ILS/src/templates-bootstrap/opac/parts/login/form.tt2
+++ b/Open-ILS/src/templates-bootstrap/opac/parts/login/form.tt2
@@ -38,7 +38,10 @@
 			<input class="form-control" type='text' id="username_field" name="username" autofocus />
 		</div>
 		<div class="col-sm w-50">
-			<input class="form-control" id="password_field" name="password" type="password"/>
+			<div class="input-group">
+				<input class="form-control" id="password_field" name="password" type="password" spellcheck="false"/>
+				<span id="show_password" class="input-group-text pointer"><i class="fas fa-eye-slash"></i></span>
+			</div>
 		</div>
 	</div>
 	<div class="row">
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 a778b7c..bbbb560 100755
--- a/Open-ILS/src/templates-bootstrap/opac/parts/login/login_modal.tt2
+++ b/Open-ILS/src/templates-bootstrap/opac/parts/login/login_modal.tt2
@@ -45,7 +45,10 @@
 				<input class="form-control" type='text' id="username_field" name="username"/>
 			</div>
 			<div class="col-sm w-50">
-				<input class="form-control" id="password_field" name="password" type="password"/>
+                <div class="input-group">
+                    <input class="form-control" id="password_field" name="password" type="password" spellcheck="false"/>
+                    <span id="show_password" class="input-group-text pointer"><i class="fas fa-eye-slash"></i></span>
+                </div>
 			</div>
 		</div>
 		<div class="row">
diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index c17da05..07cdb14 100644
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -3501,3 +3501,6 @@ span.egtd { display:table-cell; }
 
 */
 
+.pointer {
+    cursor: pointer;
+}
diff --git a/Open-ILS/src/templates/opac/parts/js.tt2 b/Open-ILS/src/templates/opac/parts/js.tt2
index c597c31..0e35c0f 100644
--- a/Open-ILS/src/templates/opac/parts/js.tt2
+++ b/Open-ILS/src/templates/opac/parts/js.tt2
@@ -42,6 +42,17 @@
 }
 </script>
 
+<!-- Password Visibility Checkbox -->
+<script>
+    let checkbox = document.getElementById('password_visibility_checkbox');
+    let input = document.getElementById('password_field');
+    checkbox.addEventListener('change', () => {
+        if(checkbox.checked) input.type = 'text';
+        else input.type = 'password';
+        input.focus();
+    });
+</script>
+
 [%- IF ctx.use_stripe %]
 <script type="text/javascript">unHideMe($("pay_fines_now"));[%# the DOM is loaded now, right? %]</script>
 [% END -%]
diff --git a/Open-ILS/src/templates/opac/parts/login/form.tt2 b/Open-ILS/src/templates/opac/parts/login/form.tt2
index 6ceca0b..c84ed85 100644
--- a/Open-ILS/src/templates/opac/parts/login/form.tt2
+++ b/Open-ILS/src/templates/opac/parts/login/form.tt2
@@ -57,7 +57,11 @@
         <div class='float-left'>
             <label for="password_field" class="lbl1" >[% l('PIN Number or Password') %]</label>
             <div class="input_bg">
-                <input id="password_field" name="password" type="password" />
+                <input id="password_field" name="password" type="password" spellcheck="false"/>
+            </div>
+            <div class="input_bg">
+                <input id="password_visibility_checkbox" type="checkbox" />
+                <label for="password_visibility_checkbox">Show Password</label>
             </div>
             [% INCLUDE "opac/parts/login/password_hint.tt2" %]
             [% IF reset_password == 'true' %]
diff --git a/Open-ILS/src/templates/staff/t_login.tt2 b/Open-ILS/src/templates/staff/t_login.tt2
index 2dc7fc4..0ad9813 100644
--- a/Open-ILS/src/templates/staff/t_login.tt2
+++ b/Open-ILS/src/templates/staff/t_login.tt2
@@ -24,8 +24,11 @@
             <div class="form-group">
               <label class="col-md-4 control-label" for="login-password">[% l('Password') %]</label>
               <div class="col-md-8">
-                <input type="password" id="login-password" class="form-control"
-                  placeholder="Password" ng-model="args.password"/>
+                <div class="input-group">
+                  <input type="password" id="login-password" class="form-control"
+                    placeholder="Password" spellcheck="false" ng-model="args.password"/>
+                  <span id="show_password" class="input-group-addon pointer"><i class="glyphicon glyphicon-eye-close"></i></span>
+                </div>
               </div>
             </div>
 
@@ -67,3 +70,13 @@
     <div class="col-md-3"></div><!-- offset? -->
   </div>
 </div>
+<script>
+    // password visibility eye
+    let btn = document.getElementById('show_password');
+    let input = document.getElementById('login-password');
+    let icon = btn.querySelector('i');
+    btn.addEventListener('click', () => {
+      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();
+    });
+</script>
\ No newline at end of file
-- 
1.7.2.5