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

* Move custom fields to own component

* Update jslib

* Fix import statements

* Fix linting
---
 src/app/app.module.ts                         |  4 ++
 .../add-edit-custom-fields.component.html     | 52 ++++++++++++++++++
 .../vault/add-edit-custom-fields.component.ts | 18 +++++++
 src/app/vault/add-edit.component.html         | 53 +------------------
 .../vault/view-custom-fields.component.html   | 38 +++++++++++++
 src/app/vault/view-custom-fields.component.ts | 19 +++++++
 src/app/vault/view.component.html             | 41 ++------------
 7 files changed, 135 insertions(+), 90 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
 create mode 100644 src/app/vault/view-custom-fields.component.html
 create mode 100644 src/app/vault/view-custom-fields.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1895d07f64..641333f183 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -49,6 +49,7 @@ import { ColorPasswordPipe } from 'jslib-angular/pipes/color-password.pipe';
 import { I18nPipe } from 'jslib-angular/pipes/i18n.pipe';
 import { SearchCiphersPipe } from 'jslib-angular/pipes/search-ciphers.pipe';
 
+import { AddEditCustomFieldsComponent } from './vault/add-edit-custom-fields.component';
 import { AddEditComponent } from './vault/add-edit.component';
 import { AttachmentsComponent } from './vault/attachments.component';
 import { CiphersComponent } from './vault/ciphers.component';
@@ -61,6 +62,7 @@ import { PasswordGeneratorComponent } from './vault/password-generator.component
 import { PasswordHistoryComponent } from './vault/password-history.component';
 import { ShareComponent } from './vault/share.component';
 import { VaultComponent } from './vault/vault.component';
+import { ViewCustomFieldsComponent } from './vault/view-custom-fields.component';
 import { ViewComponent } from './vault/view.component';
 
 import { AddEditComponent as SendAddEditComponent } from './send/add-edit.component';
@@ -226,6 +228,8 @@ registerLocaleData(localeZhTw, 'zh-TW');
         PasswordRepromptComponent,
         SetPinComponent,
         VaultTimeoutInputComponent,
