mirror of
https://github.com/bitwarden/browser
synced 2025-12-19 09:43:23 +00:00
more flex. toggle password on add/edit
This commit is contained in:
Kyle Spearrin
@@ -26,15 +26,24 @@
|
||||
<input id="loginUsername" type="text" name="Login.Username"
|
||||
[(ngModel)]="cipher.login.username">
|
||||
</div>
|
||||
<div class="box-content-row">
|
||||
<label for="loginPassword">{{'password' | i18n}}</label>
|
||||
<input id="loginPassword" type="text" name="Login.Password"
|
||||
[(ngModel)]="cipher.login.password">
|
||||
<div class="box-content-row box-content-row-flex">
|
||||
<div class="row-main">
|
||||
<label for="loginPassword">{{'password' | i18n}}</label>
|
||||
<input id="loginPassword" class="monospaced" type="{{showPassword ? 'text' : 'password'}}"
|
||||
name="Login.Password" [(ngModel)]="cipher.login.password">
|
||||
</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>
|
||||
<a class="row-btn" href="#" appStopClick appBlurClick title="{{'generatePassword' | i18n}}"
|
||||
(click)="generatePassword()">
|
||||
<i class="fa fa-lg fa-refresh"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="box-content-row" href="#" appStopClick (click)="generatePassword()">
|
||||
{{'generatePassword' | i18n}}
|
||||
<i class="fa fa-chevron-right icon-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Card -->
|
||||
<div *ngIf="cipher.type === cipherType.Card">
|
||||
@@ -203,7 +212,7 @@
|
||||
<a href="#" appStopClick (click)="removeField(f)" title="{{'remove' | i18n}}">
|
||||
<i class="fa fa-close fa-lg"></i>
|
||||
</a>
|
||||
<div>
|
||||
<div class="row-main">
|
||||
<label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label>
|
||||
<input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name"
|
||||
class="row-label" placeholder="{{'name' | i18n}}">
|
||||
@@ -212,9 +221,9 @@
|
||||
*ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}">
|
||||
<input id="fieldValue{{i}}" type="password" name="Field.Value{{i}}" [(ngModel)]="f.value"
|
||||
*ngIf="f.type === fieldType.Hidden" placeholder="{{'value' | i18n}}">
|
||||
<input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox"
|
||||
[(ngModel)]="f.value" *ngIf="f.type === fieldType.Boolean">
|
||||
</div>
|
||||
<input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox"
|
||||
[(ngModel)]="f.value" *ngIf="f.type === fieldType.Boolean">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content-row">
|
||||
|
||||
@@ -44,6 +44,7 @@ export class AddEditComponent implements OnChanges {
|
||||
editMode: boolean = false;
|
||||
cipher: CipherView;
|
||||
folders: FolderView[];
|
||||
showPassword: boolean = false;
|
||||
cipherType = CipherType;
|
||||
fieldType = FieldType;
|
||||
addFieldType: FieldType = FieldType.Text;
|
||||
@@ -182,4 +183,9 @@ export class AddEditComponent implements OnChanges {
|
||||
|
||||
this.onGeneratePassword.emit();
|
||||
}
|
||||
|
||||
togglePassword() {
|
||||
this.analytics.eventTrack.next({ action: 'Toggled Password on Edit' });
|
||||
this.showPassword = !this.showPassword;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,7 +11,12 @@
|
||||
</div>
|
||||
<!-- Login -->
|
||||
<div *ngIf="cipher.login">
|
||||
<div class="box-content-row" *ngIf="cipher.login.uri">
|
||||
<div class="box-content-row box-content-row-flex" *ngIf="cipher.login.uri">
|
||||
<div class="row-main">
|
||||
<span class="row-label" *ngIf="!cipher.login.isWebsite">{{'uri' | i18n}}</span>
|
||||
<span class="row-label" *ngIf="cipher.login.isWebsite">{{'website' | i18n}}</span>
|
||||
{{cipher.login.domainOrUri}}
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<a class="row-btn" href="#" appStopClick title="{{'launch' | i18n}}"
|
||||
*ngIf="cipher.login.canLaunch" (click)="launch()">
|
||||
@@ -22,21 +27,25 @@
|
||||
<i class="fa fa-lg fa-clipboard"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span class="row-label" *ngIf="!cipher.login.isWebsite">{{'uri' | i18n}}</span>
|
||||
<span class="row-label" *ngIf="cipher.login.isWebsite">{{'website' | i18n}}</span>
|
||||
{{cipher.login.domainOrUri}}
|
||||
</div>
|
||||
<div class="box-content-row" *ngIf="cipher.login.username">
|
||||
<div class="box-content-row box-content-row-flex" *ngIf="cipher.login.username">
|
||||
<div class="row-main">
|
||||
<span class="row-label">{{'username' | i18n}}</span>
|
||||
{{cipher.login.username}}
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}"
|
||||
(click)="copy(cipher.login.username, 'Username')">
|
||||
<i class="fa fa-lg fa-clipboard"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span class="row-label">{{'username' | i18n}}</span>
|
||||
{{cipher.login.username}}
|
||||
</div>
|
||||
<div class="box-content-row" *ngIf="cipher.login.password">
|
||||
<div class="box-content-row box-content-row-flex" *ngIf="cipher.login.password">
|
||||
<div class="row-main">
|
||||
<span class="row-label">{{'password' | i18n}}</span>
|
||||
<span [hidden]="showPassword" class="monospaced">{{cipher.login.maskedPassword}}</span>
|
||||
<span [hidden]="!showPassword" class="monospaced">{{cipher.login.password}}</span>
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<a class="row-btn" href="#" appStopClick title="{{'toggleVisibility' | i18n}}"
|
||||
(click)="togglePassword()">
|
||||
@@ -48,17 +57,12 @@
|
||||
<i class="fa fa-lg fa-clipboard"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span class="row-label">{{'password' | i18n}}</span>
|
||||
<span [hidden]="showPassword" class="monospaced">{{cipher.login.maskedPassword}}</span>
|
||||
<span [hidden]="!showPassword" class="monospaced">{{cipher.login.password}}</span>
|
||||
</div>
|
||||
<div class="box-content-row totp" [ngClass]="{'low': totpLow}"
|
||||
<div class="box-content-row box-content-row-flex totp" [ngClass]="{'low': totpLow}"
|
||||
*ngIf="cipher.login.totp && totpCode">
|
||||
<div class="action-buttons">
|
||||
<a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}"
|
||||
(click)="copy(totpCode, 'TOTP')">
|
||||
<i class="fa fa-lg fa-clipboard"></i>
|
||||
</a>
|
||||
<div class="row-main">
|
||||
<span class="row-label">{{'verificationCodeTotp' | i18n}}</span>
|
||||
<span class="totp-code">{{totpCodeFormatted}}</span>
|
||||
</div>
|
||||
<span class="totp-countdown">
|
||||
<span class="totp-sec">{{totpSec}}</span>
|
||||
@@ -70,8 +74,12 @@
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="row-label">{{'verificationCodeTotp' | i18n}}</span>
|
||||
<span class="totp-code">{{totpCodeFormatted}}</span>
|
||||
<div class="action-buttons">
|
||||
<a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}"
|
||||
(click)="copy(totpCode, 'TOTP')">
|
||||
<i class="fa fa-lg fa-clipboard"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card -->
|
||||
@@ -80,15 +88,17 @@
|
||||
<span class="row-label">{{'cardholderName' | i18n}}</span>
|
||||
{{cipher.card.cardholderName}}
|
||||
</div>
|
||||
<div class="box-content-row" *ngIf="cipher.card.number">
|
||||
<div class="box-content-row box-content-row-flex" *ngIf="cipher.card.number">
|
||||
<div class="row-main">
|
||||
<span class="row-label">{{'number' | i18n}}</span>
|
||||
{{cipher.card.number}}
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}"
|
||||
(click)="copy(cipher.card.number, 'Number')">
|
||||
<i class="fa fa-lg fa-clipboard"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span class="row-label">{{'number' | i18n}}</span>
|
||||
{{cipher.card.number}}
|
||||
</div>
|
||||
<div class="box-content-row" *ngIf="cipher.card.brand">
|
||||
<span class="row-label">{{'brand' | i18n}}</span>
|
||||
@@ -98,15 +108,17 @@
|
||||
<span class="row-label">{{'expiration' | i18n}}</span>
|
||||
{{cipher.card.expiration}}
|
||||
</div>
|
||||
<div class="box-content-row" *ngIf="cipher.card.code">
|
||||
<div class="box-content-row box-content-row-flex" *ngIf="cipher.card.code">
|
||||
<div class="row-main">
|
||||
<span class="row-label">{{'securityCode' | i18n}}</span>
|
||||
{{cipher.card.code}}
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}"
|
||||
(click)="copy(cipher.card.code, 'Security Code')">
|
||||
<i class="fa fa-lg fa-clipboard"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span class="row-label">{{'securityCode' | i18n}}</span>
|
||||
{{cipher.card.code}}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Identity -->
|
||||
@@ -172,7 +184,21 @@
|
||||
{{'customFields' | i18n}}
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="box-content-row" *ngFor="let field of cipher.fields">
|
||||
<div class="box-content-row box-content-row-flex" *ngFor="let field of cipher.fields">
|
||||
<div class="row-main">
|
||||
<span class="row-label">{{field.name}}</span>
|
||||
<div *ngIf="field.type === fieldType.Text">
|
||||
{{field.value || ' '}}
|
||||
</div>
|
||||
<div *ngIf="field.type === fieldType.Hidden">
|
||||
<span [hidden]="!field.showValue" class="monospaced">{{field.value}}</span>
|
||||
<span [hidden]="field.showValue" class="monospaced">{{field.maskedValue}}</span>
|
||||
</div>
|
||||
<div *ngIf="field.type === fieldType.Boolean">
|
||||
<i class="fa fa-check-square-o" *ngIf="field.value === 'true'"></i>
|
||||
<i class="fa fa-square-o" *ngIf="field.value !== 'true'"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<a class="row-btn" href="#" appStopClick title="{{'toggleVisibility' | i18n}}"
|
||||
*ngIf="field.type === fieldType.Hidden" (click)="toggleFieldValue(field)">
|
||||
@@ -185,18 +211,6 @@
|
||||
<i class="fa fa-lg fa-clipboard"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span class="row-label">{{field.name}}</span>
|
||||
<div *ngIf="field.type === fieldType.Text">
|
||||
{{field.value || ' '}}
|
||||
</div>
|
||||
<div *ngIf="field.type === fieldType.Hidden">
|
||||
<span [hidden]="!field.showValue" class="monospaced">{{field.value}}</span>
|
||||
<span [hidden]="field.showValue" class="monospaced">{{field.maskedValue}}</span>
|
||||
</div>
|
||||
<div *ngIf="field.type === fieldType.Boolean">
|
||||
<i class="fa fa-check-square-o" *ngIf="field.value === 'true'"></i>
|
||||
<i class="fa fa-square-o" *ngIf="field.value !== 'true'"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user