[Linked fields] Add Linked Field as custom field type (#1091)

* Add linked fields

* Update to use Field.linkedId

* Add missing deps

* Update jslib

src/app/services.module.ts

@@ -130,7 +130,7 @@ const passwordGenerationService = new PasswordGenerationService(cryptoService, s
 const totpService = new TotpService(storageService, cryptoFunctionService, logService);
 const containerService = new ContainerService(cryptoService);
 const authService = new AuthService(cryptoService, apiService, userService, tokenService, appIdService,
-    i18nService, platformUtilsService, messagingService, vaultTimeoutService, logService);
+    i18nService, platformUtilsService, messagingService, vaultTimeoutService, logService, cryptoFunctionService);
 const exportService = new ExportService(folderService, cipherService, apiService, cryptoService);
 const auditService = new AuditService(cryptoFunctionService, apiService);
 const notificationsService = new NotificationsService(userService, syncService, appIdService,

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

@@ -16,13 +16,21 @@
                 <div class="row-main">
                     <input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name"
                         class="row-label" placeholder="{{'name' | i18n}}">
+                    <!-- Text -->
                     <input id="fieldValue{{i}}" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value"
                         *ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}">
+                    <!-- 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">
+                    <!-- 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">
@@ -39,6 +47,7 @@
                 </div>
             </div>
         </div>
+        <!-- Add new custom field -->
         <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}}
@@ -46,6 +55,9 @@
             <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>

src/app/vault/add-edit.component.html

@@ -281,7 +281,8 @@
                     </div>
                 </div>
             </div>
-            <app-vault-add-edit-custom-fields [cipher]="cipher" [editMode]="editMode"></app-vault-add-edit-custom-fields>
+            <app-vault-add-edit-custom-fields [cipher]="cipher" [thisCipherType]="cipher.type" [editMode]="editMode">
+            </app-vault-add-edit-custom-fields>
             <div class="box" *ngIf="allowOwnershipOptions()">
                 <div class="box-header">
                     {{'ownership' | i18n}}

src/app/vault/view-custom-fields.component.html

@@ -18,6 +18,13 @@
                     <i class="fa fa-square-o" *ngIf="field.value !== 'true'" aria-hidden="true"></i>
                     <span class="sr-only">{{field.value}}</span>
                 </div>
+                <div *ngIf="field.type === fieldType.Linked" class="box-content-row-flex">
+                    <div class="icon icon-small">
+                        <i class="fa fa-link" aria-hidden="true" appA11yTitle="{{'linkedValue' | i18n}}"></i>
+                        <span class="sr-only">{{'linkedValue' | i18n}}</span>
+                    </div>
+                    <span>{{cipher.linkedFieldI18nKey(field.linkedId) | i18n}}</span>
+                </div>
             </div>
             <div class="action-buttons">
                 <a class="row-btn" href="#" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
@@ -27,7 +34,8 @@
                         [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)"
+                    *ngIf="field.value && field.type !== fieldType.Boolean && field.type !== fieldType.Linked &&
+                    !(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>

src/locales/en/messages.json

@@ -268,6 +268,9 @@
   "lastName": {
     "message": "Last Name"
   },
+  "fullName": {
+    "message": "Full Name"
+  },
   "address1": {
     "message": "Address 1"
   },
@@ -328,6 +331,14 @@
   "cfTypeBoolean": {
     "message": "Boolean"
   },
+  "cfTypeLinked": {
+    "message": "Linked",
+    "description": "This describes a field that is 'linked' (related) to another field."
+  },
+  "linkedValue": {
+    "message": "Linked value",
+    "description": "This describes a value that is 'linked' (related) to another value."
+  },
   "remove": {
     "message": "Remove"
   },

src/scss/box.scss

@@ -409,4 +409,21 @@
             background-color: $brand-primary;
         }
     }
+
+    .icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-width: 34px;
+        height: 100%;
+        margin-left: -5px;
+
+        @include themify($themes) {
+            color: themed('mutedColor');
+        }
+
+        &.icon-small {
+            min-width: 25px;
+        }
+    }
 }