+        AddEditCustomFieldsComponent,
+        ViewCustomFieldsComponent,
     ],
     providers: [DatePipe],
     bootstrap: [AppComponent],
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..fc519f4794
--- /dev/null
+++ b/src/app/vault/add-edit-custom-fields.component.html
@@ -0,0 +1,52 @@
+<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}">
+                <a href="#" appStopClick (click)="removeField(f)" appA11yTitle="{{'remove' | i18n}}"
+                    role="button">
+                    <i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i>
+                </a>
+                <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}}">
+                    <input id="fieldValue{{i}}" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value"
+                        *ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}">
+                    <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">
+                </div>
+                <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)">
+                    <a class="row-btn" href="#" appStopClick appBlurClick role="button"
+                        appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)">
+                        <i class="fa fa-lg" aria-hidden="true"
+                            [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
+                    </a>
+                </div>
+                <div class="drag-handle" appA11yTitle="{{'dragToSort' | i18n}}" cdkDragHandle>
+                    <i class="fa fa-bars" aria-hidden="true"></i>
+                </div>
+            </div>
+        </div>
+        <div class="box-content-row" appBoxRow>
+            <a href="#" appStopClick (click)="addField()" role="button">
+                <i class="fa fa-plus-circle fa-fw fa-lg" aria-hidden="true"></i> {{'newCustomField' | i18n}}
+            </a>
+            <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>
+            </select>
+        </div>
+    </div>
+</div>
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..ff0d983476
--- /dev/null
+++ b/src/app/vault/add-edit-custom-fields.component.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+import {
+    AddEditCustomFieldsComponent as BaseAddEditCustomFieldsComponent
+} from 'jslib-angular/components/add-edit-custom-fields.component';
+
+import { EventService } from 'jslib-common/abstractions/event.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+
+@Component({
+    selector: 'app-vault-add-edit-custom-fields',
+    templateUrl: 'add-edit-custom-fields.component.html',
+})
+export class AddEditCustomFieldsComponent extends BaseAddEditCustomFieldsComponent {
+    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 cd026986e7..d7f4ecec45 100644
--- a/src/app/vault/add-edit.component.html
+++ b/src/app/vault/add-edit.component.html
@@ -281,58 +281,7 @@
                     </div>
                 </div>
             </div>
-            <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}">
-                            <a href="#" appStopClick (click)="removeField(f)" appA11yTitle="{{'remove' | i18n}}"
-                                role="button">
-                                <i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i>
-                            </a>
-                            <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}}">
-                                <input id="fieldValue{{i}}" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value"
-                                    *ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}">
-                                <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">
-                            </div>
-                            <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)">
-                                <a class="row-btn" href="#" appStopClick appBlurClick role="button"
-                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)">
-                                    <i class="fa fa-lg" aria-hidden="true"
-                                        [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
-                                </a>
-                            </div>
-                            <div class="drag-handle" appA11yTitle="{{'dragToSort' | i18n}}" cdkDragHandle>
-                                <i class="fa fa-bars" aria-hidden="true"></i>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="box-content-row" appBoxRow>
-                        <a href="#" appStopClick (click)="addField()" role="button">
-                            <i class="fa fa-plus-circle fa-fw fa-lg" aria-hidden="true"></i> {{'newCustomField' | i18n}}
-                        </a>
-                        <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>
-                        </select>
-                    </div>
-                </div>
-            </div>
+            <app-vault-add-edit-custom-fields [cipher]="cipher" [editMode]="editMode"></app-vault-add-edit-custom-fields>
             <div class="box" *ngIf="allowOwnershipOptions()">
                 <div class="box-header">
                     {{'ownership' | i18n}}
diff --git a/src/app/vault/view-custom-fields.component.html b/src/app/vault/view-custom-fields.component.html
new file mode 100644
index 0000000000..0649434305
--- /dev/null
+++ b/src/app/vault/view-custom-fields.component.html
@@ -0,0 +1,38 @@
+<div class="box" >
+    <div class="box-header">
+        {{'customFields' | i18n}}
+    </div>
+    <div class="box-content">
+        <div class="box-content-row box-content-row-flex" *ngFor="let field of cipher.fields">
+            <div class="row-main">
+                <span class="row-label">{{field.name}}</span>
+                <div *ngIf="field.type === fieldType.Text">
+                    {{field.value || '&nbsp;'}}
+                </div>
+                <div *ngIf="field.type === fieldType.Hidden">
+                    <span *ngIf="field.showValue" class="monospaced show-whitespace">{{field.value}}</span>
+                    <span *ngIf="!field.showValue" class="monospaced">{{field.maskedValue}}</span>
+                </div>
+                <div *ngIf="field.type === fieldType.Boolean">
+                    <i class="fa fa-check-square-o" *ngIf="field.value === 'true'" aria-hidden="true"></i>
+                    <i class="fa fa-square-o" *ngIf="field.value !== 'true'" aria-hidden="true"></i>
+                    <span class="sr-only">{{field.value}}</span>
+                </div>
+            </div>
+            <div class="action-buttons">
+                <a class="row-btn" href="#" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
+                    *ngIf="field.type === fieldType.Hidden && cipher.viewPassword"
+                    (click)="toggleFieldValue(field)" role="button">
+                    <i class="fa fa-lg" aria-hidden="true"
+                        [ngClass]="{'fa-eye': !field.showValue, 'fa-eye-slash': field.showValue}"></i>
+                </a>
+                <a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyValue' | i18n}}"
+                    *ngIf="field.value && field.type !== fieldType.Boolean && !(field.type === fieldType.Hidden && !cipher.viewPassword)"
+                    (click)="copy(field.value, 'value', field.type === fieldType.Hidden ? 'H_Field' : 'Field')"
+                    role="button">
+                    <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/app/vault/view-custom-fields.component.ts b/src/app/vault/view-custom-fields.component.ts
new file mode 100644
index 0000000000..916a1df2eb
--- /dev/null
+++ b/src/app/vault/view-custom-fields.component.ts
@@ -0,0 +1,19 @@
+import {
+    Component,
+} from '@angular/core';
+
+import { EventService } from 'jslib-common/abstractions/event.service';
+
+import {
+    ViewCustomFieldsComponent as BaseViewCustomFieldsComponent
+} from 'jslib-angular/components/view-custom-fields.component';
+
+@Component({
+    selector: 'app-vault-view-custom-fields',
+    templateUrl: 'view-custom-fields.component.html',
+})
+export class ViewCustomFieldsComponent extends BaseViewCustomFieldsComponent {
+    constructor(eventService: EventService) {
+        super(eventService);
+    }
+}
diff --git a/src/app/vault/view.component.html b/src/app/vault/view.component.html
index 4a94f68f35..e659f80053 100644
--- a/src/app/vault/view.component.html
+++ b/src/app/vault/view.component.html
@@ -204,44 +204,9 @@
                 <div class="box-content-row pre-wrap">{{cipher.notes}}</div>
             </div>
         </div>
-        <div class="box" *ngIf="cipher.hasFields">
-            <div class="box-header">
-                {{'customFields' | i18n}}
-            </div>
-            <div class="box-content">
-                <div class="box-content-row box-content-row-flex" *ngFor="let field of cipher.fields">
-                    <div class="row-main">
-                        <span class="row-label">{{field.name}}</span>
-                        <div *ngIf="field.type === fieldType.Text">
-                            {{field.value || '&nbsp;'}}
-                        </div>
-                        <div *ngIf="field.type === fieldType.Hidden">
-                            <span *ngIf="field.showValue" class="monospaced show-whitespace">{{field.value}}</span>
-                            <span *ngIf="!field.showValue" class="monospaced">{{field.maskedValue}}</span>
-                        </div>
-                        <div *ngIf="field.type === fieldType.Boolean">
-                            <i class="fa fa-check-square-o" *ngIf="field.value === 'true'" aria-hidden="true"></i>
-                            <i class="fa fa-square-o" *ngIf="field.value !== 'true'" aria-hidden="true"></i>
-                            <span class="sr-only">{{field.value}}</span>
-                        </div>
-                    </div>
-                    <div class="action-buttons">
-                        <a class="row-btn" href="#" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
-                            *ngIf="field.type === fieldType.Hidden && cipher.viewPassword"
-                            (click)="toggleFieldValue(field)" role="button">
-                            <i class="fa fa-lg" aria-hidden="true"
-                                [ngClass]="{'fa-eye': !field.showValue, 'fa-eye-slash': field.showValue}"></i>
-                        </a>
-                        <a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyValue' | i18n}}"
-                            *ngIf="field.value && field.type !== fieldType.Boolean && !(field.type === fieldType.Hidden && !cipher.viewPassword)"
-                            (click)="copy(field.value, 'value', field.type === fieldType.Hidden ? 'H_Field' : 'Field')"
-                            role="button">
-                            <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
+        <app-vault-view-custom-fields *ngIf="cipher.hasFields" [cipher]="cipher"
+            [promptPassword]="promptPassword.bind(this)" [copy]="copy.bind(this)">
+        </app-vault-view-custom-fields>
         <div class="box" *ngIf="cipher.hasAttachments && (canAccessPremium || cipher.organizationId)">
             <div class="box-header">
                 {{'attachments' | i18n}}