62 lines
3.9 KiB
HTML
62 lines
3.9 KiB
HTML
<div class="box">
|
|
<h2 class="box-header">
|
|
{{'customFields' | i18n}}
|
|
</h2>
|
|
<div class="box-content">
|
|
<!-- Current custom fields -->
|
|
<div cdkDropList (cdkDropListDropped)="drop($event)" *ngIf="cipher.hasFields">
|
|
<div class="box-content-row box-content-row-multi box-draggable-row" appBoxRow cdkDrag
|
|
*ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction"
|
|
[ngClass]="{'box-content-row-checkbox': f.type === fieldType.Boolean}">
|
|
<button type="button" appStopClick (click)="removeField(f)" appA11yTitle="{{'remove' | i18n}}">
|
|
<i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i>
|
|
</button>
|
|
<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" class="row-label"
|
|
placeholder="{{'name' | i18n}}" appInputVerbatim>
|
|
<!-- Text -->
|
|
<input id="fieldValue{{i}}" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value"
|
|
*ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}" appInputVerbatim>
|
|
<!-- Hidden -->
|
|
<input id="fieldValue{{i}}" type="{{f.showValue ? 'text' : 'password'}}" name="Field.Value{{i}}"
|
|
[(ngModel)]="f.value" class="monospaced" appInputVerbatim *ngIf="f.type === fieldType.Hidden"
|
|
placeholder="{{'value' | i18n}}" [disabled]="!cipher.viewPassword && !f.newField">
|
|
<!-- Linked -->
|
|
<select id="fieldValue{{i}}" name="Field.Value{{i}}" [(ngModel)]="f.linkedId"
|
|
*ngIf="f.type === fieldType.Linked && cipher.linkedFieldOptions != null">
|
|
<option *ngFor="let o of linkedFieldOptions" [ngValue]="o.value">{{o.name}}</option>
|
|
</select>
|
|
</div>
|
|
<!-- Boolean -->
|
|
<input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox" [(ngModel)]="f.value"
|
|
*ngIf="f.type === fieldType.Boolean" appTrueFalseValue trueValue="true" falseValue="false">
|
|
<div class="action-buttons" *ngIf="f.type === fieldType.Hidden && (cipher.viewPassword || f.newField)">
|
|
<button type="button" class="row-btn" appStopClick appBlurClick appA11yTitle="{{'toggleVisibility' | i18n}}"
|
|
(click)="toggleFieldValue(f)" [attr.aria-pressed]="f.showValue">
|
|
<i class="fa fa-lg" aria-hidden="true"
|
|
[ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
|
|
</button>
|
|
</div>
|
|
<div class="drag-handle" appA11yTitle="{{'dragToSort' | i18n}}" cdkDragHandle>
|
|
<i class="fa fa-bars" aria-hidden="true"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Add new custom field -->
|
|
<div class="box-content-row box-content-row-newmulti" appBoxRow>
|
|
<button type="button" appStopClick (click)="addField()">
|
|
<i class="fa fa-plus-circle fa-fw fa-lg" aria-hidden="true"></i> {{'newCustomField' | i18n}}
|
|
</button>
|
|
<label for="addFieldType" class="sr-only">{{'type' | i18n}}</label>
|
|
<select id="addFieldType" name="AddFieldType" [(ngModel)]="addFieldType" class="field-type">
|
|
<option *ngFor="let o of addFieldTypeOptions" [ngValue]="o.value">{{o.name}}</option>
|
|
<option *ngIf="cipher.linkedFieldOptions != null" [ngValue]="addFieldLinkedTypeOption.value">
|
|
{{addFieldLinkedTypeOption.name}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|