PM-19102 Autofill new identity information in the popout (#13822)

* PM-17187 Autofill new card information in the popout

* Add new identity autofill to browser extension

* Add ability to save values from autoselect fields

apps/browser/src/autofill/services/autofill-overlay-content.service.ts

@@ -840,7 +840,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
       return;
     }
 
-    const clonedNode = formFieldElement.cloneNode() as FillableFormFieldElement;
+    const clonedNode = formFieldElement.cloneNode(true) as FillableFormFieldElement;
     const identityLoginFields: AutofillFieldQualifierType[] = [
       AutofillFieldQualifier.identityUsername,
       AutofillFieldQualifier.identityEmail,

apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.ts

@@ -488,5 +488,79 @@ const mapAddEditCipherInfoToInitialValues = (
     initialValues.username = cipher.identity.username;
   }
 
+  if (cipher.type == CipherType.Identity) {
+    const identity = cipher.identity;
+
+    if (identity != null) {
+      if (identity.title != null) {
+        initialValues.title = identity.title;
+      }
+
+      if (identity.firstName != null) {
+        initialValues.firstName = identity.firstName;
+      }
+
+      if (identity.middleName != null) {
+        initialValues.middleName = identity.middleName;
+      }
+
+      if (identity.lastName != null) {
+        initialValues.lastName = identity.lastName;
+      }
+
+      if (identity.company != null) {
+        initialValues.company = identity.company;
+      }
+
+      if (identity.ssn != null) {
+        initialValues.ssn = identity.ssn;
+      }
+
+      if (identity.passportNumber != null) {
+        initialValues.passportNumber = identity.passportNumber;
+      }
+
+      if (identity.licenseNumber != null) {
+        initialValues.licenseNumber = identity.licenseNumber;
+      }
+
+      if (identity.email != null) {
+        initialValues.email = identity.email;
+      }
+
+      if (identity.phone != null) {
+        initialValues.phone = identity.phone;
+      }
+
+      if (identity.address1 != null) {
+        initialValues.address1 = identity.address1;
+      }
+
+      if (identity.address2 != null) {
+        initialValues.address2 = identity.address2;
+      }
+
+      if (identity.address3 != null) {
+        initialValues.address3 = identity.address3;
+      }
+
+      if (identity.city != null) {
+        initialValues.city = identity.city;
+      }
+
+      if (identity.state != null) {
+        initialValues.state = identity.state;
+      }
+
+      if (identity.postalCode != null) {
+        initialValues.postalCode = identity.postalCode;
+      }
+
+      if (identity.country != null) {
+        initialValues.country = identity.country;
+      }
+    }
+  }
+
   return initialValues;
 };

libs/vault/src/cipher-form/abstractions/cipher-form-config.service.ts

@@ -25,11 +25,30 @@ export type OptionalInitialValues = {
   username?: string;
   password?: string;
   name?: string;
+  // Credit Card Information
   cardholderName?: string;
   number?: string;
   expMonth?: string;
   expYear?: string;
   code?: string;
+  // Identity Information
+  title?: string;
+  firstName?: string;
+  middleName?: string;
+  lastName?: string;
+  company?: string;
+  ssn?: string;
+  passportNumber?: string;
+  licenseNumber?: string;
+  email?: string;
+  phone?: string;
+  address1?: string;
+  address2?: string;
+  address3?: string;
+  city?: string;
+  state?: string;
+  postalCode?: string;
+  country?: string;
 };
 
 /**

libs/vault/src/cipher-form/components/identity/identity.component.ts

@@ -73,6 +73,10 @@ export class IdentitySectionComponent implements OnInit {
     country: [""],
   });
 
+  get initialValues() {
+    return this.cipherFormContainer.config.initialValues;
+  }
+
   constructor(
     private cipherFormContainer: CipherFormContainer,
     private formBuilder: FormBuilder,
@@ -116,14 +120,58 @@ export class IdentitySectionComponent implements OnInit {
     const prefillCipher = this.cipherFormContainer.getInitialCipherView();
 
     if (prefillCipher) {
+      this.initFromExistingCipher(prefillCipher.identity);
       this.populateFormData(prefillCipher);
     } else {
+      this.initNewCipher();
       this.identityForm.patchValue({
         username: this.cipherFormContainer.config.initialValues?.username || "",
       });
     }
   }
 
+  private initFromExistingCipher(existingIdentity: IdentityView) {
+    this.identityForm.patchValue({
+      firstName: this.initialValues.firstName ?? existingIdentity.firstName,
+      middleName: this.initialValues.middleName ?? existingIdentity.middleName,
+      lastName: this.initialValues.lastName ?? existingIdentity.lastName,
+      company: this.initialValues.company ?? existingIdentity.company,
+      ssn: this.initialValues.ssn ?? existingIdentity.ssn,
+      passportNumber: this.initialValues.passportNumber ?? existingIdentity.passportNumber,
+      licenseNumber: this.initialValues.licenseNumber ?? existingIdentity.licenseNumber,
+      email: this.initialValues.email ?? existingIdentity.email,
+      phone: this.initialValues.phone ?? existingIdentity.phone,
+      address1: this.initialValues.address1 ?? existingIdentity.address1,
+      address2: this.initialValues.address2 ?? existingIdentity.address2,
+      address3: this.initialValues.address3 ?? existingIdentity.address3,
+      city: this.initialValues.city ?? existingIdentity.city,
+      state: this.initialValues.state ?? existingIdentity.state,
+      postalCode: this.initialValues.postalCode ?? existingIdentity.postalCode,
+      country: this.initialValues.country ?? existingIdentity.country,
+    });
+  }
+
+  private initNewCipher() {
+    this.identityForm.patchValue({
+      firstName: this.initialValues?.firstName || "",
+      middleName: this.initialValues?.middleName || "",
+      lastName: this.initialValues?.lastName || "",
+      company: this.initialValues?.company || "",
+      ssn: this.initialValues?.ssn || "",
+      passportNumber: this.initialValues?.passportNumber || "",
+      licenseNumber: this.initialValues?.licenseNumber || "",
+      email: this.initialValues?.email || "",
+      phone: this.initialValues?.phone || "",
+      address1: this.initialValues?.address1 || "",
+      address2: this.initialValues?.address2 || "",
+      address3: this.initialValues?.address3 || "",
+      city: this.initialValues?.city || "",
+      state: this.initialValues?.state || "",
+      postalCode: this.initialValues?.postalCode || "",
+      country: this.initialValues?.country || "",
+    });
+  }
+
   populateFormData(cipherView: CipherView) {
     const { identity } = cipherView;