From 4e3c4a387041a27f580cb6879d7288e163a4000e Mon Sep 17 00:00:00 2001 From: Hinton Date: Mon, 24 Feb 2025 10:53:35 +0100 Subject: [PATCH] Test on actual form --- libs/vault/src/cipher-form/ciphers.ts | 130 ++++++++++++++++++ .../components/cipher-form.component.html | 24 +--- .../components/cipher-form.component.ts | 9 ++ .../form-builder/builder-field.component.ts | 6 +- 4 files changed, 145 insertions(+), 24 deletions(-) create mode 100644 libs/vault/src/cipher-form/ciphers.ts diff --git a/libs/vault/src/cipher-form/ciphers.ts b/libs/vault/src/cipher-form/ciphers.ts new file mode 100644 index 00000000000..3a73bd50ab6 --- /dev/null +++ b/libs/vault/src/cipher-form/ciphers.ts @@ -0,0 +1,130 @@ +import { FormControl, FormGroup } from "@angular/forms"; + +import { CipherType } from "@bitwarden/common/vault/enums"; + +import { SectionConfig } from "../form-builder/form-builder.component"; + +export const CipherForms: Record = { + [CipherType.Identity]: [ + { + label: "Personal details", + items: [ + // title: EncString; + { + label: "First name", + control: "text", + property: "firstName", + }, + { + label: "Middle name", + control: "text", + property: "middleName", + }, + { + label: "Last name", + control: "text", + property: "lastName", + }, + { + label: "Username", + control: "text", + property: "username", + }, + { + label: "Company", + control: "text", + property: "company", + }, + ], + }, + { + label: "Identification", + items: [ + { + label: "Social Security number", + control: "text", + property: "ssn", + }, + { + label: "Passport number", + control: "text", + property: "passportNumber", + }, + { + label: "License number", + control: "text", + property: "licenseNumber", + }, + ], + }, + { + label: "Contact info", + items: [ + { + label: "Email", + control: "text", + property: "email", + }, + { + label: "Phone", + control: "text", + property: "phone", + }, + ], + }, + { + label: "Address", + items: [ + { + label: "Address 1", + control: "text", + property: "address1", + }, + { + label: "Address 2", + control: "text", + property: "address2", + }, + { + label: "Address 3", + control: "text", + property: "address3", + }, + { + label: "City / Town", + control: "text", + property: "city", + }, + { + label: "State / Province", + control: "text", + property: "state", + }, + { + label: "Zip / Postal code", + control: "text", + property: "postalCode", + }, + { + label: "Country", + control: "text", + property: "country", + }, + ], + }, + ], + [CipherType.Login]: [], + [CipherType.SecureNote]: [], + [CipherType.Card]: [], + [CipherType.SshKey]: [], +}; + +export function cipherFormToFormGroup(config: SectionConfig[]): FormGroup { + const group = new FormGroup({}); + config.forEach((section) => { + section.items.forEach((item) => { + group.addControl(item.property, new FormControl("")); + }); + }); + return group; +} diff --git a/libs/vault/src/cipher-form/components/cipher-form.component.html b/libs/vault/src/cipher-form/components/cipher-form.component.html index 2644741385b..3499bc15913 100644 --- a/libs/vault/src/cipher-form/components/cipher-form.component.html +++ b/libs/vault/src/cipher-form/components/cipher-form.component.html @@ -6,27 +6,9 @@ [originalCipherView]="originalCipherView" > - - - - - - - + @if (formGroup && formConfig) { + + } diff --git a/libs/vault/src/cipher-form/components/cipher-form.component.ts b/libs/vault/src/cipher-form/components/cipher-form.component.ts index 7335471799b..8e5cc9feacb 100644 --- a/libs/vault/src/cipher-form/components/cipher-form.component.ts +++ b/libs/vault/src/cipher-form/components/cipher-form.component.ts @@ -35,9 +35,11 @@ import { TypographyModule, } from "@bitwarden/components"; +import { FormBuilderComponent, SectionConfig } from "../../form-builder/form-builder.component"; import { CipherFormConfig } from "../abstractions/cipher-form-config.service"; import { CipherFormService } from "../abstractions/cipher-form.service"; import { CipherForm, CipherFormContainer } from "../cipher-form-container"; +import { CipherForms, cipherFormToFormGroup } from "../ciphers"; import { CipherFormCacheService } from "../services/default-cipher-form-cache.service"; import { AdditionalOptionsSectionComponent } from "./additional-options/additional-options-section.component"; @@ -76,6 +78,7 @@ import { SshKeySectionComponent } from "./sshkey-section/sshkey-section.componen NgIf, AdditionalOptionsSectionComponent, LoginDetailsSectionComponent, + FormBuilderComponent, ], }) export class CipherFormComponent implements AfterViewInit, OnInit, OnChanges, CipherFormContainer { @@ -84,6 +87,9 @@ export class CipherFormComponent implements AfterViewInit, OnInit, OnChanges, Ci private destroyRef = inject(DestroyRef); private _firstInitialized = false; + protected formConfig: SectionConfig[] = []; + protected formGroup?: FormGroup; + /** * The form ID to use for the form. Used to connect it to a submit button. */ @@ -225,6 +231,9 @@ export class CipherFormComponent implements AfterViewInit, OnInit, OnChanges, Ci return; } + this.formConfig = CipherForms[this.config.cipherType]; + this.formGroup = cipherFormToFormGroup(this.formConfig); + if (this.config.mode !== "add") { if (this.config.originalCipher == null) { throw new Error("Original cipher is required for edit or clone mode"); diff --git a/libs/vault/src/form-builder/builder-field.component.ts b/libs/vault/src/form-builder/builder-field.component.ts index 5b878bd1edc..887979ed6e2 100644 --- a/libs/vault/src/form-builder/builder-field.component.ts +++ b/libs/vault/src/form-builder/builder-field.component.ts @@ -1,6 +1,6 @@ import { CommonModule } from "@angular/common"; import { Component, Input } from "@angular/core"; -import { AbstractControl, ReactiveFormsModule } from "@angular/forms"; +import { AbstractControl, FormControl, ReactiveFormsModule } from "@angular/forms"; import { FormFieldModule, IconButtonModule } from "@bitwarden/components"; @@ -19,7 +19,7 @@ import { FormConfig } from "./form-builder.component"; }) export class FieldTextComponent { @Input({ required: true }) config!: FormConfig; - @Input({ required: true }) control!: AbstractControl; + @Input({ required: true }) control!: FormControl; constructor() {} } @@ -38,7 +38,7 @@ export class FieldTextComponent { }) export class FieldPasswordComponent { @Input({ required: true }) config!: FormConfig; - @Input({ required: true }) control!: AbstractControl; + @Input({ required: true }) control!: FormControl; constructor() {} }