From 582ddc041bc9d2cff0723187a161f66e5f0991fd Mon Sep 17 00:00:00 2001
From: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Date: Tue, 21 Sep 2021 10:48:36 +1000
Subject: [PATCH] Move custom fields to separate components (#1192)

* Move add-edit custom fields to own component

* Update jslib

* Fix import

* Update jslib
---
 jslib                                         |  2 +-
 src/app/oss.module.ts                         |  2 +
 .../add-edit-custom-fields.component.html     | 81 +++++++++++++++++++
 .../vault/add-edit-custom-fields.component.ts | 24 ++++++
 src/app/vault/add-edit.component.html         | 81 +------------------
 5 files changed, 110 insertions(+), 80 deletions(-)
 create mode 100644 src/app/vault/add-edit-custom-fields.component.html
 create mode 100644 src/app/vault/add-edit-custom-fields.component.ts

diff --git a/jslib b/jslib
index 83548a6753..b7429b0c0c 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit 83548a6753a974c57cb373b529a4da3ea5c3b5c0
+Subproject commit b7429b0c0cdca8783fd9fa304918ee91f23c6f76
diff --git a/src/app/oss.module.ts b/src/app/oss.module.ts
index 3ea40c4e4a..01315acff2 100644
--- a/src/app/oss.module.ts
+++ b/src/app/oss.module.ts
@@ -157,6 +157,7 @@ import { ToolsComponent } from './tools/tools.component';
 import { UnsecuredWebsitesReportComponent } from './tools/unsecured-websites-report.component';
 import { WeakPasswordsReportComponent } from './tools/weak-passwords-report.component';
 
+import { AddEditCustomFieldsComponent } from './vault/add-edit-custom-fields.component';
 import { AddEditComponent } from './vault/add-edit.component';
 import { AttachmentsComponent } from './vault/attachments.component';
 import { BulkActionsComponent } from './vault/bulk-actions.component';
@@ -456,6 +457,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         SendOptionsPolicyComponent,
         ResetPasswordPolicyComponent,
         VaultTimeoutInputComponent,
+        AddEditCustomFieldsComponent,
     ],
     exports: [
         A11yTitleDirective,
diff --git a/src/app/vault/add-edit-custom-fields.component.html b/src/app/vault/add-edit-custom-fields.component.html
new file mode 100644
index 0000000000..f103c6e5f3
--- /dev/null
+++ b/src/app/vault/add-edit-custom-fields.component.html
@@ -0,0 +1,81 @@
+<ng-container>
+    <h3 class="mt-4">{{'customFields' | i18n}}</h3>
+    <div cdkDropList (cdkDropListDropped)="drop($event)" *ngIf="cipher.hasFields">
+        <div class="row" cdkDrag *ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction">
+            <div class="col-5 form-group">
+                <div class="d-flex">
+                    <label for="fieldName{{i}}">{{'name' | i18n}}</label>
+                    <a class="ml-auto" href="https://help.bitwarden.com/article/custom-fields/"
+                        target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}">
+                        <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+                    </a>
+                </div>
+                <input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name"
+                    class="form-control" appInputVerbatim [disabled]="cipher.isDeleted || viewOnly">
+            </div>
+            <div class="col-7 form-group">
+                <label for="fieldValue{{i}}">{{'value' | i18n}}</label>
+                <div class="d-flex align-items-center">
+                    <div class="input-group" *ngIf="f.type === fieldType.Text">
+                        <input id="fieldValue{{i}}" class="form-control" type="text" name="Field.Value{{i}}"
+                            [(ngModel)]="f.value" appInputVerbatim
+                            [disabled]="cipher.isDeleted || viewOnly">
+                        <div class="input-group-append">
+                            <button type="button" class="btn btn-outline-secondary"
+                                appA11yTitle="{{'copyValue' | i18n}}"
+                                (click)="copy(f.value, 'value', 'Field')">
+                                <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="input-group" *ngIf="f.type === fieldType.Hidden">
+                        <input id="fieldValue{{i}}" type="{{f.showValue ? 'text' : 'password'}}"
+                            name="Field.Value{{i}}" [(ngModel)]="f.value"
+                            class="form-control text-monospace" appInputVerbatim autocomplete="new-password"
+                            [disabled]="cipher.isDeleted || viewOnly || (!cipher.viewPassword && !f.newField)">
+                        <div class="input-group-append">
+                            <button type="button" class="btn btn-outline-secondary"
+                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)"
+                                [disabled]="!cipher.viewPassword && !f.newField">
+                                <i class="fa fa-lg" aria-hidden="true"
+                                    [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}">
+                                </i>
+                            </button>
+                            <button type="button" class="btn btn-outline-secondary"
+                                appA11yTitle="{{'copyValue' | i18n}}"
+                                (click)="copy(f.value, 'value', f.type === fieldType.Hidden ? 'H_Field' : 'Field')"
+                                [disabled]="!cipher.viewPassword && !f.newField">
+                                <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="flex-fill">
+                        <input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox"
+                            [(ngModel)]="f.value" *ngIf="f.type === fieldType.Boolean" appTrueFalseValue
+                            trueValue="true" falseValue="false" [disabled]="cipher.isDeleted || viewOnly">
+                    </div>
+                    <button type="button" class="btn btn-link text-danger ml-2" (click)="removeField(f)"
+                        appA11yTitle="{{'remove' | i18n}}" *ngIf="!cipher.isDeleted && !viewOnly">
+                        <i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i>
+                    </button>
+                    <button type="button" class="btn btn-link text-muted cursor-move"
+                        appA11yTitle="{{'dragToSort' | i18n}}" *ngIf="!cipher.isDeleted && !viewOnly">
+                        <i class="fa fa-bars fa-lg" aria-hidden="true"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <a href="#" appStopClick (click)="addField()" class="d-inline-block mb-2"
+        *ngIf="!cipher.isDeleted && !viewOnly">
+        <i class="fa fa-plus-circle fa-fw" aria-hidden="true"></i> {{'newCustomField' | i18n}}
+    </a>
+    <div class="row" *ngIf="!cipher.isDeleted && !viewOnly">
+        <div class="col-5">
+            <label for="addFieldType" class="sr-only">{{'type' | i18n}}</label>
+            <select id="addFieldType" class="form-control" name="AddFieldType" [(ngModel)]="addFieldType">
+                <option *ngFor="let o of addFieldTypeOptions" [ngValue]="o.value">{{o.name}}</option>
+            </select>
+        </div>
+    </div>
+</ng-container>
diff --git a/src/app/vault/add-edit-custom-fields.component.ts b/src/app/vault/add-edit-custom-fields.component.ts
new file mode 100644
index 0000000000..4dd9d9444d
--- /dev/null
+++ b/src/app/vault/add-edit-custom-fields.component.ts
@@ -0,0 +1,24 @@
+import {
+    Component,
+    Input,
+} from '@angular/core';
+
+import {
+    AddEditCustomFieldsComponent as BaseAddEditCustomFieldsComponent
+} from 'jslib-angular/components/add-edit-custom-fields.component';
+
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { EventService } from 'jslib-common/abstractions/event.service';
+
+@Component({
+    selector: 'app-vault-add-edit-custom-fields',
+    templateUrl: 'add-edit-custom-fields.component.html',
+})
+export class AddEditCustomFieldsComponent extends BaseAddEditCustomFieldsComponent {
+    @Input() viewOnly: boolean;
+    @Input() copy: (value: string, typeI18nKey: string, aType: string) => void;
+
+    constructor(i18nService: I18nService, eventService: EventService) {
+        super(i18nService, eventService);
+    }
+}
diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html
index 5a171700d2..160c714865 100644
--- a/src/app/vault/add-edit.component.html
+++ b/src/app/vault/add-edit.component.html
@@ -388,85 +388,8 @@
                     <textarea id="notes" name="Notes" rows="6" [(ngModel)]="cipher.notes"
                         [disabled]="cipher.isDeleted || viewOnly" class="form-control"></textarea>
                 </div>
