mirror of
https://github.com/bitwarden/web
synced 2025-12-15 07:43:16 +00:00
Move custom fields to separate components (#1192)
* Move add-edit custom fields to own component * Update jslib * Fix import * Update jslib
This commit is contained in:
Thomas Rittson
GitHub
2
jslib
2
jslib
Submodule jslib updated: 83548a6753...b7429b0c0c
@@ -157,6 +157,7 @@ import { ToolsComponent } from './tools/tools.component';
|
|||||||
import { UnsecuredWebsitesReportComponent } from './tools/unsecured-websites-report.component';
|
import { UnsecuredWebsitesReportComponent } from './tools/unsecured-websites-report.component';
|
||||||
import { WeakPasswordsReportComponent } from './tools/weak-passwords-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 { AddEditComponent } from './vault/add-edit.component';
|
||||||
import { AttachmentsComponent } from './vault/attachments.component';
|
import { AttachmentsComponent } from './vault/attachments.component';
|
||||||
import { BulkActionsComponent } from './vault/bulk-actions.component';
|
import { BulkActionsComponent } from './vault/bulk-actions.component';
|
||||||
@@ -456,6 +457,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
|
|||||||
SendOptionsPolicyComponent,
|
SendOptionsPolicyComponent,
|
||||||
ResetPasswordPolicyComponent,
|
ResetPasswordPolicyComponent,
|
||||||
VaultTimeoutInputComponent,
|
VaultTimeoutInputComponent,
|
||||||
|
AddEditCustomFieldsComponent,
|
||||||
],
|
],
|
||||||
exports: [
|
exports: [
|
||||||
A11yTitleDirective,
|
A11yTitleDirective,
|
||||||
|
|||||||
81
src/app/vault/add-edit-custom-fields.component.html
Normal file
81
src/app/vault/add-edit-custom-fields.component.html
Normal file
@@ -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>
|
||||||
24
src/app/vault/add-edit-custom-fields.component.ts
Normal file
24
src/app/vault/add-edit-custom-fields.component.ts
Normal file
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -388,85 +388,8 @@
|
|||||||
<textarea id="notes" name="Notes" rows="6" [(ngModel)]="cipher.notes"
|
<textarea id="notes" name="Notes" rows="6" [(ngModel)]="cipher.notes"
|
||||||
[disabled]="cipher.isDeleted || viewOnly" class="form-control"></textarea>
|
[disabled]="cipher.isDeleted || viewOnly" class="form-control"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="mt-4">{{'customFields' | i18n}}</h3>
|
<app-vault-add-edit-custom-fields [cipher]="cipher" [viewOnly]="viewOnly" [copy]="copy.bind(this)">
|
||||||
<div cdkDropList (cdkDropListDropped)="drop($event)" *ngIf="cipher.hasFields">
|
</app-vault-add-edit-custom-fields>
|
||||||
<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 *ngIf="allowOwnershipAssignment()">
|
<ng-container *ngIf="allowOwnershipAssignment()">
|
||||||
<h3 class="mt-4">{{'ownership' | i18n}}</h3>
|
<h3 class="mt-4">{{'ownership' | i18n}}</h3>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|||||||
Reference in New Issue
Block a user