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

* Add linked fields

* Update to use Field.linkedId

* Add missing deps

* Update jslib
This commit is contained in:
Thomas Rittson 2021-11-04 08:02:41 +10:00 committed by GitHub
parent 6cea5e053d
commit f2a5fe4429
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 53 additions and 4 deletions

2
jslib

@ -1 +1 @@
Subproject commit 24fe836032354d4ec39435776e54dd0995e1b389
Subproject commit 2db9e1ce0d7a702f07f20ecb916dd8191ff617e1

View File

@ -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,

View File

@ -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>

View File

@ -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}}

View File

@ -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>

View File

@ -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"
},

View File

@ -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;
}
}
}