From f70e5ee1aac6bceef343ff66a5dd1b5b0d5e4c85 Mon Sep 17 00:00:00 2001 From: Scott Angel Date: Thu, 23 Mar 2023 16:27:05 -0500 Subject: [PATCH] LP1977554 - Add Password visibility toggle on login screens Changed the tags to
-
- -
+
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 8baf99b40d..fc0d58c47a 100644 --- a/Open-ILS/src/eg2/src/app/staff/login.component.ts +++ b/Open-ILS/src/eg2/src/app/staff/login.component.ts @@ -1,4 +1,10 @@ -import {Component, OnInit, Renderer2} from '@angular/core'; +import { + Component, + ElementRef, + OnInit, + Renderer2, + ViewChild +} from '@angular/core'; import {Location} from '@angular/common'; import {Router, ActivatedRoute} from '@angular/router'; import {AuthService, AuthWsState} from '@eg/core/auth.service'; @@ -7,15 +13,19 @@ import {OrgService} from '@eg/core/org.service'; import {OfflineService} from '@eg/staff/share/offline.service'; @Component({ + styleUrls: ['./login.component.css'], templateUrl : './login.component.html' }) export class StaffLoginComponent implements OnInit { + @ViewChild('password') + passwordInput: ElementRef; workstations: any[]; loginFailed: boolean; routeTo: string; pendingXactsDate: Date; passwordVisible: boolean; + ariaDescription: string = 'Your password is not visible.'; args = { username : '', @@ -124,6 +134,9 @@ export class StaffLoginComponent implements OnInit { togglePasswordVisibility() { this.passwordVisible = !this.passwordVisible; + if(this.passwordVisible) this.ariaDescription = "Your password is visible!"; + else this.ariaDescription = "Your password is not visible."; + this.passwordInput.nativeElement.focus(); } } 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 92d651bebd..7cb1d43f32 100755 --- a/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2 +++ b/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2 @@ -4023,3 +4023,10 @@ padding: 15px; .pointer { cursor: pointer; } +#loginModal #show_password { + border-top: 1px solid #888; + border-right: 1px solid #888; + border-bottom: 1px solid #888; + border-radius: 0px 4px 4px 0px; + background-color: whitesmoke; +} \ No newline at end of file diff --git a/Open-ILS/src/templates-bootstrap/opac/parts/base.tt2 b/Open-ILS/src/templates-bootstrap/opac/parts/base.tt2 index 0e8d2b1b79..b1edba6be0 100755 --- a/Open-ILS/src/templates-bootstrap/opac/parts/base.tt2 +++ b/Open-ILS/src/templates-bootstrap/opac/parts/base.tt2 @@ -70,7 +70,17 @@ 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')]; + if(input.type == 'password'){ + input.type = 'text'; + icon.setAttribute('class', 'fas fa-eye'); + btn.setAttribute('aria-checked', 'true'); + input.setAttribute('aria-description', 'Your password is visible!'); + }else { + input.type = 'password'; + icon.setAttribute('class', 'fas fa-eye-slash'); + btn.setAttribute('aria-checked', 'false'); + input.setAttribute('aria-description', 'Your password is not visible.'); + } input.focus(); }); let loginForm = document.getElementById('login_form'); 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 76594646b9..058ad86b6a 100755 --- a/Open-ILS/src/templates-bootstrap/opac/parts/login/form.tt2 +++ b/Open-ILS/src/templates-bootstrap/opac/parts/login/form.tt2 @@ -39,8 +39,11 @@
- - + +
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 5a958e3a26..fc746bb3c6 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 @@ -46,8 +46,13 @@
- - + + + +
diff --git a/Open-ILS/src/templates/opac/parts/js.tt2 b/Open-ILS/src/templates/opac/parts/js.tt2 index 9aae9d9cdd..33df990f3c 100644 --- a/Open-ILS/src/templates/opac/parts/js.tt2 +++ b/Open-ILS/src/templates/opac/parts/js.tt2 @@ -49,8 +49,14 @@ 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'; + if(checkbox.checked){ + input.type = 'text'; + input.setAttribute('aria-description', 'Your password is visible!'); + } + else { + input.type = 'password'; + input.setAttribute('aria-description', 'Your password is not visible.'); + } input.focus(); }); // If the form is submitted revert the password field to a password input diff --git a/Open-ILS/src/templates/opac/parts/login/form.tt2 b/Open-ILS/src/templates/opac/parts/login/form.tt2 index ddb9a764ad..62acac177b 100644 --- a/Open-ILS/src/templates/opac/parts/login/form.tt2 +++ b/Open-ILS/src/templates/opac/parts/login/form.tt2 @@ -57,7 +57,9 @@
- +
diff --git a/Open-ILS/src/templates/staff/css/style.css.tt2 b/Open-ILS/src/templates/staff/css/style.css.tt2 index 72bac37913..a92e80b918 100644 --- a/Open-ILS/src/templates/staff/css/style.css.tt2 +++ b/Open-ILS/src/templates/staff/css/style.css.tt2 @@ -194,7 +194,9 @@ table.list tr.selected td { /* deprecated? */ .currency-input { width: 8em; } - +#show_password { + border: none; +} /* barcode inputs are everywhere. Let's have a consistent style. */ .barcode { width: 16em !important; } diff --git a/Open-ILS/src/templates/staff/t_login.tt2 b/Open-ILS/src/templates/staff/t_login.tt2 index a4f77d9669..19edb73b39 100644 --- a/Open-ILS/src/templates/staff/t_login.tt2 +++ b/Open-ILS/src/templates/staff/t_login.tt2 @@ -26,8 +26,11 @@
- + placeholder="Password" autocapitalize="none" spellcheck="false" autocomplete="false" aria-description="Your password is not visible." + ng-model="args.password"/> + + +
@@ -76,7 +79,17 @@ 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')]; + if(input.type == 'password'){ + input.type = 'text'; + icon.setAttribute('class', 'glyphicon glyphicon-eye-open'); + btn.setAttribute('aria-checked', 'true'); + input.setAttribute('aria-description', 'Your password is visible!'); + }else { + input.type = 'password'; + icon.setAttribute('class', 'glyphicon glyphicon-eye-close'); + btn.setAttribute('aria-checked', 'false'); + input.setAttribute('aria-description', 'Your password is not visible.'); + } input.focus(); }); $('#login_form').submit(()=>{ -- 2.11.0