-                <h3 class="mt-4">{{'customFields' | i18n}}</h3>
-                <div cdkDropList (cdkDropListDropped)="drop($event)" *ngIf="cipher.hasFields">
-                    <div class="row" cdkDrag *ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction">
-                        <div class="col-5 form-group">
-                            <div class="d-flex">
-                                <label for="fieldName{{i}}">{{'name' | i18n}}</label>
-                                <a class="ml-auto" href="https://help.bitwarden.com/article/custom-fields/"
-                                    target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}">
-                                    <i class="fa fa-question-circle-o" aria-hidden="true"></i>
-                                </a>
-                            </div>
-                            <input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name"
-                                class="form-control" appInputVerbatim [disabled]="cipher.isDeleted || viewOnly">
-                        </div>
-                        <div class="col-7 form-group">
-                            <label for="fieldValue{{i}}">{{'value' | i18n}}</label>
-                            <div class="d-flex align-items-center">
-                                <div class="input-group" *ngIf="f.type === fieldType.Text">
-                                    <input id="fieldValue{{i}}" class="form-control" type="text" name="Field.Value{{i}}"
-                                        [(ngModel)]="f.value" appInputVerbatim
-                                        [disabled]="cipher.isDeleted || viewOnly">
-                                    <div class="input-group-append">
-                                        <button type="button" class="btn btn-outline-secondary"
-                                            appA11yTitle="{{'copyValue' | i18n}}"
-                                            (click)="copy(f.value, 'value', 'Field')">
-                                            <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="input-group" *ngIf="f.type === fieldType.Hidden">
-                                    <input id="fieldValue{{i}}" type="{{f.showValue ? 'text' : 'password'}}"
-                                        name="Field.Value{{i}}" [(ngModel)]="f.value"
-                                        class="form-control text-monospace" appInputVerbatim autocomplete="new-password"
-                                        [disabled]="cipher.isDeleted || viewOnly || (!cipher.viewPassword && !f.newField)">
-                                    <div class="input-group-append">
-                                        <button type="button" class="btn btn-outline-secondary"
-                                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)"
-                                            [disabled]="!cipher.viewPassword && !f.newField">
-                                            <i class="fa fa-lg" aria-hidden="true"
-                                                [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}">
-                                            </i>
-                                        </button>
-                                        <button type="button" class="btn btn-outline-secondary"
-                                            appA11yTitle="{{'copyValue' | i18n}}"
-                                            (click)="copy(f.value, 'value', f.type === fieldType.Hidden ? 'H_Field' : 'Field')"
-                                            [disabled]="!cipher.viewPassword && !f.newField">
-                                            <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="flex-fill">
-                                    <input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox"
-                                        [(ngModel)]="f.value" *ngIf="f.type === fieldType.Boolean" appTrueFalseValue
-                                        trueValue="true" falseValue="false" [disabled]="cipher.isDeleted || viewOnly">
-                                </div>
-                                <button type="button" class="btn btn-link text-danger ml-2" (click)="removeField(f)"
-                                    appA11yTitle="{{'remove' | i18n}}" *ngIf="!cipher.isDeleted && !viewOnly">
-                                    <i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i>
-                                </button>
-                                <button type="button" class="btn btn-link text-muted cursor-move"
-                                    appA11yTitle="{{'dragToSort' | i18n}}" *ngIf="!cipher.isDeleted && !viewOnly">
-                                    <i class="fa fa-bars fa-lg" aria-hidden="true"></i>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <a href="#" appStopClick (click)="addField()" class="d-inline-block mb-2"
-                    *ngIf="!cipher.isDeleted && !viewOnly">
-                    <i class="fa fa-plus-circle fa-fw" aria-hidden="true"></i> {{'newCustomField' | i18n}}
-                </a>
-                <div class="row" *ngIf="!cipher.isDeleted && !viewOnly">
-                    <div class="col-5">
-                        <label for="addFieldType" class="sr-only">{{'type' | i18n}}</label>
-                        <select id="addFieldType" class="form-control" name="AddFieldType" [(ngModel)]="addFieldType">
-                            <option *ngFor="let o of addFieldTypeOptions" [ngValue]="o.value">{{o.name}}</option>
-                        </select>
-                    </div>
-                </div>
+                <app-vault-add-edit-custom-fields [cipher]="cipher" [viewOnly]="viewOnly" [copy]="copy.bind(this)">
+                </app-vault-add-edit-custom-fields>
                 <ng-container *ngIf="allowOwnershipAssignment()">
                     <h3 class="mt-4">{{'ownership' | i18n}}</h3>
                     <div class="row">