vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

more flex. toggle password on add/edit

This commit is contained in:
Kyle Spearrin 2018-01-29 17:11:31 -05:00
parent 40c5cfa10b
commit 28d35db38b
5 changed files with 99 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/app/vault/add-edit.component.html
View File

@ -26,15 +26,24 @@
<input id="loginUsername" type="text" name="Login.Username" <input id="loginUsername" type="text" name="Login.Username"
[(ngModel)]="cipher.login.username"> [(ngModel)]="cipher.login.username">
</div> </div>
<div class="box-content-row"> <div class="box-content-row box-content-row-flex">
<label for="loginPassword">{{'password' | i18n}}</label> <div class="row-main">
<input id="loginPassword" type="text" name="Login.Password" <label for="loginPassword">{{'password' | i18n}}</label>
[(ngModel)]="cipher.login.password"> <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> </div>
<a class="box-content-row" href="#" appStopClick (click)="generatePassword()">
{{'generatePassword' | i18n}}
<i class="fa fa-chevron-right icon-right"></i>
</a>
</div> </div>
<!-- Card --> <!-- Card -->
<div *ngIf="cipher.type === cipherType.Card"> <div *ngIf="cipher.type === cipherType.Card">
@ -203,7 +212,7 @@
<a href="#" appStopClick (click)="removeField(f)" title="{{'remove' | i18n}}"> <a href="#" appStopClick (click)="removeField(f)" title="{{'remove' | i18n}}">
<i class="fa fa-close fa-lg"></i> <i class="fa fa-close fa-lg"></i>
</a> </a>
<div> <div class="row-main">
<label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label> <label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label>
<input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name" <input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name"
class="row-label" placeholder="{{'name' | i18n}}"> class="row-label" placeholder="{{'name' | i18n}}">
@ -212,9 +221,9 @@
*ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}"> *ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}">
<input id="fieldValue{{i}}" type="password" name="Field.Value{{i}}" [(ngModel)]="f.value" <input id="fieldValue{{i}}" type="password" name="Field.Value{{i}}" [(ngModel)]="f.value"
*ngIf="f.type === fieldType.Hidden" placeholder="{{'value' | i18n}}"> *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> </div>
<input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox"
[(ngModel)]="f.value" *ngIf="f.type === fieldType.Boolean">
</div> </div>
</div> </div>
<div class="box-content-row"> <div class="box-content-row">

6
src/app/vault/add-edit.component.ts
View File

@ -44,6 +44,7 @@ export class AddEditComponent implements OnChanges {
editMode: boolean = false; editMode: boolean = false;
cipher: CipherView; cipher: CipherView;
folders: FolderView[]; folders: FolderView[];
showPassword: boolean = false;
cipherType = CipherType; cipherType = CipherType;
fieldType = FieldType; fieldType = FieldType;
addFieldType: FieldType = FieldType.Text; addFieldType: FieldType = FieldType.Text;
@ -182,4 +183,9 @@ export class AddEditComponent implements OnChanges {
this.onGeneratePassword.emit(); this.onGeneratePassword.emit();
} }
togglePassword() {
this.analytics.eventTrack.next({ action: 'Toggled Password on Edit' });
this.showPassword = !this.showPassword;
}
} }

90
src/app/vault/view.component.html
View File

