From: Scott Angel <scottangel@mobiusconsortium.org>
Date: Tue, 24 Jan 2023 17:26:17 +0000 (-0600)
Subject: LP1977554 - Add Password visibility toggle on login screens
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=3a1b3b7d6de8795449db2f52053a8077310eff47;p=working%2FEvergreen.git

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>
---

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 63c8b82f9d..5b30af2c10 100644
--- a/Open-ILS/src/eg2/src/app/staff/login.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/login.component.html
@@ -21,16 +21,22 @@
 
         <div class="form-group row">
           <label class="col-lg-4 text-right font-weight-bold" for="password" i18n>Password</label>
+          <div class="input-group col-lg-8 p-0">
           <input 
-            type="password" 
-            class="form-control col-lg-8"
-            id="password" 
+            [type]="passwordVisible ? 'text' : 'password'"
+            class="form-control"
+            id="password"
             name="password"
             required
             autocomplete="current-password"
             i18n-placeholder
-            placeholder="Password" 
+            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>
 
         <div class="form-group row" *ngIf="workstations && workstations.length">
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 956b18c13c..d6ef14af5f 100644
--- a/Open-ILS/src/eg2/src/app/staff/login.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/login.component.ts
@@ -14,6 +14,7 @@ export class StaffLoginComponent implements OnInit {
     workstations: any[];
     loginFailed: boolean;
     routeTo: string;
+    passwordVisible: boolean;
 
     args = {
       username : '',
@@ -115,6 +116,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 2af095ac4f..23d71cabec 100644
--- a/Open-ILS/src/eg2/src/styles.css
+++ b/Open-ILS/src/eg2/src/styles.css
@@ -360,3 +360,10 @@ input.small {
   background-color: #f9dede;
   color: #212121;
 }
+
+/*
+   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 fbbd9dd59f..f16195ea51 100755
--- a/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2
@@ -4084,3 +4084,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 91030b7dc8..bff11bd670 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 fcd8d87640..b9a09bdb1c 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 44c4544d0a..cb88dcb5cd 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 c17da05a39..07cdb14bbd 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 c597c31863..0e35c0fae4 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 6ceca0b5dd..c84ed85c7a 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 2dc7fc4221..0ad9813b8a 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