[WIP] Use form controls to manage option state—assess state consolidation.

apps/browser/src/autofill/popup/settings/autofill.component.html

@@ -7,132 +7,148 @@
 
   <div class="tw-bg-background-alt">
     <bit-section>
-      <bit-section-header>
-        <h2 bitTypography="h6">{{ "autofillSuggestionsSectionTitle" | i18n }}</h2>
-      </bit-section-header>
-      <bit-card>
-        <bit-form-control [disableMargin]="!enableInlineMenu && !canOverrideBrowserAutofillSetting">
-          <input
-            bitCheckbox
-            id="show-inline-menu"
-            type="checkbox"
-            (change)="updateInlineMenuVisibility()"
-            [(ngModel)]="enableInlineMenu"
-          />
-          <bit-label for="show-inline-menu">{{ "showInlineMenuLabel" | i18n }}</bit-label>
-          <bit-hint
-            *ngIf="accountSwitcherEnabled && canOverrideBrowserAutofillSetting"
-            class="tw-text-sm"
-          >
-            {{ "showInlineMenuOnFormFieldsDescAlt" | i18n }}
-          </bit-hint>
-          <bit-hint
-            *ngIf="!canOverrideBrowserAutofillSetting"
-            [class]="!enableInlineMenu ? 'tw-text-sm tw-mb-6' : 'tw-text-sm'"
+      <form [formGroup]="autofillSuggestionsForm">
+        <bit-section-header>
+          <h2 bitTypography="h6">{{ "autofillSuggestionsSectionTitle" | i18n }}</h2>
+        </bit-section-header>
+        <bit-card>
+          <bit-form-control
+            [disableMargin]="
+              !this.autofillSuggestionsForm.controls.inlineMenuVisibility.value &&
+              !canOverrideBrowserAutofillSetting
+            "
           >
-            {{ "turnOffBrowserBuiltInPasswordManagerSettings" | i18n }}
-            <a
-              bitLink
-              class="tw-no-underline"
-              rel="noreferrer"
-              target="_blank"
-              (click)="openURI($event, disablePasswordManagerURI)"
-              [attr.href]="disablePasswordManagerURI"
+            <input
+              bitCheckbox
+              id="show-inline-menu"
+              formControlName="inlineMenuVisibility"
+              type="checkbox"
+            />
+            <bit-label for="show-inline-menu">{{ "showInlineMenuLabel" | i18n }}</bit-label>
+            <bit-hint
+              *ngIf="accountSwitcherEnabled && canOverrideBrowserAutofillSetting"
+              class="tw-text-sm"
             >
-              {{ "turnOffBrowserBuiltInPasswordManagerSettingsLink" | i18n }}
-            </a>
-          </bit-hint>
-        </bit-form-control>
-        <bit-form-control
-          *ngIf="inlineMenuPositioningImprovementsEnabled && enableInlineMenu"
-          class="tw-ml-5"
-        >
-          <input
-            bitCheckbox
-            id="show-inline-menu-identities"
-            type="checkbox"
-            (change)="updateShowInlineMenuIdentities()"
-            [(ngModel)]="showInlineMenuIdentities"
-          />
-          <bit-label for="show-inline-menu-identities">
-            {{ "showInlineMenuIdentitiesLabel" | i18n }}
-          </bit-label>
-        </bit-form-control>
-        <bit-form-control
-          *ngIf="inlineMenuPositioningImprovementsEnabled && enableInlineMenu"
-          class="tw-ml-5"
-        >
-          <input
-            bitCheckbox
-            id="show-inline-menu-cards"
-            type="checkbox"
-            (change)="updateShowInlineMenuCards()"
-            [(ngModel)]="showInlineMenuCards"
-          />
-          <bit-label for="show-inline-menu-cards">
-            {{ "showInlineMenuCardsLabel" | i18n }}
-          </bit-label>
-        </bit-form-control>
-        <bit-form-control *ngIf="enableInlineMenu" class="tw-ml-5">
-          <input
-            bitCheckbox
-            id="show-autofill-suggestions-on-icon"
-            type="checkbox"
-            (change)="updateInlineMenuVisibility()"
-            [(ngModel)]="enableInlineMenuOnIconSelect"
-          />
-          <bit-label for="show-autofill-suggestions-on-icon">
-            {{ "showInlineMenuOnIconSelectionLabel" | i18n }}
-          </bit-label>
-        </bit-form-control>
-        <bit-form-control *ngIf="canOverrideBrowserAutofillSetting">
-          <input
-            bitCheckbox
-            id="overrideBrowserAutofill"
-            type="checkbox"
-            (change)="updateDefaultBrowserAutofillDisabled()"
-            [(ngModel)]="defaultBrowserAutofillDisabled"
-          />
-          <bit-label for="overrideBrowserAutofill">{{
-            "overrideDefaultBrowserAutoFillSettings" | i18n
-          }}</bit-label>
-          <bit-hint class="tw-text-sm">
-            {{ "turnOffBrowserBuiltInPasswordManagerSettings" | i18n }}
-            <a
-              bitLink
-              class="tw-no-underline"
-              rel="noreferrer"
-              target="_blank"
-              (click)="openURI($event, disablePasswordManagerURI)"
-              [attr.href]="disablePasswordManagerURI"
+              {{ "showInlineMenuOnFormFieldsDescAlt" | i18n }}
+            </bit-hint>
+            <bit-hint
+              *ngIf="!canOverrideBrowserAutofillSetting"
+              [class]="
+                !this.autofillSuggestionsForm.controls.enableInlineMenu.value
+                  ? 'tw-text-sm tw-mb-6'
+                  : 'tw-text-sm'
+              "
             >