@ -11,7 +11,12 @@
</div> </div>
<!-- Login --> <!-- Login -->
<div *ngIf="cipher.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"> <div class="action-buttons">
<a class="row-btn" href="#" appStopClick title="{{'launch' | i18n}}" <a class="row-btn" href="#" appStopClick title="{{'launch' | i18n}}"
*ngIf="cipher.login.canLaunch" (click)="launch()"> *ngIf="cipher.login.canLaunch" (click)="launch()">
@ -22,21 +27,25 @@
<i class="fa fa-lg fa-clipboard"></i> <i class="fa fa-lg fa-clipboard"></i>
</a> </a>
</div> </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>
<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"> <div class="action-buttons">
<a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}" <a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}"
(click)="copy(cipher.login.username, 'Username')"> (click)="copy(cipher.login.username, 'Username')">
<i class="fa fa-lg fa-clipboard"></i> <i class="fa fa-lg fa-clipboard"></i>
</a> </a>
</div> </div>
<span class="row-label">{{'username' | i18n}}</span>
{{cipher.login.username}}
</div> </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"> <div class="action-buttons">
<a class="row-btn" href="#" appStopClick title="{{'toggleVisibility' | i18n}}" <a class="row-btn" href="#" appStopClick title="{{'toggleVisibility' | i18n}}"
(click)="togglePassword()"> (click)="togglePassword()">
@ -48,17 +57,12 @@
<i class="fa fa-lg fa-clipboard"></i> <i class="fa fa-lg fa-clipboard"></i>
</a> </a>
</div> </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>
<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"> *ngIf="cipher.login.totp && totpCode">
<div class="action-buttons"> <div class="row-main">
<a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}" <span class="row-label">{{'verificationCodeTotp' | i18n}}</span>
(click)="copy(totpCode, 'TOTP')"> <span class="totp-code">{{totpCodeFormatted}}</span>
<i class="fa fa-lg fa-clipboard"></i>
</a>
</div> </div>
<span class="totp-countdown"> <span class="totp-countdown">
<span class="totp-sec">{{totpSec}}</span> <span class="totp-sec">{{totpSec}}</span>
@ -70,8 +74,12 @@
</g> </g>
</svg> </svg>
</span> </span>
<span class="row-label">{{'verificationCodeTotp' | i18n}}</span> <div class="action-buttons">
<span class="totp-code">{{totpCodeFormatted}}</span> <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>
</div> </div>
<!-- Card --> <!-- Card -->
@ -80,15 +88,17 @@
<span class="row-label">{{'cardholderName' | i18n}}</span> <span class="row-label">{{'cardholderName' | i18n}}</span>
{{cipher.card.cardholderName}} {{cipher.card.cardholderName}}
</div> </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"> <div class="action-buttons">
<a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}" <a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}"
(click)="copy(cipher.card.number, 'Number')"> (click)="copy(cipher.card.number, 'Number')">
<i class="fa fa-lg fa-clipboard"></i> <i class="fa fa-lg fa-clipboard"></i>
</a> </a>
</div> </div>
<span class="row-label">{{'number' | i18n}}</span>
{{cipher.card.number}}
</div> </div>
<div class="box-content-row" *ngIf="cipher.card.brand"> <div class="box-content-row" *ngIf="cipher.card.brand">
<span class="row-label">{{'brand' | i18n}}</span> <span class="row-label">{{'brand' | i18n}}</span>
@ -98,15 +108,17 @@
<span class="row-label">{{'expiration' | i18n}}</span> <span class="row-label">{{'expiration' | i18n}}</span>
{{cipher.card.expiration}} {{cipher.card.expiration}}
</div> </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"> <div class="action-buttons">
<a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}" <a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}"
(click)="copy(cipher.card.code, 'Security Code')"> (click)="copy(cipher.card.code, 'Security Code')">
<i class="fa fa-lg fa-clipboard"></i> <i class="fa fa-lg fa-clipboard"></i>
</a> </a>
</div> </div>
<span class="row-label">{{'securityCode' | i18n}}</span>
{{cipher.card.code}}
</div> </div>
</div> </div>
<!-- Identity --> <!-- Identity -->
@ -172,7 +184,21 @@
{{'customFields' | i18n}} {{'customFields' | i18n}}
</div> </div>
<div class="box-content"> <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 || '&nbsp;'}}
</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"> <div class="action-buttons">
<a class="row-btn" href="#" appStopClick title="{{'toggleVisibility' | i18n}}" <a class="row-btn" href="#" appStopClick title="{{'toggleVisibility' | i18n}}"
*ngIf="field.type === fieldType.Hidden" (click)="toggleFieldValue(field)"> *ngIf="field.type === fieldType.Hidden" (click)="toggleFieldValue(field)">
@ -185,18 +211,6 @@
<i class="fa fa-lg fa-clipboard"></i> <i class="fa fa-lg fa-clipboard"></i>
</a> </a>
</div> </div>
<span class="row-label">{{field.name}}</span>
<div *ngIf="field.type === fieldType.Text">
{{field.value || '&nbsp;'}}
</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> </div>
</div> </div>

45
src/scss/box.scss
View File

@ -15,10 +15,10 @@
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
.box-content-row { .box-content-row {
display: block;
padding: 10px 15px; padding: 10px 15px;
position: relative; position: relative;
z-index: 1; z-index: 1;
display: block;
color: $text-color; color: $text-color;
overflow-wrap: break-word; overflow-wrap: break-word;
@ -64,21 +64,6 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
&.box-content-row-cf {
display: flex;
align-items: center;
width: 100%;
> a {
padding: 8px 10px 8px 5px;
color: $brand-danger;
}
> div {
width: 100%;
}
}
.row-label, label { .row-label, label {
font-size: $font-size-small; font-size: $font-size-small;
color: $text-muted; color: $text-muted;
@ -87,10 +72,29 @@
margin-bottom: 5px; margin-bottom: 5px;
} }
&.box-content-row-checkbox, &.box-content-row-input, &.box-content-row-slider { &.box-content-row-flex, &.box-content-row-checkbox, &.box-content-row-input,
&.box-content-row-slider, &.box-content-row-cf {
display: flex; display: flex;
align-items: center; align-items: center;
}
&.box-content-row-flex {
.row-main {
flex-grow: 1;
}
}
&.box-content-row-cf {
width: 100%;
> a {
padding: 8px 10px 8px 5px;
color: $brand-danger;
margin: 0;
}
}
&.box-content-row-checkbox, &.box-content-row-input, &.box-content-row-slider {
label, .row-label { label, .row-label {
font-size: $font-size-base; font-size: $font-size-base;
color: $text-color; color: $text-color;
@ -147,14 +151,7 @@
} }
} }
input[type="checkbox"] {
float: right;
display: inline-block;
}
.action-buttons { .action-buttons {
float: right;
.row-btn { .row-btn {
float: left; float: left;
cursor: pointer; cursor: pointer;

1
src/scss/misc.scss
View File

@ -33,7 +33,6 @@
margin: 3px 3px 0 0; margin: 3px 3px 0 0;
display: block; display: block;
user-select: none; user-select: none;
float: right;
.totp-sec { .totp-sec {
font-size: 0.85em; font-size: 0.85em;