From 8049b1941ed2b4cb1374a725bf581567808fb02f Mon Sep 17 00:00:00 2001
From: Miles Blackwood <mrobinson@bitwarden.com>
Date: Wed, 26 Feb 2025 17:29:34 -0500
Subject: [PATCH] Use bit-select (+ReactiveForms) in Autofill on page load
 settings.

---
 .../popup/settings/autofill.component.html    | 103 +++++++++---------
 .../popup/settings/autofill.component.ts      |  71 ++++++++++--
 2 files changed, 112 insertions(+), 62 deletions(-)

diff --git a/apps/browser/src/autofill/popup/settings/autofill.component.html b/apps/browser/src/autofill/popup/settings/autofill.component.html
index 340197f6bf3..1a3321c4552 100644
--- a/apps/browser/src/autofill/popup/settings/autofill.component.html
+++ b/apps/browser/src/autofill/popup/settings/autofill.component.html
@@ -154,60 +154,57 @@
       </bit-item>
     </bit-section>
     <bit-section>
-      <bit-section-header>
-        <h2 bitTypography="h6">{{ "enableAutoFillOnPageLoadSectionTitle" | i18n }}</h2>
-      </bit-section-header>
-      <bit-card>
-        <bit-hint class="tw-mb-6 tw-text-sm">
-          {{ "enableAutoFillOnPageLoadDesc" | i18n }}
-          <span
-            ><b>{{ "warningCapitalized" | i18n }}</b
-            >: {{ "experimentalFeature" | i18n }}</span
-          >
-          <a
-            bitLink
-            class="tw-no-underline"
-            href="https://bitwarden.com/help/auto-fill-browser/"
-            rel="noreferrer"
-            target="_blank"
-          >
-            {{ "learnMoreAboutAutofillOnPageLoadLinkText" | i18n }}
-          </a>
-        </bit-hint>
-        <bit-form-control>
-          <input
-            bitCheckbox
-            id="autofillOnPageLoad"
-            type="checkbox"
-            (change)="updateAutofillOnPageLoad()"
-            [(ngModel)]="enableAutofillOnPageLoad"
-            [disabled]="autofillOnPageLoadFromPolicy$ | async"
-          />
-          <bit-label for="autofillOnPageLoad">{{ "enableAutoFillOnPageLoad" | i18n }}</bit-label>
-          <bit-hint class="tw-text-sm" *ngIf="autofillOnPageLoadFromPolicy$ | async">{{
-            "enterprisePolicyRequirementsApplied" | i18n
-          }}</bit-hint>
-        </bit-form-control>
-        <bit-form-field disableMargin>
-          <bit-label for="defaultAutofill">{{ "defaultAutoFillOnPageLoad" | i18n }}</bit-label>
-          <select
-            bitInput
-            id="defaultAutofill"
-            (change)="updateAutofillOnPageLoadDefault()"
-            [(ngModel)]="autofillOnPageLoadDefault"
-            [disabled]="!enableAutofillOnPageLoad"
-          >
-            <option
-              *ngFor="let o of autofillOnPageLoadOptions"
-              [ngValue]="o.value"
-              [label]="o.name"
-            ></option>
-          </select>
-          <bit-hint class="tw-text-sm">
-            {{ "defaultAutoFillOnPageLoadDesc" | i18n }}
+      <form [formGroup]="autofillOnPageLoadForm">
+        <bit-section-header>
+          <legend>
+            <h2 bitTypography="h6">{{ "enableAutoFillOnPageLoadSectionTitle" | i18n }}</h2>
+          </legend>
+        </bit-section-header>
+        <bit-card>
+          <bit-hint class="tw-mb-6 tw-text-sm">
+            {{ "enableAutoFillOnPageLoadDesc" | i18n }}
+            <span
+              ><b>{{ "warningCapitalized" | i18n }}</b
+              >: {{ "experimentalFeature" | i18n }}</span
+            >
+            <a
+              bitLink
+              class="tw-no-underline"
+              href="https://bitwarden.com/help/auto-fill-browser/"
+              rel="noreferrer"
+              target="_blank"
+            >
+              {{ "learnMoreAboutAutofillOnPageLoadLinkText" | i18n }}
+            </a>
           </bit-hint>
-        </bit-form-field>
-      </bit-card>
+          <bit-form-control>
+            <input
+              formControlName="autofillOnPageLoad"
+              bitCheckbox
+              id="autofillOnPageLoad"
+              type="checkbox"
+            />
+            <bit-label for="autofillOnPageLoad">{{ "enableAutoFillOnPageLoad" | i18n }}</bit-label>
+            <bit-hint class="tw-text-sm" *ngIf="autofillOnPageLoadFromPolicy$ | async">{{
+              "enterprisePolicyRequirementsApplied" | i18n
+            }}</bit-hint>
+          </bit-form-control>
+          <bit-form-field disableMargin>
+            <bit-label for="defaultAutofill">{{ "defaultAutoFillOnPageLoad" | i18n }}</bit-label>
+            <bit-select formControlName="defaultAutofill" bitInput id="defaultAutofill">
+              <bit-option
+                *ngFor="let option of autofillOnPageLoadOptions"
+                [label]="option.name"
+                [value]="option.value"
+              >
+              </bit-option>
+            </bit-select>
+            <bit-hint class="tw-text-sm">
+              {{ "defaultAutoFillOnPageLoadDesc" | i18n }}
+            </bit-hint>
+          </bit-form-field>
+        </bit-card>
+      </form>
     </bit-section>
     <bit-section>
       <bit-section-header>