-              {{ "turnOffBrowserBuiltInPasswordManagerSettingsLink" | i18n }}
-            </a>
-          </bit-hint>
-        </bit-form-control>
-        <bit-form-control>
-          <input
-            bitCheckbox
-            id="showCardsSuggestions"
-            type="checkbox"
-            (change)="updateShowCardsCurrentTab()"
-            [(ngModel)]="showCardsCurrentTab"
-          />
-          <bit-label for="showCardsSuggestions">{{ "showCardsInVaultViewV2" | i18n }}</bit-label>
-        </bit-form-control>
-        <bit-form-control disableMargin>
-          <input
-            bitCheckbox
-            id="showIdentitiesSuggestions"
-            type="checkbox"
-            (change)="updateShowIdentitiesCurrentTab()"
-            [(ngModel)]="showIdentitiesCurrentTab"
-          />
-          <bit-label for="showIdentitiesSuggestions" class="tw-whitespace-normal">
-            {{ "showIdentitiesInVaultViewV2" | i18n }}
-          </bit-label>
-        </bit-form-control>
-      </bit-card>
+              {{ "turnOffBrowserBuiltInPasswordManagerSettings" | i18n }}
+              <a
+                bitLink
+                class="tw-no-underline"
+                rel="noreferrer"
+                target="_blank"
+                (click)="openURI($event, disablePasswordManagerURI)"
+                [attr.href]="disablePasswordManagerURI"
+              >
+                {{ "turnOffBrowserBuiltInPasswordManagerSettingsLink" | i18n }}
+              </a>
+            </bit-hint>
+          </bit-form-control>
+          <bit-form-control
+            *ngIf="
+              inlineMenuPositioningImprovementsEnabled &&
+              this.autofillSuggestionsForm.controls.inlineMenuVisibility.value
+            "
+            class="tw-ml-5"
+          >
+            <input
+              formControlName="showInlineMenuIdentities"
+              bitCheckbox
+              id="show-inline-menu-identities"
+              type="checkbox"
+            />
+            <bit-label for="show-inline-menu-identities">
+              {{ "showInlineMenuIdentitiesLabel" | i18n }}
+            </bit-label>
+          </bit-form-control>
+          <bit-form-control
+            *ngIf="
+              inlineMenuPositioningImprovementsEnabled &&
+              this.autofillSuggestionsForm.controls.inlineMenuVisibility.value
+            "
+            class="tw-ml-5"
+          >
+            <input
+              formControlName="showInlineMenuCards"
+              bitCheckbox
+              id="show-inline-menu-cards"
+              type="checkbox"
+            />
+            <bit-label for="show-inline-menu-cards">
+              {{ "showInlineMenuCardsLabel" | i18n }}
+            </bit-label>
+          </bit-form-control>
+          <bit-form-control
+            *ngIf="this.autofillSuggestionsForm.controls.inlineMenuVisibility.value"
+            class="tw-ml-5"
+          >
+            <input
+              formControlName="enableInlineMenuOnIconSelect"
+              bitCheckbox
+              id="show-autofill-suggestions-on-icon"
+              type="checkbox"
+            />
+            <bit-label for="show-autofill-suggestions-on-icon">
+              {{ "showInlineMenuOnIconSelectionLabel" | i18n }}
+            </bit-label>
+          </bit-form-control>
+          <bit-form-control *ngIf="canOverrideBrowserAutofillSetting">
+            <input
+              bitCheckbox
+              id="overrideBrowserAutofill"
+              type="checkbox"
+              (change)="updateDefaultBrowserAutofillDisabled()"
+              [(ngModel)]="defaultBrowserAutofillDisabled"
+            />
+            <bit-label for="overrideBrowserAutofill">{{
+              "overrideDefaultBrowserAutoFillSettings" | i18n
+            }}</bit-label>
+            <bit-hint class="tw-text-sm">
+              {{ "turnOffBrowserBuiltInPasswordManagerSettings" | i18n }}
+              <a
+                bitLink
+                class="tw-no-underline"
+                rel="noreferrer"
+                target="_blank"
+                (click)="openURI($event, disablePasswordManagerURI)"
+                [attr.href]="disablePasswordManagerURI"
+              >
+                {{ "turnOffBrowserBuiltInPasswordManagerSettingsLink" | i18n }}
+              </a>
+            </bit-hint>
+          </bit-form-control>
+          <bit-form-control>
+            <input
+              bitCheckbox
+              id="showCardsSuggestions"
+              type="checkbox"
+              (change)="updateShowCardsCurrentTab()"
+              [(ngModel)]="showCardsCurrentTab"
+            />
+            <bit-label for="showCardsSuggestions">{{ "showCardsInVaultViewV2" | i18n }}</bit-label>
+          </bit-form-control>
+          <bit-form-control disableMargin>
+            <input
+              bitCheckbox
+              id="showIdentitiesSuggestions"
+              type="checkbox"
+              (change)="updateShowIdentitiesCurrentTab()"
+              [(ngModel)]="showIdentitiesCurrentTab"
+            />
+            <bit-label for="showIdentitiesSuggestions" class="tw-whitespace-normal">
+              {{ "showIdentitiesInVaultViewV2" | i18n }}
+            </bit-label>
+          </bit-form-control>
+        </bit-card>
+      </form>
     </bit-section>
     <bit-section>
       <bit-section-header>

