[SG-901] Relocate Autofill on page load setting (#4629)

* [SG-901] Relocate Autofill on page load setting

apps/browser/src/popup/app-routing.module.ts

@@ -32,6 +32,7 @@ import { SendAddEditComponent } from "./send/send-add-edit.component";
 import { SendGroupingsComponent } from "./send/send-groupings.component";
 import { SendTypeComponent } from "./send/send-type.component";
 import { DebounceNavigationService } from "./services/debounceNavigationService";
+import { AutofillComponent } from "./settings/autofill.component";
 import { ExcludedDomainsComponent } from "./settings/excluded-domains.component";
 import { ExportComponent } from "./settings/export.component";
 import { FolderAddEditComponent } from "./settings/folder-add-edit.component";
@@ -187,6 +188,12 @@ const routes: Routes = [
     canActivate: [AuthGuard],
     data: { state: "export" },
   },
+  {
+    path: "autofill",
+    component: AutofillComponent,
+    canActivate: [AuthGuard],
+    data: { state: "autofill" },
+  },
   {
     path: "folders",
     component: FoldersComponent,

apps/browser/src/popup/app.module.ts

@@ -62,6 +62,7 @@ import { SendGroupingsComponent } from "./send/send-groupings.component";
 import { SendTypeComponent } from "./send/send-type.component";
 import { ServicesModule } from "./services/services.module";
 import { AboutComponent } from "./settings/about.component";
+import { AutofillComponent } from "./settings/autofill.component";
 import { ExcludedDomainsComponent } from "./settings/excluded-domains.component";
 import { ExportComponent } from "./settings/export.component";
 import { FolderAddEditComponent } from "./settings/folder-add-edit.component";
@@ -147,6 +148,7 @@ import { TabsComponent } from "./tabs.component";
     RemovePasswordComponent,
     VaultSelectComponent,
     AboutComponent,
+    AutofillComponent,
   ],
   providers: [CurrencyPipe, DatePipe],
   bootstrap: [AppComponent],

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

@@ -0,0 +1,74 @@
+<header>
+  <div class="left">
+    <button type="button" routerLink="/tabs/settings">
+      <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
+      <span>{{ "back" | i18n }}</span>
+    </button>
+  </div>
+  <h1 class="center">
+    <span class="title">{{ "autofill" | i18n }}</span>
+  </h1>
+  <div class="right"></div>
+</header>
+<main tabindex="-1">
+  <div class="box">
+    <div class="box-content">
+      <div class="box-content-row box-content-row-checkbox" appBoxRow>
+        <label for="autofill">{{ "enableAutoFillOnPageLoad" | i18n }}</label>
+        <input
+          id="autofill"
+          type="checkbox"
+          aria-describedby="autofillHelp"
+          (change)="updateAutoFillOnPageLoad()"
+          [(ngModel)]="enableAutoFillOnPageLoad"
+        />
+      </div>
+    </div>
+    <div id="autofillHelp" class="box-footer">
+      {{ "enableAutoFillOnPageLoadDesc" | i18n }}
+      <b>{{ "warning" | i18n }}</b
+      >: {{ "experimentalFeature" | i18n }}
+    </div>
+  </div>
+  <div class="box">
+    <div class="box-content">
+      <div class="box-content-row" appBoxRow>
+        <label for="defaultAutofill">{{ "defaultAutoFillOnPageLoad" | i18n }}</label>
+        <select
+          id="defaultAutofill"
+          name="DefaultAutofill"
+          aria-describedby="defaultAutofillHelp"
+          [(ngModel)]="autoFillOnPageLoadDefault"
+          (change)="updateAutoFillOnPageLoadDefault()"
+          [disabled]="!enableAutoFillOnPageLoad"
+        >
+          <option *ngFor="let o of autoFillOnPageLoadOptions" [ngValue]="o.value">
+            {{ o.name }}
+          </option>
+        </select>
+      </div>
+    </div>
+    <div id="defaultAutofillHelp" class="box-footer">
+      {{ "defaultAutoFillOnPageLoadDesc" | i18n }}
+    </div>
+  </div>
+  <div class="box">
+    <div class="box-content">
+      <div class="box-content-row" appBoxRow>
+        <label for="defaultUriMatch">{{ "defaultUriMatchDetection" | i18n }}</label>
+        <select
+          id="defaultUriMatch"
+          name="DefaultUriMatch"
+          aria-describedby="defaultUriMatchHelp"
+          [(ngModel)]="defaultUriMatch"
+          (change)="saveDefaultUriMatch()"
+        >
+          <option *ngFor="let o of uriMatchOptions" [ngValue]="o.value">{{ o.name }}</option>
+        </select>
+      </div>
+    </div>
+    <div id="defaultUriMatchHelp" class="box-footer">
+      {{ "defaultUriMatchDetectionDesc" | i18n }}
+    </div>
+  </div>
+</main>

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

@@ -0,0 +1,54 @@
+import { Component, OnInit } from "@angular/core";
+
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { StateService } from "@bitwarden/common/abstractions/state.service";
+import { UriMatchType } from "@bitwarden/common/enums/uriMatchType";
+
+@Component({
+  selector: "app-autofill",
+  templateUrl: "autofill.component.html",
+})
+export class AutofillComponent implements OnInit {
+  enableAutoFillOnPageLoad = false;
+  autoFillOnPageLoadDefault = false;
+  autoFillOnPageLoadOptions: any[];
+  defaultUriMatch = UriMatchType.Domain;
+  uriMatchOptions: any[];
+
+  constructor(private stateService: StateService, i18nService: I18nService) {
+    this.autoFillOnPageLoadOptions = [
+      { name: i18nService.t("autoFillOnPageLoadYes"), value: true },
+      { name: i18nService.t("autoFillOnPageLoadNo"), value: false },
+    ];
+    this.uriMatchOptions = [
+      { name: i18nService.t("baseDomain"), value: UriMatchType.Domain },
+      { name: i18nService.t("host"), value: UriMatchType.Host },
+      { name: i18nService.t("startsWith"), value: UriMatchType.StartsWith },
+      { name: i18nService.t("regEx"), value: UriMatchType.RegularExpression },
+      { name: i18nService.t("exact"), value: UriMatchType.Exact },
+      { name: i18nService.t("never"), value: UriMatchType.Never },
+    ];
+  }
+
+  async ngOnInit() {
+    this.enableAutoFillOnPageLoad = await this.stateService.getEnableAutoFillOnPageLoad();
+
+    this.autoFillOnPageLoadDefault =
+      (await this.stateService.getAutoFillOnPageLoadDefault()) ?? true;
+
+    const defaultUriMatch = await this.stateService.getDefaultUriMatch();
+    this.defaultUriMatch = defaultUriMatch == null ? UriMatchType.Domain : defaultUriMatch;
+  }
+
+  async updateAutoFillOnPageLoad() {
+    await this.stateService.setEnableAutoFillOnPageLoad(this.enableAutoFillOnPageLoad);
+  }
+
+  async updateAutoFillOnPageLoadDefault() {
+    await this.stateService.setAutoFillOnPageLoadDefault(this.autoFillOnPageLoadDefault);
+  }
+
+  async saveDefaultUriMatch() {
+    await this.stateService.setDefaultUriMatch(this.defaultUriMatch);
+  }
+}

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

@@ -26,25 +26,6 @@
     </h2>
   </div>
   <ng-container *ngIf="showGeneral">
-    <div class="box">
-      <div class="box-content">
-        <div class="box-content-row" appBoxRow>
-          <label for="defaultUriMatch">{{ "defaultUriMatchDetection" | i18n }}</label>
-          <select
-            id="defaultUriMatch"
-            name="DefaultUriMatch"
-            aria-describedby="defaultUriMatchHelp"
-            [(ngModel)]="defaultUriMatch"
-            (change)="saveDefaultUriMatch()"
-          >
-            <option *ngFor="let o of uriMatchOptions" [ngValue]="o.value">{{ o.name }}</option>
-          </select>
-        </div>
-      </div>
-      <div id="defaultUriMatchHelp" class="box-footer">
-        {{ "defaultUriMatchDetectionDesc" | i18n }}
-      </div>
-    </div>
     <div class="box" *ngIf="showClearClipboard">
       <div class="box-content">
         <div class="box-content-row" appBoxRow>
@@ -228,61 +209,4 @@
       <div id="themeHelp" class="box-footer">{{ "themeDesc" | i18n }}</div>
     </div>
   </ng-container>
-  <div class="box box-section-divider">
-    <h2>
-      <button
-        type="button"
-        class="box-header-expandable"
-        (click)="showAutofill = !showAutofill"
-        [attr.aria-expanded]="showAutofill"
-      >
-        <i *ngIf="!showAutofill" class="bwi bwi-angle-right bwi-sm icon" aria-hidden="true"></i>
-        <i *ngIf="showAutofill" class="bwi bwi-angle-down bwi-sm icon" aria-hidden="true"></i>
-        Autofill
-      </button>
-    </h2>
-  </div>
-  <ng-container *ngIf="showAutofill">
-    <div class="box">
-      <div class="box-content">
-        <div class="box-content-row box-content-row-checkbox" appBoxRow>
-          <label for="autofill">{{ "enableAutoFillOnPageLoad" | i18n }}</label>
-          <input
-            id="autofill"
-            type="checkbox"
-            aria-describedby="autofillHelp"
-            (change)="updateAutoFillOnPageLoad()"
-            [(ngModel)]="enableAutoFillOnPageLoad"
-          />
-        </div>
-      </div>
-      <div id="autofillHelp" class="box-footer">
-        {{ "enableAutoFillOnPageLoadDesc" | i18n }}
-        <b>{{ "warning" | i18n }}</b
-        >: {{ "experimentalFeature" | i18n }}
-      </div>
-    </div>
-    <div class="box">
-      <div class="box-content">
-        <div class="box-content-row" appBoxRow>
-          <label for="defaultAutofill">{{ "defaultAutoFillOnPageLoad" | i18n }}</label>
-          <select
-            id="defaultAutofill"
-            name="DefaultAutofill"
-            aria-describedby="defaultAutofillHelp"
-            [(ngModel)]="autoFillOnPageLoadDefault"
-            (change)="updateAutoFillOnPageLoadDefault()"
-            [disabled]="!enableAutoFillOnPageLoad"
-          >
-            <option *ngFor="let o of autoFillOnPageLoadOptions" [ngValue]="o.value">
-              {{ o.name }}
-            </option>
-          </select>
-        </div>
-      </div>
-      <div id="defaultAutofillHelp" class="box-footer">
-        {{ "defaultAutoFillOnPageLoadDesc" | i18n }}
-      </div>
-    </div>
-  </ng-container>
 </main>

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

@@ -11,6 +11,14 @@
   <div class="box list">
     <h2 class="box-header">{{ "manage" | i18n }}</h2>
     <div class="box-content single-line">
+      <button
+        type="button"
+        class="box-content-row box-content-row-flex text-default"
+        routerLink="/autofill"
+      >
+        <div class="row-main">{{ "autofill" | i18n }}</div>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
+      </button>
       <button
         type="button"
         class="box-content-row box-content-row-flex text-default"