[PM-7174] New Notifications Settings and Excluded Domains components (#10059)

* add v2 notification settings component * adjust filenames for future deprecation * drop popup tab navigation for the notification settings view * add refreshed excluded domains component * do not allow edits of pre-existing excluded domains * fix buttonType on bit-link button
2024-11-21 11:35:34 +01:00 · 2024-07-19 12:36:09 -04:00 · 2024-07-19 12:36:09 -04:00 · beeb0354fd
commit beeb0354fd
parent 11669da911
13 changed files with 683 additions and 284 deletions
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@ -736,6 +736,10 @@
  "newUri": {
    "message": "New URI"
  },
+  "addDomain": {
+    "message": "Add domain",
+    "description": "'Domain' here refers to an internet domain name (e.g. 'bitwarden.com') and the message in whole described the act of putting a domain value into the context."
+  },
  "addedItem": {
    "message": "Item added"
  },
@ -776,6 +780,9 @@
  "enableAddLoginNotification": {
    "message": "Ask to add login"
  },
+  "vaultSaveOptionsTitle": {
+    "message": "Save to vault options"
+  },
  "addLoginNotificationDesc": {
    "message": "Ask to add an item if one isn't found in your vault."
  },
@ -1967,6 +1974,10 @@
  "personalOwnershipPolicyInEffectImports": {
    "message": "An organization policy has blocked importing items into your individual vault."
  },
+  "domainsTitle": {
+    "message": "Domains",
+    "description": "A category title describing the concept of web domains"
+  },
  "excludedDomains": {
    "message": "Excluded domains"
  },
@ -1976,6 +1987,15 @@
  "excludedDomainsDescAlt": {
    "message": "Bitwarden will not ask to save login details for these domains for all logged in accounts. You must refresh the page for changes to take effect."
  },
+  "websiteItemLabel": {
+    "message": "Website $number$ (URI)",
+    "placeholders": {
+      "number": {
+        "content": "$1",
+        "example": "3"
+      }
+    }
+  },
  "excludedDomainsInvalidDomain": {
    "message": "$DOMAIN$ is not a valid domain",
    "placeholders": {
@ -1985,6 +2005,9 @@
      }
    }
  },