apps/browser/src/autofill/popup/settings/autofill.component.ts

@@ -1,7 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { CommonModule } from "@angular/common";
-import { Component, DestroyRef, OnInit } from "@angular/core";
+import { Component, computed, DestroyRef, OnInit, Signal } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import {
   FormsModule,
@@ -102,6 +102,13 @@ export class AutofillComponent implements OnInit {
   protected autofillOnPageLoadFromPolicy$ =
     this.autofillSettingsService.activateAutofillOnPageLoadFromPolicy$;
 
+  protected autofillSuggestionsForm = new FormGroup({
+    inlineMenuVisibility: new FormControl(),
+    showInlineMenuIdentities: new FormControl(),
+    showInlineMenuCards: new FormControl(),
+    enableInlineMenuOnIconSelect: new FormControl(),
+  });
+
   protected autofillOnPageLoadForm = new FormGroup({
     autofillOnPageLoad: new FormControl(),
     defaultAutofill: new FormControl(),
@@ -115,7 +122,7 @@ export class AutofillComponent implements OnInit {
   });
 
   enableAutofillOnPageLoad: boolean = false;
-  enableInlineMenu: boolean = false;
+  enableInlineMenu: Signal<boolean>;
   enableInlineMenuOnIconSelect: boolean = false;
   showInlineMenuIdentities: boolean = true;
   showInlineMenuCards: boolean = true;
@@ -176,10 +183,19 @@ export class AutofillComponent implements OnInit {
     this.canOverrideBrowserAutofillSetting = !this.browserClientIsUnknown;
     this.defaultBrowserAutofillDisabled = await this.browserAutofillSettingCurrentlyOverridden();
 
+    /** Autofill suggestions form */
+
     this.inlineMenuVisibility = await firstValueFrom(
       this.autofillSettingsService.inlineMenuVisibility$,
     );
 
+    this.autofillSuggestionsForm.controls.inlineMenuVisibility.patchValue(
+      this.inlineMenuVisibility,
+      {
+        emitEvent: false,
+      },
+    );
+
     this.inlineMenuPositioningImprovementsEnabled = await this.configService.getFeatureFlag(
       FeatureFlag.InlineMenuPositioningImprovements,
     );
@@ -192,16 +208,62 @@ export class AutofillComponent implements OnInit {
       this.inlineMenuPositioningImprovementsEnabled &&
       (await firstValueFrom(this.autofillSettingsService.showInlineMenuIdentities$));
 
+    this.autofillSuggestionsForm.controls.showInlineMenuIdentities.patchValue(
+      this.showInlineMenuIdentities,
+      { emitEvent: false },
+    );
+
     this.showInlineMenuCards =
       this.inlineMenuPositioningImprovementsEnabled &&
       (await firstValueFrom(this.autofillSettingsService.showInlineMenuCards$));
 
+    this.autofillSuggestionsForm.controls.showInlineMenuCards.patchValue(this.showInlineMenuCards, {
+      emitEvent: false,
+    });
+
     this.enableInlineMenuOnIconSelect =
       this.inlineMenuVisibility === AutofillOverlayVisibility.OnButtonClick;
 
-    this.enableInlineMenu =
-      this.inlineMenuVisibility === AutofillOverlayVisibility.OnFieldFocus ||
-      this.enableInlineMenuOnIconSelect;
+    this.autofillSuggestionsForm.controls.enableInlineMenuOnIconSelect.patchValue(
+      this.enableInlineMenuOnIconSelect,
+      { emitEvent: false },
+    );
+
+    this.enableInlineMenu = computed(() => {
+      return (
+        this.autofillSuggestionsForm.controls.inlineMenuVisibility.value ===
+          AutofillOverlayVisibility.OnFieldFocus ||
+        this.autofillSuggestionsForm.controls.enableInlineMenuOnIconSelect.value
+      );
+    });
+
+    this.autofillSuggestionsForm.controls.inlineMenuVisibility.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((value) => {
+        void this.autofillSettingsService.setInlineMenuVisibility(value);
+        void this.updateInlineMenuVisibility();
+      });
+
+    this.autofillSuggestionsForm.controls.showInlineMenuIdentities.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((value) => {
+        void this.autofillSettingsService.setShowInlineMenuIdentities(value);
+      });
+
+    this.autofillSuggestionsForm.controls.showInlineMenuCards.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((value) => {
+        void this.autofillSettingsService.setShowInlineMenuCards(value);
+      });
+
+    this.autofillSuggestionsForm.controls.enableInlineMenuOnIconSelect.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((value) => {
+        void this.autofillSettingsService.set;
+        void this.updateInlineMenuVisibility();
+      });
+
+    /** Autofill on page load form */
 
     this.autofillSettingsService.activateAutofillOnPageLoadFromPolicy$
       .pipe(takeUntilDestroyed(this.destroyRef))
@@ -314,13 +376,16 @@ export class AutofillComponent implements OnInit {
   }
 
   async updateInlineMenuVisibility() {
-    if (!this.enableInlineMenu) {
+    if (!this.enableInlineMenu()) {
       this.enableInlineMenuOnIconSelect = false;
+      this.autofillSuggestionsForm.controls.enableInlineMenuOnIconSelect.patchValue(false, {
+        emitEvent: false,
+      });
     }
 
     const newInlineMenuVisibilityValue = this.enableInlineMenuOnIconSelect
       ? AutofillOverlayVisibility.OnButtonClick
-      : this.enableInlineMenu
+      : this.enableInlineMenu()
         ? AutofillOverlayVisibility.OnFieldFocus
         : AutofillOverlayVisibility.Off;
 
@@ -331,6 +396,7 @@ export class AutofillComponent implements OnInit {
       await this.requestPrivacyPermission();
     }
   }
+
   async getAutofillOnPageLoadFromPolicy() {
     await firstValueFrom(this.autofillOnPageLoadFromPolicy$);
   }
@@ -495,12 +561,4 @@ export class AutofillComponent implements OnInit {
   async updateShowIdentitiesCurrentTab() {
     await this.vaultSettingsService.setShowIdentitiesCurrentTab(this.showIdentitiesCurrentTab);
   }
-
-  async updateShowInlineMenuCards() {
-    await this.autofillSettingsService.setShowInlineMenuCards(this.showInlineMenuCards);
-  }
-
-  async updateShowInlineMenuIdentities() {
-    await this.autofillSettingsService.setShowInlineMenuIdentities(this.showInlineMenuIdentities);
-  }
 }