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

toggle cs hidden type visibility on add/edit

Browse Source
This commit is contained in:
Kyle Spearrin 2018-01-29 17:24:48 -05:00
parent 28d35db38b
commit 6d23338aa4
3 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -212,18 +212,26 @@
<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 class="row-main">
<label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label> <label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label>
<label for="fieldValue{{i}}" class="sr-only">{{'value' | i18n}}</label>
<div class="row-main">
<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}}">
<label for="fieldValue{{i}}" class="sr-only">{{'value' | i18n}}</label>
<input id="fieldValue{{i}}" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value" <input id="fieldValue{{i}}" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value"
*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="{{f.showValue ? 'text' : 'password'}}"
name="Field.Value{{i}}" [(ngModel)]="f.value" class="monospaced"
*ngIf="f.type === fieldType.Hidden" placeholder="{{'value' | i18n}}"> *ngIf="f.type === fieldType.Hidden" placeholder="{{'value' | i18n}}">
</div> </div>
<input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox" <input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox"
[(ngModel)]="f.value" *ngIf="f.type === fieldType.Boolean"> [(ngModel)]="f.value" *ngIf="f.type === fieldType.Boolean">
<div class="action-buttons" *ngIf="f.type === fieldType.Hidden">
<a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}"
(click)="toggleFieldValue(f)">
<i class="fa fa-lg"
[ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
</a>
</div>
</div> </div>
</div> </div>
<div class="box-content-row"> <div class="box-content-row">

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

@ -188,4 +188,9 @@ export class AddEditComponent implements OnChanges {
this.analytics.eventTrack.next({ action: 'Toggled Password on Edit' }); this.analytics.eventTrack.next({ action: 'Toggled Password on Edit' });
this.showPassword = !this.showPassword; this.showPassword = !this.showPassword;
} }
toggleFieldValue(field: FieldView) {
const f = (field as any);
f.showValue = !f.showValue;
}
} }

14
src/scss/box.scss
View File

@ -72,21 +72,23 @@
margin-bottom: 5px; margin-bottom: 5px;
} }
.row-main {
flex-grow: 1;
}
&.box-content-row-flex, &.box-content-row-checkbox, &.box-content-row-input, &.box-content-row-flex, &.box-content-row-checkbox, &.box-content-row-input,
&.box-content-row-slider, &.box-content-row-cf { &.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 { &.box-content-row-cf {
width: 100%; width: 100%;
input:not([type="checkbox"]) {
width: 100%;
}
> a { > a {
padding: 8px 10px 8px 5px; padding: 8px 10px 8px 5px;
color: $brand-danger; color: $brand-danger;