--- /dev/null
+#show_password {
+ border-left: 0px;
+ border-radius: 0px 4px 4px 0px;
+}
+
+#show_password span.material-icons {
+ font-size: 21px;
+}
<div class="row row-cols-auto">
<label class="form-label col-form-label fw-bold col-4 text-end" for="username" i18n>Username</label>
- <div class="col-8">
- <input
- type="text"
- class="form-control"
- id="username"
- name="username"
- required
- autocomplete="username"
- i18n-placeholder
- placeholder="Username"
- [(ngModel)]="args.username"/>
- </div>
+ <input
+ type="text"
+ class="form-control col-lg-8"
+ id="username"
+ name="username"
+ required
+ autocomplete="username"
+ i18n-placeholder
+ placeholder="Username"
+ [(ngModel)]="args.username"/>
</div>
- <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
+ <div class="row row-cols-auto">
+ <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]="passwordVisible ? 'text' : 'password'"
class="form-control"
id="password"
+ #password
name="password"
required
autocomplete="current-password"
i18n-placeholder
placeholder="Password"
spellcheck="false"
+ [attr.aria-description]="ariaDescription"
[(ngModel)]="args.password"/>
- <span id="show_password" class="input-group-text pointer" (click)="togglePasswordVisibility()">
+ <button id="show_password" class="input-group-text pointer"
+ type="button" role="switch" aria-label="password visibility" aria-checked="false"
+ (click)="togglePasswordVisibility()" >
<span class="material-icons">{{ passwordVisible ? 'visibility' : 'visibility_off' }}</span>
- </span>
+ </button>
</div>
</div>
<div class="row row-cols-auto mt-3" *ngIf="workstations && workstations.length">
<label class="form-label col-form-label col-4 text-end fw-bold" for="workstation" i18n>Workstation</label>
- <div class="col-8">
- <select
- class="form-control"
- id="workstation"
- name="workstation"
- required
- [(ngModel)]="args.workstation">
- <option *ngFor="let ws of workstations" [value]="ws.name">
- {{ws.name}}
- </option>
- </select>
- </div>
+ <select
+ class="form-control col-lg-8"
+ id="workstation"
+ name="workstation"
+ required
+ [(ngModel)]="args.workstation">
+ <option *ngFor="let ws of workstations" [value]="ws.name">
+ {{ws.name}}
+ </option>
+ </select>
</div>
<div class="row row-cols-auto mt-3">
-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';
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 : '',
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();
}
}
.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
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');
</div>
<div class="col-sm w-50">
<div class="input-group">
- <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>
+ <input class="form-control" id="password_field" name="password" type="password"
+ spellcheck="false" autocomplete="false" autocapitalize="none" aria-description="Your password is not visible."/>
+ <button id="show_password" class="input-group-text pointer" type="button" role="checkbox">
+ <i class="fas fa-eye-slash"></i>
+ </button>
</div>
</div>
</div>
</div>
<div class="col-sm w-50">
<div class="input-group">
- <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>
+ <input class="form-control" id="password_field" name="password" type="password"
+ spellcheck="false" autocomplete="false" autocapitalize="none" aria-description="Your password is not visible."/>
+ <span class="input-group-addon">
+ <button id="show_password" class="btn" type="button" role="switch" aria-label="password visibility"
+ aria-checked="false" ><i class="fas fa-eye-slash"></i>
+ </button>
+ </span>
</div>
</div>
</div>
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
<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" spellcheck="false"/>
+ <input id="password_field" name="password" type="password"
+ spellcheck="false" autocapitalize="false" autocomplete="false"
+ aria-description="Your password is not visible."/>
</div>
<div id="password_visibility" class="input_bg">
<input id="password_visibility_checkbox" type="checkbox" />
.currency-input {
width: 8em;
}
-
+#show_password {
+ border: none;
+}
/* barcode inputs are everywhere. Let's have a consistent style. */
.barcode { width: 16em !important; }
<div class="col-md-8">
<div class="input-group">
<input type="password" id="login-password" class="form-control"
- 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>
+ placeholder="Password" autocapitalize="none" spellcheck="false" autocomplete="false" aria-description="Your password is not visible."
+ ng-model="args.password"/>
+ <span class="input-group-addon">
+ <button id="show_password" type="button" role="switch" aria-label="password visibility" aria-checked="false" ><i class="glyphicon glyphicon-eye-close"></i></button>
+ </span>
</div>
</div>
</div>
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(()=>{
projects / evergreen-equinox.git / commitdiff