From 7ad42ae18ba61d50c576eddbaf62bc73b2414f74 Mon Sep 17 00:00:00 2001
From: Shane Melton <smelton@bitwarden.com>
Date: Tue, 13 Aug 2024 08:58:16 -0700
Subject: [PATCH] [PM-9190] Browser Refresh - Autofill section fixes (#10488)

* [PM-10751] Add count to website URI label

* [PM-10752] Hide autofill on page load field when the setting is disabled

* [PM-10790] Fix bottom margin
---
 apps/browser/src/_locales/en/messages.json      | 10 ++++++++++
 apps/web/src/locales/en/messages.json           | 10 ++++++++++
 .../autofill-options.component.html             |  5 +++--
 .../autofill-options.component.spec.ts          | 17 +++++++++++++++++
 .../autofill-options.component.ts               |  1 +
 .../autofill-options/uri-option.component.html  |  2 +-
 .../autofill-options/uri-option.component.ts    | 11 +++++++++++
 7 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index 08e22f5f939..86e8c6b84bf 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -3883,6 +3883,16 @@
   "websiteUri": {
     "message": "Website (URI)"
   },
+  "websiteUriCount": {
+    "message": "Website (URI) $COUNT$",
+    "description": "Label for an input field that contains a website URI. The input field is part of a list of fields, and the count indicates the position of the field in the list.",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "3"
+      }
+    }
+  },
   "websiteAdded": {
     "message": "Website added"
   },
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index fd2924badb4..0cf671980c5 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -57,6 +57,16 @@
   "websiteUri": {
     "message": "Website (URI)"
   },
+  "websiteUriCount": {
+    "message": "Website (URI) $COUNT$",
+    "description": "Label for an input field that contains a website URI. The input field is part of a list of fields, and the count indicates the position of the field in the list.",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "3"
+      }
+    }
+  },
   "websiteAdded": {
     "message": "Website added"
   },
diff --git a/libs/vault/src/cipher-form/components/autofill-options/autofill-options.component.html b/libs/vault/src/cipher-form/components/autofill-options/autofill-options.component.html
index c6102ca2aee..6c651527c11 100644
--- a/libs/vault/src/cipher-form/components/autofill-options/autofill-options.component.html
+++ b/libs/vault/src/cipher-form/components/autofill-options/autofill-options.component.html
@@ -13,6 +13,7 @@
         (remove)="removeUri(i)"
         [canRemove]="uriControls.length > 1"
         [defaultMatchDetection]="defaultMatchDetection$ | async"
+        [index]="i"
       ></vault-autofill-uri-option>
     </ng-container>
 
@@ -20,7 +21,7 @@
       type="button"
       bitLink
       linkType="primary"
-      class="tw-mb-6"
+      [class.tw-mb-6]="autofillOnPageLoadEnabled$ | async"
       (click)="addUri({ uri: null, matchDetection: null }, true)"
       *ngIf="autofillOptionsForm.enabled"
     >
@@ -28,7 +29,7 @@
       {{ "addWebsite" | i18n }}
     </button>
 
-    <bit-form-field>
+    <bit-form-field *ngIf="autofillOnPageLoadEnabled$ | async" disableMargin>
       <bit-label>{{ "autoFillOnPageLoad" | i18n }}</bit-label>
       <bit-select formControlName="autofillOnPageLoad" [items]="autofillOptions"></bit-select>
     </bit-form-field>