+  "excludedDomainsSavedSuccess": {
+    "message": "Excluded domain changes saved"
+  },
  "send": {
    "message": "Send",
    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
--- a/apps/browser/src/autofill/popup/settings/excluded-domains-v1.component.html
+++ b/apps/browser/src/autofill/popup/settings/excluded-domains-v1.component.html
@ -0,0 +1,91 @@
+<form #form (ngSubmit)="submit()">
+  <header>
+    <div class="left">
+      <button type="button" routerLink="/notifications">
+        <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">{{ "excludedDomains" | i18n }}</span>
+    </h1>
+    <div class="right">
+      <button type="submit">{{ "save" | i18n }}</button>
+    </div>
+  </header>
+  <main tabindex="-1">
+    <div class="box">
+      <div class="box-content">
+        <div class="box-footer" [ngStyle]="{ marginTop: '10px' }">
+          {{
+            accountSwitcherEnabled
+              ? ("excludedDomainsDescAlt" | i18n)
+              : ("excludedDomainsDesc" | i18n)
+          }}
+        </div>
+        <ng-container *ngIf="excludedDomains">
+          <div
+            class="box-content-row box-content-row-multi"
+            appBoxRow
+            *ngFor="let domain of excludedDomains; let i = index; trackBy: trackByFunction"
+          >
+            <button
+              type="button"
+              appStopClick
+              (click)="removeUri(i)"
+              appA11yTitle="{{ 'remove' | i18n }}"
+            >
+              <i class="bwi bwi-minus-circle bwi-lg" aria-hidden="true"></i>
+            </button>
+            <div class="row-main">
+              <label for="excludedDomain{{ i }}">{{ "uriPosition" | i18n: i + 1 }}</label>
+              <input
+                id="excludedDomain{{ i }}"
+                name="excludedDomain{{ i }}"
+                type="text"
+                [(ngModel)]="domain.uri"
+                placeholder="{{ 'ex' | i18n }} https://google.com"
+                inputmode="url"
+                appInputVerbatim
+              />
+              <label for="currentUris{{ i }}" class="sr-only">
+                {{ "currentUri" | i18n }} {{ i + 1 }}
+              </label>
+              <select
+                *ngIf="currentUris && currentUris.length"
+                id="currentUris{{ i }}"
+                name="currentUris{{ i }}"
+                [(ngModel)]="domain.uri"
+                [hidden]="!domain.showCurrentUris"
+              >
+                <option [ngValue]="null">-- {{ "select" | i18n }} --</option>
+                <option *ngFor="let u of currentUris" [ngValue]="u">{{ u }}</option>
+              </select>
+            </div>
+            <div class="action-buttons">
+              <button
+                type="button"
+                *ngIf="currentUris && currentUris.length"
+                class="row-btn"
+                appStopClick
+                appA11yTitle="{{ 'toggleCurrentUris' | i18n }}"
+                (click)="toggleUriInput(domain)"
+                [attr.aria-pressed]="domain.showCurrentUris === true"
+              >
+                <i aria-hidden="true" class="bwi bwi-lg bwi-list"></i>
+              </button>
+            </div>
+          </div>
+        </ng-container>
+        <button
+          type="button"
+          appStopClick
+          (click)="addUri()"
+          class="box-content-row box-content-row-newmulti single-line"
+        >
+          <i class="bwi bwi-plus-circle bwi-fw bwi-lg" aria-hidden="true"></i> {{ "newUri" | i18n }}
+        </button>
+      </div>
+    </div>
+  </main>
+</form>
--- a/apps/browser/src/autofill/popup/settings/excluded-domains-v1.component.ts
+++ b/apps/browser/src/autofill/popup/settings/excluded-domains-v1.component.ts
@ -0,0 +1,141 @@
+import { Component, NgZone, OnDestroy, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
+import { firstValueFrom } from "rxjs";
+
+import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
+import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { Utils } from "@bitwarden/common/platform/misc/utils";
+
+import { BrowserApi } from "../../../platform/browser/browser-api";
+import { enableAccountSwitching } from "../../../platform/flags";
+
+interface ExcludedDomain {
+  uri: string;
+  showCurrentUris: boolean;
+}
+
+const BroadcasterSubscriptionId = "excludedDomains";
+
+@Component({
+  selector: "app-excluded-domains-v1",
+  templateUrl: "excluded-domains-v1.component.html",
+})
+export class ExcludedDomainsV1Component implements OnInit, OnDestroy {
+  excludedDomains: ExcludedDomain[] = [];
+  existingExcludedDomains: ExcludedDomain[] = [];
+  currentUris: string[];
+  loadCurrentUrisTimeout: number;
+  accountSwitcherEnabled = false;
+
+  constructor(
+    private domainSettingsService: DomainSettingsService,
+    private i18nService: I18nService,
+    private router: Router,
+    private broadcasterService: BroadcasterService,
+    private ngZone: NgZone,
+    private platformUtilsService: PlatformUtilsService,
+  ) {
+    this.accountSwitcherEnabled = enableAccountSwitching();
+  }
+
+  async ngOnInit() {
+    const savedDomains = await firstValueFrom(this.domainSettingsService.neverDomains$);
+    if (savedDomains) {
+      for (const uri of Object.keys(savedDomains)) {
+        this.excludedDomains.push({ uri: uri, showCurrentUris: false });
+        this.existingExcludedDomains.push({ uri: uri, showCurrentUris: false });
+      }
+    }
+
+    await this.loadCurrentUris();
+
+    this.broadcasterService.subscribe(BroadcasterSubscriptionId, (message: any) => {
+      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      this.ngZone.run(async () => {
+        switch (message.command) {
+          case "tabChanged":
+          case "windowChanged":
+            if (this.loadCurrentUrisTimeout != null) {
+              window.clearTimeout(this.loadCurrentUrisTimeout);
+            }
+            this.loadCurrentUrisTimeout = window.setTimeout(
+              async () => await this.loadCurrentUris(),
+              500,
+            );
+            break;
+          default:
+            break;
+        }
+      });
+    });
+  }
+
+  ngOnDestroy() {
+    this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
+  }
+
+  async addUri() {
+    this.excludedDomains.push({ uri: "", showCurrentUris: false });
+  }
+
+  async removeUri(i: number) {
+    this.excludedDomains.splice(i, 1);
+  }
+
+  async submit() {
+    const savedDomains: { [name: string]: null } = {};
+    const newExcludedDomains = this.getNewlyAddedDomains(this.excludedDomains);
+    for (const domain of this.excludedDomains) {
+      const resp = newExcludedDomains.filter((e) => e.uri === domain.uri);
+      if (resp.length === 0) {
+        savedDomains[domain.uri] = null;
+      } else {
+        if (domain.uri && domain.uri !== "") {
+          const validDomain = Utils.getHostname(domain.uri);
+          if (!validDomain) {
+            this.platformUtilsService.showToast(
+              "error",
+              null,
+              this.i18nService.t("excludedDomainsInvalidDomain", domain.uri),
+            );
+            return;
+          }
+          savedDomains[validDomain] = null;
+        }
+      }
+    }
+
+    await this.domainSettingsService.setNeverDomains(savedDomains);
+    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    this.router.navigate(["/tabs/settings"]);
+  }
+
+  trackByFunction(index: number, item: any) {
+    return index;
+  }
+
+  getNewlyAddedDomains(domain: ExcludedDomain[]): ExcludedDomain[] {
+    const result = this.excludedDomains.filter(
+      (newDomain) =>
+        !this.existingExcludedDomains.some((oldDomain) => newDomain.uri === oldDomain.uri),
+    );
+    return result;
+  }
+
+  toggleUriInput(domain: ExcludedDomain) {
+    domain.showCurrentUris = !domain.showCurrentUris;
+  }
+
+  async loadCurrentUris() {
+    const tabs = await BrowserApi.tabsQuery({ windowType: "normal" });
+    if (tabs) {
+      const uriSet = new Set(tabs.map((tab) => Utils.getHostname(tab.url)));
+      uriSet.delete(null);
+      this.currentUris = Array.from(uriSet);
+    }
+  }
+}
--- a/apps/browser/src/autofill/popup/settings/excluded-domains.component.html
+++ b/apps/browser/src/autofill/popup/settings/excluded-domains.component.html
@ -1,91 +1,63 @@
-<form #form (ngSubmit)="submit()">
-  <header>
-    <div class="left">
-      <button type="button" routerLink="/notifications">
-        <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">{{ "excludedDomains" | i18n }}</span>
-    </h1>
-    <div class="right">
-      <button type="submit">{{ "save" | i18n }}</button>
-    </div>
-  </header>
-  <main tabindex="-1">
-    <div class="box">
-      <div class="box-content">
-        <div class="box-footer" [ngStyle]="{ marginTop: '10px' }">
+<popup-page>
+  <popup-header slot="header" pageTitle="{{ 'excludedDomains' | i18n }}" showBackButton>
+    <ng-container slot="end">
+      <app-pop-out></app-pop-out>
+    </ng-container>
+  </popup-header>
+
+  <div class="tw-bg-background-alt tw-p-2">
+    <p>
      {{
-            accountSwitcherEnabled
-              ? ("excludedDomainsDescAlt" | i18n)
-              : ("excludedDomainsDesc" | i18n)
+        accountSwitcherEnabled ? ("excludedDomainsDescAlt" | i18n) : ("excludedDomainsDesc" | i18n)
      }}
-        </div>
-        <ng-container *ngIf="excludedDomains">
-          <div
-            class="box-content-row box-content-row-multi"
-            appBoxRow
-            *ngFor="let domain of excludedDomains; let i = index; trackBy: trackByFunction"
+    </p>
+    <bit-section>
+      <bit-section-header>
+        <h2 bitTypography="h5">{{ "domainsTitle" | i18n }}</h2>
+        <span bitTypography="body2" slot="end">{{ excludedDomainsState?.length || 0 }}</span>
+      </bit-section-header>
+
+      <ng-container *ngIf="excludedDomainsState">
+        <bit-item
+          *ngFor="let domain of excludedDomainsState; let i = index; trackBy: trackByFunction"
        >
-            <button
-              type="button"
-              appStopClick
-              (click)="removeUri(i)"
-              appA11yTitle="{{ 'remove' | i18n }}"
-            >
-              <i class="bwi bwi-minus-circle bwi-lg" aria-hidden="true"></i>
-            </button>
-            <div class="row-main">
-              <label for="excludedDomain{{ i }}">{{ "uriPosition" | i18n: i + 1 }}</label>
+          <bit-item-content>
+            <bit-label *ngIf="i >= fieldsEditThreshold">{{
+              "websiteItemLabel" | i18n: i + 1
+            }}</bit-label>
            <input
+              *ngIf="i >= fieldsEditThreshold"
+              appInputVerbatim
+              bitInput
              id="excludedDomain{{ i }}"
+              inputmode="url"
              name="excludedDomain{{ i }}"
              type="text"
-                [(ngModel)]="domain.uri"
-                placeholder="{{ 'ex' | i18n }} https://google.com"
-                inputmode="url"
-                appInputVerbatim
+              (change)="fieldChange()"
+              [(ngModel)]="excludedDomainsState[i]"
            />
-              <label for="currentUris{{ i }}" class="sr-only">
-                {{ "currentUri" | i18n }} {{ i + 1 }}
-              </label>
-              <select
-                *ngIf="currentUris && currentUris.length"
-                id="currentUris{{ i }}"
-                name="currentUris{{ i }}"
-                [(ngModel)]="domain.uri"
-                [hidden]="!domain.showCurrentUris"
-              >
-                <option [ngValue]="null">-- {{ "select" | i18n }} --</option>
-                <option *ngFor="let u of currentUris" [ngValue]="u">{{ u }}</option>
-              </select>
-            </div>
-            <div class="action-buttons">
+            <div *ngIf="i < fieldsEditThreshold">{{ domain }}</div>
+          </bit-item-content>
          <button
+            *ngIf="i < fieldsEditThreshold"
+            appA11yTitle="{{ 'remove' | i18n }}"
+            bitIconButton="bwi-minus-circle"
+            buttonType="danger"
+            size="small"
+            slot="end"
            type="button"
-                *ngIf="currentUris && currentUris.length"
-                class="row-btn"
-                appStopClick
-                appA11yTitle="{{ 'toggleCurrentUris' | i18n }}"
-                (click)="toggleUriInput(domain)"
-                [attr.aria-pressed]="domain.showCurrentUris === true"
-              >
-                <i aria-hidden="true" class="bwi bwi-lg bwi-list"></i>
-              </button>
-            </div>
-          </div>
+            (click)="removeDomain(i)"
+          ></button>
+        </bit-item>
      </ng-container>
-        <button
-          type="button"
-          appStopClick
-          (click)="addUri()"
-          class="box-content-row box-content-row-newmulti single-line"
-        >
-          <i class="bwi bwi-plus-circle bwi-fw bwi-lg" aria-hidden="true"></i> {{ "newUri" | i18n }}
+      <button bitLink class="tw-pt-2" type="button" linkType="primary" (click)="addNewDomain()">
+        <i class="bwi bwi-plus-circle bwi-fw" aria-hidden="true"></i> {{ "addDomain" | i18n }}
      </button>
+    </bit-section>
  </div>
-    </div>
-  </main>
-</form>
+  <popup-footer slot="footer">
+    <button bitButton buttonType="primary" type="submit" (click)="saveChanges()">
+      {{ "save" | i18n }}
+    </button>
+  </popup-footer>
+</popup-page>
--- a/apps/browser/src/autofill/popup/settings/excluded-domains.component.ts
+++ b/apps/browser/src/autofill/popup/settings/excluded-domains.component.ts
@ -1,141 +1,166 @@
-import { Component, NgZone, OnDestroy, OnInit } from "@angular/core";
-import { Router } from "@angular/router";
+import { CommonModule } from "@angular/common";
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { Router, RouterModule } from "@angular/router";
 import { firstValueFrom } from "rxjs";

+import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
+import { NeverDomains } from "@bitwarden/common/models/domain/domain-service";
 import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
+import {
+  ButtonModule,
+  CardComponent,
+  FormFieldModule,
+  IconButtonModule,
+  ItemModule,
+  LinkModule,
+  SectionComponent,
+  SectionHeaderComponent,
+  TypographyModule,
+} from "@bitwarden/components";

-import { BrowserApi } from "../../../platform/browser/browser-api";
 import { enableAccountSwitching } from "../../../platform/flags";
+import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
+import { PopupFooterComponent } from "../../../platform/popup/layout/popup-footer.component";
+import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
+import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component";

-interface ExcludedDomain {
-  uri: string;
-  showCurrentUris: boolean;
-}
-
-const BroadcasterSubscriptionId = "excludedDomains";
+const BroadcasterSubscriptionId = "excludedDomainsState";

@Component({
  selector: "app-excluded-domains",
  templateUrl: "excluded-domains.component.html",
+  standalone: true,
+  imports: [
+    ButtonModule,
+    CardComponent,
+    CommonModule,
+    FormFieldModule,
+    FormsModule,
+    IconButtonModule,
+    ItemModule,
+    JslibModule,
+    LinkModule,
+    PopOutComponent,
+    PopupFooterComponent,
+    PopupHeaderComponent,
+    PopupPageComponent,
+    RouterModule,
+    SectionComponent,
+    SectionHeaderComponent,
+    TypographyModule,
+  ],
 })
 export class ExcludedDomainsComponent implements OnInit, OnDestroy {
-  excludedDomains: ExcludedDomain[] = [];
-  existingExcludedDomains: ExcludedDomain[] = [];
-  currentUris: string[];
-  loadCurrentUrisTimeout: number;
  accountSwitcherEnabled = false;
+  dataIsPristine = true;
+  excludedDomainsState: string[] = [];
+  storedExcludedDomains: string[] = [];
+  // How many fields should be non-editable before editable fields
+  fieldsEditThreshold: number = 0;

  constructor(
    private domainSettingsService: DomainSettingsService,
    private i18nService: I18nService,
    private router: Router,
    private broadcasterService: BroadcasterService,
-    private ngZone: NgZone,
    private platformUtilsService: PlatformUtilsService,
  ) {
    this.accountSwitcherEnabled = enableAccountSwitching();
  }

  async ngOnInit() {
-    const savedDomains = await firstValueFrom(this.domainSettingsService.neverDomains$);
-    if (savedDomains) {
-      for (const uri of Object.keys(savedDomains)) {
-        this.excludedDomains.push({ uri: uri, showCurrentUris: false });
-        this.existingExcludedDomains.push({ uri: uri, showCurrentUris: false });
-      }
+    const neverDomains = await firstValueFrom(this.domainSettingsService.neverDomains$);
+
+    if (neverDomains) {
+      this.storedExcludedDomains = Object.keys(neverDomains);
    }

-    await this.loadCurrentUris();
+    this.excludedDomainsState = [...this.storedExcludedDomains];

-    this.broadcasterService.subscribe(BroadcasterSubscriptionId, (message: any) => {
-      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      this.ngZone.run(async () => {
-        switch (message.command) {
-          case "tabChanged":
-          case "windowChanged":
-            if (this.loadCurrentUrisTimeout != null) {
-              window.clearTimeout(this.loadCurrentUrisTimeout);
-            }
-            this.loadCurrentUrisTimeout = window.setTimeout(
-              async () => await this.loadCurrentUris(),
-              500,
-            );
-            break;
-          default:
-            break;
-        }
-      });
-    });
+    // Do not allow the first x (pre-existing) fields to be edited
+    this.fieldsEditThreshold = this.storedExcludedDomains.length;
  }

  ngOnDestroy() {
    this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
  }

-  async addUri() {
-    this.excludedDomains.push({ uri: "", showCurrentUris: false });
+  async addNewDomain() {
+    // add empty field to the Domains list interface
+    this.excludedDomainsState.push("");
+
+    await this.fieldChange();
  }

-  async removeUri(i: number) {
-    this.excludedDomains.splice(i, 1);
+  async removeDomain(i: number) {
+    this.excludedDomainsState.splice(i, 1);
+
+    // if a pre-existing field was dropped, lower the edit threshold
+    if (i < this.fieldsEditThreshold) {
+      this.fieldsEditThreshold--;
    }

-  async submit() {
-    const savedDomains: { [name: string]: null } = {};
-    const newExcludedDomains = this.getNewlyAddedDomains(this.excludedDomains);
-    for (const domain of this.excludedDomains) {
-      const resp = newExcludedDomains.filter((e) => e.uri === domain.uri);
-      if (resp.length === 0) {
-        savedDomains[domain.uri] = null;
-      } else {
-        if (domain.uri && domain.uri !== "") {
-          const validDomain = Utils.getHostname(domain.uri);
-          if (!validDomain) {
+    await this.fieldChange();
+  }
+
+  async fieldChange() {
+    if (this.dataIsPristine) {
+      this.dataIsPristine = false;
+    }
+  }
+
+  async saveChanges() {
+    if (this.dataIsPristine) {
+      await this.router.navigate(["/notifications"]);
+
+      return;
+    }
+
+    const newExcludedDomainsSaveState: NeverDomains = {};
+    const uniqueExcludedDomains = new Set(this.excludedDomainsState);
+
+    for (const uri of uniqueExcludedDomains) {
+      if (uri && uri !== "") {
+        const validatedHost = Utils.getHostname(uri);
+
+        if (!validatedHost) {
          this.platformUtilsService.showToast(
            "error",
            null,
-              this.i18nService.t("excludedDomainsInvalidDomain", domain.uri),
+            this.i18nService.t("excludedDomainsInvalidDomain", uri),
          );
+
          return;
        }
-          savedDomains[validDomain] = null;
-        }
+
+        newExcludedDomainsSaveState[validatedHost] = null;
      }
    }

-    await this.domainSettingsService.setNeverDomains(savedDomains);
-    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    this.router.navigate(["/tabs/settings"]);
+    try {
+      await this.domainSettingsService.setNeverDomains(newExcludedDomainsSaveState);
+
+      this.platformUtilsService.showToast(
+        "success",
+        null,
+        this.i18nService.t("excludedDomainsSavedSuccess"),
+      );
+    } catch {
+      this.platformUtilsService.showToast("error", null, this.i18nService.t("unexpectedError"));
+
+      // Do not navigate on error
+      return;
    }

-  trackByFunction(index: number, item: any) {
+    await this.router.navigate(["/notifications"]);
+  }
+
+  trackByFunction(index: number, _: string) {
    return index;
  }
-
-  getNewlyAddedDomains(domain: ExcludedDomain[]): ExcludedDomain[] {
-    const result = this.excludedDomains.filter(
-      (newDomain) =>
-        !this.existingExcludedDomains.some((oldDomain) => newDomain.uri === oldDomain.uri),
-    );
-    return result;
-  }
-
-  toggleUriInput(domain: ExcludedDomain) {
-    domain.showCurrentUris = !domain.showCurrentUris;
-  }
-
-  async loadCurrentUris() {
-    const tabs = await BrowserApi.tabsQuery({ windowType: "normal" });
-    if (tabs) {
-      const uriSet = new Set(tabs.map((tab) => Utils.getHostname(tab.url)));
-      uriSet.delete(null);
-      this.currentUris = Array.from(uriSet);
-    }
-  }
 }
--- a/apps/browser/src/autofill/popup/settings/notifications-v1.component.html
+++ b/apps/browser/src/autofill/popup/settings/notifications-v1.component.html
@ -0,0 +1,89 @@
+<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">{{ "notifications" | i18n }}</span>
+  </h1>
+  <div class="right">
+    <app-pop-out></app-pop-out>
+  </div>
+</header>
+<main tabindex="-1">
+  <div class="box">
+    <div class="box-content">
+      <div class="box-content-row box-content-row-checkbox" appBoxRow>
+        <label for="use-passkeys">{{ "enableUsePasskeys" | i18n }}</label>
+        <input
+          id="use-passkeys"
+          type="checkbox"
+          aria-describedby="use-passkeysHelp"
+          (change)="updateEnablePasskeys()"
+          [(ngModel)]="enablePasskeys"
+        />
+      </div>
+    </div>
+    <div id="use-passkeysHelp" class="box-footer">
+      {{ "usePasskeysDesc" | i18n }}
+    </div>
+  </div>
+  <div class="box">
+    <div class="box-content">
+      <div class="box-content-row box-content-row-checkbox" appBoxRow>
+        <label for="addlogin-notification-bar">{{ "enableAddLoginNotification" | i18n }}</label>
+        <input
+          id="addlogin-notification-bar"
+          type="checkbox"
+          aria-describedby="addlogin-notification-barHelp"
+          (change)="updateAddLoginNotification()"
+          [(ngModel)]="enableAddLoginNotification"
+        />
+      </div>
+    </div>
+    <div id="addlogin-notification-barHelp" class="box-footer">
+      {{
+        accountSwitcherEnabled
+          ? ("addLoginNotificationDescAlt" | i18n)
+          : ("addLoginNotificationDesc" | i18n)
+      }}
+    </div>
+  </div>
+  <div class="box">
+    <div class="box-content">
+      <div class="box-content-row box-content-row-checkbox" appBoxRow>
+        <label for="changedpass-notification-bar">{{
+          "enableChangedPasswordNotification" | i18n
+        }}</label>
+        <input
+          id="changedpass-notification-bar"
+          type="checkbox"
+          aria-describedby="changedpass-notification-barHelp"
+          (change)="updateChangedPasswordNotification()"
+          [(ngModel)]="enableChangedPasswordNotification"
+        />
+      </div>
+    </div>
+    <div id="changedpass-notification-barHelp" class="box-footer">
+      {{
+        accountSwitcherEnabled
+          ? ("changedPasswordNotificationDescAlt" | i18n)
+          : ("changedPasswordNotificationDesc" | i18n)
+      }}
+    </div>
+  </div>
+  <div class="box list">
+    <div class="box-content single-line">
+      <button
+        type="button"
+        class="box-content-row box-content-row-flex text-default"
+        routerLink="/excluded-domains"
+      >
+        <div class="row-main">{{ "excludedDomains" | i18n }}</div>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
+      </button>
+    </div>
+  </div>
+</main>
--- a/apps/browser/src/autofill/popup/settings/notifications-v1.component.ts
+++ b/apps/browser/src/autofill/popup/settings/notifications-v1.component.ts
@ -0,0 +1,53 @@
+import { Component, OnInit } from "@angular/core";
+import { firstValueFrom } from "rxjs";
+
+import { UserNotificationSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/user-notification-settings.service";
+import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";
+
+import { enableAccountSwitching } from "../../../platform/flags";
+
+@Component({
+  selector: "autofill-notification-v1-settings",
+  templateUrl: "notifications-v1.component.html",
+})
+export class NotificationsSettingsV1Component implements OnInit {
+  enableAddLoginNotification = false;
+  enableChangedPasswordNotification = false;
+  enablePasskeys = true;
+  accountSwitcherEnabled = false;
+
+  constructor(
+    private userNotificationSettingsService: UserNotificationSettingsServiceAbstraction,
+    private vaultSettingsService: VaultSettingsService,
+  ) {
+    this.accountSwitcherEnabled = enableAccountSwitching();
+  }
+
+  async ngOnInit() {
+    this.enableAddLoginNotification = await firstValueFrom(
+      this.userNotificationSettingsService.enableAddedLoginPrompt$,
+    );
+
+    this.enableChangedPasswordNotification = await firstValueFrom(
+      this.userNotificationSettingsService.enableChangedPasswordPrompt$,
+    );
+
+    this.enablePasskeys = await firstValueFrom(this.vaultSettingsService.enablePasskeys$);
+  }
+
+  async updateAddLoginNotification() {
+    await this.userNotificationSettingsService.setEnableAddedLoginPrompt(
+      this.enableAddLoginNotification,
+    );
+  }
+
+  async updateChangedPasswordNotification() {
+    await this.userNotificationSettingsService.setEnableChangedPasswordPrompt(
+      this.enableChangedPasswordNotification,
+    );
+  }
+
+  async updateEnablePasskeys() {
+    await this.vaultSettingsService.setEnablePasskeys(this.enablePasskeys);
+  }
+}
--- a/apps/browser/src/autofill/popup/settings/notifications.component.html
+++ b/apps/browser/src/autofill/popup/settings/notifications.component.html
@ -1,89 +1,56 @@
-<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">{{ "notifications" | i18n }}</span>
-  </h1>
-  <div class="right">
+<popup-page>
+  <popup-header slot="header" pageTitle="{{ 'notifications' | i18n }}" showBackButton>
+    <ng-container slot="end">
      <app-pop-out></app-pop-out>
-  </div>
-</header>
-<main tabindex="-1">
-  <div class="box">
-    <div class="box-content">
-      <div class="box-content-row box-content-row-checkbox" appBoxRow>
-        <label for="use-passkeys">{{ "enableUsePasskeys" | i18n }}</label>
+    </ng-container>
+  </popup-header>
+
+  <div class="tw-bg-background-alt tw-p-2">
+    <bit-section>
+      <bit-section-header>
+        <h2 bitTypography="h5">{{ "vaultSaveOptionsTitle" | i18n }}</h2>
+      </bit-section-header>
+      <bit-card>
+        <div>
          <input
+            type="checkbox"
+            bitCheckbox
            id="use-passkeys"
            type="checkbox"
-          aria-describedby="use-passkeysHelp"
            (change)="updateEnablePasskeys()"
            [(ngModel)]="enablePasskeys"
          />
+          <label for="use-passkeys">{{ "enableUsePasskeys" | i18n }}</label>
        </div>
-    </div>
-    <div id="use-passkeysHelp" class="box-footer">
-      {{ "usePasskeysDesc" | i18n }}
-    </div>
-  </div>
-  <div class="box">
-    <div class="box-content">
-      <div class="box-content-row box-content-row-checkbox" appBoxRow>
-        <label for="addlogin-notification-bar">{{ "enableAddLoginNotification" | i18n }}</label>
+        <div>
          <input
            id="addlogin-notification-bar"
            type="checkbox"
-          aria-describedby="addlogin-notification-barHelp"
+            bitCheckbox
            (change)="updateAddLoginNotification()"
            [(ngModel)]="enableAddLoginNotification"
          />
+          <label for="addlogin-notification-bar">{{ "enableAddLoginNotification" | i18n }}</label>
        </div>
-    </div>
-    <div id="addlogin-notification-barHelp" class="box-footer">
-      {{
-        accountSwitcherEnabled
-          ? ("addLoginNotificationDescAlt" | i18n)
-          : ("addLoginNotificationDesc" | i18n)
-      }}
-    </div>
-  </div>
-  <div class="box">
-    <div class="box-content">
-      <div class="box-content-row box-content-row-checkbox" appBoxRow>
-        <label for="changedpass-notification-bar">{{
-          "enableChangedPasswordNotification" | i18n
-        }}</label>
+        <div>
          <input
            id="changedpass-notification-bar"
            type="checkbox"
-          aria-describedby="changedpass-notification-barHelp"
+            bitCheckbox
            (change)="updateChangedPasswordNotification()"
            [(ngModel)]="enableChangedPasswordNotification"
          />
+          <label for="changedpass-notification-bar">{{
+            "enableChangedPasswordNotification" | i18n
+          }}</label>
        </div>
+      </bit-card>
+    </bit-section>
+    <bit-section>
+      <bit-item>
+        <a bit-item-content routerLink="/excluded-domains">{{ "excludedDomains" | i18n }}</a>
+        <i slot="end" class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
+      </bit-item>
+    </bit-section>
  </div>
-    <div id="changedpass-notification-barHelp" class="box-footer">
-      {{
-        accountSwitcherEnabled
-          ? ("changedPasswordNotificationDescAlt" | i18n)
-          : ("changedPasswordNotificationDesc" | i18n)
-      }}
-    </div>
-  </div>
-  <div class="box list">
-    <div class="box-content single-line">
-      <button
-        type="button"
-        class="box-content-row box-content-row-flex text-default"
-        routerLink="/excluded-domains"
-      >
-        <div class="row-main">{{ "excludedDomains" | i18n }}</div>
-        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
-      </button>
-    </div>
-  </div>
-</main>
+</popup-page>
--- a/apps/browser/src/autofill/popup/settings/notifications.component.ts
+++ b/apps/browser/src/autofill/popup/settings/notifications.component.ts
@ -1,27 +1,57 @@
+import { CommonModule } from "@angular/common";
 import { Component, OnInit } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { RouterModule } from "@angular/router";
 import { firstValueFrom } from "rxjs";

+import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { UserNotificationSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/user-notification-settings.service";
 import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";
+import {
+  ItemModule,
+  CardComponent,
+  SectionComponent,
+  SectionHeaderComponent,
+  CheckboxModule,
+  TypographyModule,
+  FormFieldModule,
+} from "@bitwarden/components";

-import { enableAccountSwitching } from "../../../platform/flags";
+import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
+import { PopupFooterComponent } from "../../../platform/popup/layout/popup-footer.component";
+import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
+import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component";

@Component({
-  selector: "autofill-notification-settings",
  templateUrl: "notifications.component.html",
+  standalone: true,
+  imports: [
+    CommonModule,
+    JslibModule,
+    RouterModule,
+    PopupPageComponent,
+    PopupHeaderComponent,
+    PopupFooterComponent,
+    PopOutComponent,
+    ItemModule,
+    CardComponent,
+    SectionComponent,
+    SectionHeaderComponent,
+    CheckboxModule,
+    TypographyModule,
+    FormFieldModule,
+    FormsModule,
+  ],
 })
 export class NotificationsSettingsComponent implements OnInit {
  enableAddLoginNotification = false;
  enableChangedPasswordNotification = false;
  enablePasskeys = true;
-  accountSwitcherEnabled = false;

  constructor(
    private userNotificationSettingsService: UserNotificationSettingsServiceAbstraction,
    private vaultSettingsService: VaultSettingsService,
-  ) {
-    this.accountSwitcherEnabled = enableAccountSwitching();
-  }
+  ) {}

  async ngOnInit() {
    this.enableAddLoginNotification = await firstValueFrom(
--- a/apps/browser/src/popup/app-routing.module.ts
+++ b/apps/browser/src/popup/app-routing.module.ts
@ -39,7 +39,9 @@ import { TwoFactorOptionsComponent } from "../auth/popup/two-factor-options.comp
 import { TwoFactorComponent } from "../auth/popup/two-factor.component";
 import { UpdateTempPasswordComponent } from "../auth/popup/update-temp-password.component";
 import { AutofillComponent } from "../autofill/popup/settings/autofill.component";
+import { ExcludedDomainsV1Component } from "../autofill/popup/settings/excluded-domains-v1.component";
 import { ExcludedDomainsComponent } from "../autofill/popup/settings/excluded-domains.component";
+import { NotificationsSettingsV1Component } from "../autofill/popup/settings/notifications-v1.component";
 import { NotificationsSettingsComponent } from "../autofill/popup/settings/notifications.component";
 import { PremiumComponent } from "../billing/popup/settings/premium.component";
 import BrowserPopupUtils from "../platform/popup/browser-popup-utils";
@ -288,12 +290,12 @@ const routes: Routes = [
    canActivate: [AuthGuard],
    data: { state: "account-security" },
  },
-  {
+  ...extensionRefreshSwap(NotificationsSettingsV1Component, NotificationsSettingsComponent, {
    path: "notifications",
-    component: NotificationsSettingsComponent,
+    component: NotificationsSettingsV1Component,
    canActivate: [AuthGuard],
    data: { state: "notifications" },
-  },
+  }),
  ...extensionRefreshSwap(VaultSettingsComponent, VaultSettingsV2Component, {
    path: "vault-settings",
    canActivate: [AuthGuard],
@ -323,12 +325,12 @@ const routes: Routes = [
    canActivate: [AuthGuard],
    data: { state: "sync" },
  },
-  {
+  ...extensionRefreshSwap(ExcludedDomainsV1Component, ExcludedDomainsComponent, {
    path: "excluded-domains",
-    component: ExcludedDomainsComponent,
+    component: ExcludedDomainsV1Component,
    canActivate: [AuthGuard],
    data: { state: "excluded-domains" },
-  },
+  }),
  {
    path: "premium",
    component: PremiumComponent,
--- a/apps/browser/src/popup/app.module.ts
+++ b/apps/browser/src/popup/app.module.ts
@ -37,7 +37,9 @@ import { TwoFactorOptionsComponent } from "../auth/popup/two-factor-options.comp
 import { TwoFactorComponent } from "../auth/popup/two-factor.component";
 import { UpdateTempPasswordComponent } from "../auth/popup/update-temp-password.component";
 import { AutofillComponent } from "../autofill/popup/settings/autofill.component";
+import { ExcludedDomainsV1Component } from "../autofill/popup/settings/excluded-domains-v1.component";
 import { ExcludedDomainsComponent } from "../autofill/popup/settings/excluded-domains.component";
+import { NotificationsSettingsV1Component } from "../autofill/popup/settings/notifications-v1.component";
 import { NotificationsSettingsComponent } from "../autofill/popup/settings/notifications.component";
 import { PremiumComponent } from "../billing/popup/settings/premium.component";
 import { PopOutComponent } from "../platform/popup/components/pop-out.component";
@ -108,10 +110,12 @@ import "../platform/popup/locales";
    ScrollingModule,
    ServicesModule,
    DialogModule,
+    ExcludedDomainsComponent,
    FilePopoutCalloutComponent,
    AvatarModule,
    AccountComponent,
    ButtonModule,
+    NotificationsSettingsComponent,
    PopOutComponent,
    PopupPageComponent,
    PopupTabNavigationComponent,
@ -133,7 +137,7 @@ import "../platform/popup/locales";
    ColorPasswordCountPipe,
    CurrentTabComponent,
    EnvironmentComponent,
-    ExcludedDomainsComponent,
+    ExcludedDomainsV1Component,
    Fido2CipherRowComponent,
    Fido2UseBrowserLinkComponent,
    FolderAddEditComponent,
@ -146,7 +150,7 @@ import "../platform/popup/locales";
    LoginComponent,
    LoginViaAuthRequestComponent,
    LoginDecryptionOptionsComponent,
-    NotificationsSettingsComponent,
+    NotificationsSettingsV1Component,
    AppearanceComponent,
    GeneratorComponent,
    PasswordGeneratorHistoryComponent,
--- a/apps/browser/src/vault/popup/components/fido2/fido2-use-browser-link.component.ts
+++ b/apps/browser/src/vault/popup/components/fido2/fido2-use-browser-link.component.ts
@ -4,6 +4,7 @@ import { Component } from "@angular/core";
 import { firstValueFrom } from "rxjs";

 import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
+import { NeverDomains } from "@bitwarden/common/models/domain/domain-service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
@ -92,7 +93,7 @@ export class Fido2UseBrowserLinkComponent {
    const exisitingDomains = await firstValueFrom(this.domainSettingsService.neverDomains$);

    const validDomain = Utils.getHostname(uri);
-    const savedDomains: { [name: string]: unknown } = {
+    const savedDomains: NeverDomains = {
      ...exisitingDomains,
    };
    savedDomains[validDomain] = null;
--- a/libs/common/src/models/domain/domain-service.ts
+++ b/libs/common/src/models/domain/domain-service.ts
@ -20,5 +20,6 @@ export const UriMatchStrategy = {

 export type UriMatchStrategySetting = (typeof UriMatchStrategy)[keyof typeof UriMatchStrategy];

-export type NeverDomains = { [id: string]: unknown };
+// using uniqueness properties of object shape over Set for ease of state storability
+export type NeverDomains = { [id: string]: null };
 export type EquivalentDomains = string[][];