diff --git a/apps/browser/src/autofill/popup/settings/autofill.component.ts b/apps/browser/src/autofill/popup/settings/autofill.component.ts
index f0b73838ba4..79b15dfe408 100644
--- a/apps/browser/src/autofill/popup/settings/autofill.component.ts
+++ b/apps/browser/src/autofill/popup/settings/autofill.component.ts
@@ -1,8 +1,15 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { CommonModule } from "@angular/common";
-import { Component, OnInit } from "@angular/core";
-import { FormsModule } from "@angular/forms";
+import { Component, DestroyRef, OnInit } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import {
+  FormsModule,
+  ReactiveFormsModule,
+  FormBuilder,
+  FormGroup,
+  FormControl,
+} from "@angular/forms";
 import { RouterModule } from "@angular/router";
 import { firstValueFrom } from "rxjs";
 
@@ -73,6 +80,7 @@ import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.co
     SectionHeaderComponent,
     SelectModule,
     TypographyModule,
+    ReactiveFormsModule,
   ],
 })
 export class AutofillComponent implements OnInit {
@@ -94,6 +102,11 @@ export class AutofillComponent implements OnInit {
   protected autofillOnPageLoadFromPolicy$ =
     this.autofillSettingsService.activateAutofillOnPageLoadFromPolicy$;
 
+  protected autofillOnPageLoadForm = new FormGroup({
+    autofillOnPageLoad: new FormControl(),
+    defaultAutofill: new FormControl(),
+  });
+
   enableAutofillOnPageLoad: boolean = false;
   enableInlineMenu: boolean = false;
   enableInlineMenuOnIconSelect: boolean = false;
@@ -121,10 +134,12 @@ export class AutofillComponent implements OnInit {
     private messagingService: MessagingService,
     private vaultSettingsService: VaultSettingsService,
     private configService: ConfigService,
+    private formBuilder: FormBuilder,
+    private destroyRef: DestroyRef,
   ) {
     this.autofillOnPageLoadOptions = [
-      { name: i18nService.t("autoFillOnPageLoadYes"), value: true },
-      { name: i18nService.t("autoFillOnPageLoadNo"), value: false },
+      { name: this.i18nService.t("autoFillOnPageLoadYes"), value: true },
+      { name: this.i18nService.t("autoFillOnPageLoadNo"), value: false },
     ];
     this.clearClipboardOptions = [
       { name: i18nService.t("never"), value: ClearClipboardDelay.Never },
@@ -181,14 +196,49 @@ export class AutofillComponent implements OnInit {
       this.inlineMenuVisibility === AutofillOverlayVisibility.OnFieldFocus ||
       this.enableInlineMenuOnIconSelect;
 
+    this.autofillSettingsService.activateAutofillOnPageLoadFromPolicy$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((value) => {
+        value
+          ? this.autofillOnPageLoadForm.controls.autofillOnPageLoad.disable({ emitEvent: false })
+          : this.autofillOnPageLoadForm.controls.autofillOnPageLoad.enable({ emitEvent: false });
+      });
+
     this.enableAutofillOnPageLoad = await firstValueFrom(
       this.autofillSettingsService.autofillOnPageLoad$,
     );
 
+    this.autofillOnPageLoadForm.controls.autofillOnPageLoad.patchValue(
+      this.enableAutofillOnPageLoad,
+      { emitEvent: false },
+    );
+
     this.autofillOnPageLoadDefault = await firstValueFrom(
       this.autofillSettingsService.autofillOnPageLoadDefault$,
     );
 
+    if (this.enableAutofillOnPageLoad === false) {
+      this.autofillOnPageLoadForm.controls.defaultAutofill.disable();
+    }
+
+    this.autofillOnPageLoadForm.controls.defaultAutofill.patchValue(
+      this.autofillOnPageLoadDefault,
+      { emitEvent: false },
+    );
+
+    this.autofillOnPageLoadForm.controls.autofillOnPageLoad.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((value) => {
+        void this.autofillSettingsService.setAutofillOnPageLoad(value);
+        this.enableDefaultAutofillControl(value);
+      });
+
+    this.autofillOnPageLoadForm.controls.defaultAutofill.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((value) => {
+        void this.autofillSettingsService.setAutofillOnPageLoadDefault(value);
+      });
+
     this.enableContextMenuItem = await firstValueFrom(
       this.autofillSettingsService.enableContextMenu$,
     );
@@ -230,13 +280,16 @@ export class AutofillComponent implements OnInit {
       await this.requestPrivacyPermission();
     }
   }
-
-  async updateAutofillOnPageLoad() {
-    await this.autofillSettingsService.setAutofillOnPageLoad(this.enableAutofillOnPageLoad);
+  async getAutofillOnPageLoadFromPolicy() {
+    await firstValueFrom(this.autofillOnPageLoadFromPolicy$);
   }
 
-  async updateAutofillOnPageLoadDefault() {
-    await this.autofillSettingsService.setAutofillOnPageLoadDefault(this.autofillOnPageLoadDefault);
+  enableDefaultAutofillControl(enable: boolean = true) {
+    if (enable) {
+      this.autofillOnPageLoadForm.controls.defaultAutofill.enable();
+    } else {
+      this.autofillOnPageLoadForm.controls.defaultAutofill.disable();
+    }
   }
 
   async saveDefaultUriMatch() {