[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

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

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

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>

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();
 

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

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"

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)