Move desktop into apps/desktop

apps/desktop/src/app/vault/add-edit-custom-fields.component.html

@@ -0,0 +1,118 @@
+<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>