119 lines
4.1 KiB
HTML
119 lines
4.1 KiB
HTML
<div class="box">
|
|
<div class="box-header">
|
|
{{ "customFields" | i18n }}
|
|
</div>
|
|
<div class="box-content">
|
|
<div cdkDropList (cdkDropListDropped)="drop($event)" *ngIf="cipher.hasFields">
|
|
<div
|
|
class="box-content-row box-content-row-multi box-draggable-row"
|
|
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="bwi bwi-minus-circle bwi-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
|
|
/>
|
|
<!-- Password -->
|
|
<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 }}"
|
|
[disabled]="!cipher.viewPassword && !f.newField"
|
|
appInputVerbatim
|
|
/>
|
|
<!-- 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
|
|
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
|
|
[attr.aria-pressed]="f.showValue"
|
|
(click)="toggleFieldValue(f)"
|
|
>
|
|
<i
|
|
class="bwi bwi-lg"
|
|
aria-hidden="true"
|
|
[ngClass]="{ 'bwi-eye': !f.showValue, 'bwi-eye-slash': f.showValue }"
|
|
></i>
|
|
</button>
|
|
</div>
|
|
<div class="drag-handle" appA11yTitle="{{ 'dragToSort' | i18n }}" cdkDragHandle>
|
|
<i class="bwi bwi-hamburger" aria-hidden="true"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Add new custom field -->
|
|
<div class="box-content-row" appBoxRow>
|
|
<button type="button" appStopClick (click)="addField()">
|
|
<i class="bwi bwi-plus-circle bwi-fw bwi-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>
|