Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-07 09:31:31 +01:00
Code Issues Projects Releases Wiki Activity

toggle password visibility on login/register

Browse Source
This commit is contained in:
Kyle Spearrin 2018-02-24 13:45:41 -05:00
parent ccfc7b3eb1
commit 40e135a297
6 changed files with 61 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/accounts/environment.component.html
View File

@ -1,5 +1,5 @@
<div class="modal fade">
<div class="modal-dialog modal-sm">
<div class="modal-dialog">
<form class="modal-content" (ngSubmit)="submit()">
<div class="modal-body">
<div class="box">

15
src/app/accounts/login.component.html
View File

@ -9,10 +9,19 @@
<input id="email" type="text" name="Email" [(ngModel)]="email" required
[appAutofocus]="email === ''">
</div>
<div class="box-content-row" appBoxRow>
<div class="box-content-row box-content-row-flex" appBoxRow>
<div class="row-main">
<label for="masterPassword">{{'masterPass' | i18n}}</label>
<input id="masterPassword" type="password" name="MasterPassword" [(ngModel)]="masterPassword"
required [appAutofocus]="email !== ''">
<input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
class="monospaced" [(ngModel)]="masterPassword" required [appAutofocus]="email !== ''">
</div>
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appBlurClick
title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
<i class="fa fa-lg"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</a>
</div>
</div>
</div>
</div>

7
src/app/accounts/login.component.ts
View File

@ -29,6 +29,7 @@ export class LoginComponent {
email: string = '';
masterPassword: string = '';
showPassword: boolean = false;
formPromise: Promise<AuthResult>;
constructor(private authService: AuthService, private router: Router, private analytics: Angulartics2,
@ -76,4 +77,10 @@ export class LoginComponent {
modal.close();
});
}
togglePassword() {
this.analytics.eventTrack.next({ action: 'Toggled Master Password on Login' });
this.showPassword = !this.showPassword;
document.getElementById('masterPassword').focus();
}
}

33
src/app/accounts/register.component.html
View File

@ -8,10 +8,19 @@
<input id="email" type="text" name="Email" [(ngModel)]="email" required
[appAutofocus]="email === ''">
</div>
<div class="box-content-row" appBoxRow>
<div class="box-content-row box-content-row-flex" appBoxRow>
<div class="row-main">
<label for="masterPassword">{{'masterPass' | i18n}}</label>
<input id="masterPassword" type="password" name="MasterPassword" [(ngModel)]="masterPassword"
required [appAutofocus]="email !== ''">
<input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
class="monospaced" [(ngModel)]="masterPassword" required [appAutofocus]="email !== ''">
</div>
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appBlurClick
title="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
<i class="fa fa-lg"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</a>
</div>
</div>
</div>
<div class="box-footer">
@ -20,10 +29,20 @@
</div>
<div class="box last">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="master-password-retype">{{'reTypeMasterPass' | i18n}}</label>
<input id="master-password-retype" type="password" name="MasterPasswordRetype"
[(ngModel)]="confirmMasterPassword" required>
<div class="box-content-row box-content-row-flex" appBoxRow>
<div class="row-main">
<label for="masterPasswordRetype">{{'reTypeMasterPass' | i18n}}</label>
<input id="masterPasswordRetype" type="{{showPassword ? 'text' : 'password'}}"
name="MasterPasswordRetype" class="monospaced" [(ngModel)]="confirmMasterPassword"
required>
</div>
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appBlurClick
title="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)">
<i class="fa fa-lg"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</a>
</div>
</div>
<div class="box-content-row" appBoxRow>
<label for="hint">{{'masterPassHint' | i18n}}</label>

7
src/app/accounts/register.component.ts
View File

@ -22,6 +22,7 @@ export class RegisterComponent {
masterPassword: string = '';
confirmMasterPassword: string = '';
hint: string = '';
showPassword: boolean = false;
formPromise: Promise<any>;
constructor(private authService: AuthService, private router: Router, private analytics: Angulartics2,
@ -72,4 +73,10 @@ export class RegisterComponent {
const request = new RegisterRequest(this.email, hashedPassword, this.hint, encKey.encryptedString);
await this.apiService.postRegister(request);
}
togglePassword(confirmField: boolean) {
this.analytics.eventTrack.next({ action: 'Toggled Master Password on Register' });
this.showPassword = !this.showPassword;
document.getElementById(confirmField ? 'masterPasswordRetype' : 'masterPassword').focus();
}
}

6
src/scss/pages.scss
View File

@ -110,3 +110,9 @@
}
}
}
#register-page {
.content {
width: 400px;
}
}