bitwarden-desktop/src/app/vault/add-edit-custom-fields.component.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>