diff --git a/libs/vault/src/cipher-form/components/autofill-options/autofill-options.component.spec.ts b/libs/vault/src/cipher-form/components/autofill-options/autofill-options.component.spec.ts
index 6f73ffabefb..601380f98a1 100644
--- a/libs/vault/src/cipher-form/components/autofill-options/autofill-options.component.spec.ts
+++ b/libs/vault/src/cipher-form/components/autofill-options/autofill-options.component.spec.ts
@@ -32,6 +32,7 @@ describe("AutofillOptionsComponent", () => {
 
     autofillSettingsService = mock<AutofillSettingsServiceAbstraction>();
     autofillSettingsService.autofillOnPageLoadDefault$ = new BehaviorSubject(false);
+    autofillSettingsService.autofillOnPageLoad$ = new BehaviorSubject(true);
 
     await TestBed.configureTestingModule({
       imports: [AutofillOptionsComponent],
@@ -145,6 +146,22 @@ describe("AutofillOptionsComponent", () => {
     expect(component["autofillOptions"][0].label).toEqual("defaultLabel yes");
   });
 
+  it("hides the autofill on page load field when the setting is disabled", () => {
+    fixture.detectChanges();
+    let control = fixture.nativeElement.querySelector(
+      "bit-select[formControlName='autofillOnPageLoad']",
+    );
+    expect(control).toBeTruthy();
+
+    (autofillSettingsService.autofillOnPageLoad$ as BehaviorSubject<boolean>).next(false);
+
+    fixture.detectChanges();
+    control = fixture.nativeElement.querySelector(
+      "bit-select[formControlName='autofillOnPageLoad']",
+    );
+    expect(control).toBeFalsy();
+  });
+
   it("announces the addition of a new URI input", fakeAsync(() => {
     fixture.detectChanges();
 
diff --git a/libs/vault/src/cipher-form/components/autofill-options/autofill-options.component.ts b/libs/vault/src/cipher-form/components/autofill-options/autofill-options.component.ts
index 389eda4c189..80de50c4421 100644
--- a/libs/vault/src/cipher-form/components/autofill-options/autofill-options.component.ts
+++ b/libs/vault/src/cipher-form/components/autofill-options/autofill-options.component.ts
@@ -70,6 +70,7 @@ export class AutofillOptionsComponent implements OnInit {
   }
 
   protected defaultMatchDetection$ = this.domainSettingsService.defaultUriMatchStrategy$;
+  protected autofillOnPageLoadEnabled$ = this.autofillSettingsService.autofillOnPageLoad$;
 
   protected autofillOptions: { label: string; value: boolean | null }[] = [
     { label: this.i18nService.t("default"), value: null },
diff --git a/libs/vault/src/cipher-form/components/autofill-options/uri-option.component.html b/libs/vault/src/cipher-form/components/autofill-options/uri-option.component.html
index 470b2881aba..c9650eb5539 100644
--- a/libs/vault/src/cipher-form/components/autofill-options/uri-option.component.html
+++ b/libs/vault/src/cipher-form/components/autofill-options/uri-option.component.html
@@ -1,6 +1,6 @@
 <ng-container [formGroup]="uriForm">
   <bit-form-field>
-    <bit-label>{{ "websiteUri" | i18n }}</bit-label>
+    <bit-label>{{ uriLabel }}</bit-label>
     <input bitInput formControlName="uri" #uriInput />
     <button
       type="button"
diff --git a/libs/vault/src/cipher-form/components/autofill-options/uri-option.component.ts b/libs/vault/src/cipher-form/components/autofill-options/uri-option.component.ts
index b0eaf3a4c62..26f59ba9c16 100644
--- a/libs/vault/src/cipher-form/components/autofill-options/uri-option.component.ts
+++ b/libs/vault/src/cipher-form/components/autofill-options/uri-option.component.ts
@@ -89,6 +89,11 @@ export class UriOptionComponent implements ControlValueAccessor {
     );
   }
 
+  /**
+   * The index of the URI in the form. Used to render the correct label.
+   */
+  @Input({ required: true }) index: number;
+
   /**
    * Emits when the remove button is clicked and URI should be removed from the form.
    */
@@ -104,6 +109,12 @@ export class UriOptionComponent implements ControlValueAccessor {
     }
   }
 
+  protected get uriLabel() {
+    return this.index === 0
+      ? this.i18nService.t("websiteUri")
+      : this.i18nService.t("websiteUriCount", this.index + 1);
+  }
+
   protected get toggleTitle() {
     return this.showMatchDetection
       ? this.i18nService.t("hideMatchDetection", this.uriForm.value.uri)