Merge branch 'main' into autofill/pm-6426-create-alarms-manager-and-update-usage-of-long-lived-timeouts-rework

apps/browser/src/_locales/en/messages.json

@@ -3035,6 +3035,9 @@
   "accountSecurity": {
     "message": "Account security"
   },
+  "notifications": {
+    "message": "Notifications"
+  }, 
   "appearance": {
     "message": "Appearance"
   },

apps/browser/src/autofill/popup/settings/excluded-domains.component.html

@@ -1,7 +1,7 @@
 <form #form (ngSubmit)="submit()">
   <header>
     <div class="left">
-      <button type="button" routerLink="/tabs/settings">
+      <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>

apps/browser/src/autofill/popup/settings/excluded-domains.component.ts

@@ -8,8 +8,8 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 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";
+import { BrowserApi } from "../../../platform/browser/browser-api";
+import { enableAccountSwitching } from "../../../platform/flags";
 
 interface ExcludedDomain {
   uri: string;

apps/browser/src/autofill/popup/settings/notifications.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>

apps/browser/src/autofill/popup/settings/notifications.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-settings",
+  templateUrl: "notifications.component.html",
+})
+export class NotifcationsSettingsComponent 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);
+  }
+}

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

@@ -196,9 +196,6 @@ export const routerTransition = trigger("routerTransition", [
   transition("vault-settings => sync", inSlideLeft),
   transition("sync => vault-settings", outSlideRight),
 
-  transition("tabs => excluded-domains", inSlideLeft),
-  transition("excluded-domains => tabs", outSlideRight),
-
   transition("tabs => options", inSlideLeft),
   transition("options => tabs", outSlideRight),
 
@@ -223,6 +220,13 @@ export const routerTransition = trigger("routerTransition", [
   transition("tabs => edit-send, send-type => edit-send", inSlideUp),
   transition("edit-send => tabs, edit-send => send-type", outSlideDown),
 
+  // Notification settings
+  transition("tabs => notifications", inSlideLeft),
+  transition("notifications => tabs", outSlideRight),
+
+  transition("notifications => excluded-domains", inSlideLeft),
+  transition("excluded-domains => notifications", outSlideRight),
+
   transition("tabs => autofill", inSlideLeft),
   transition("autofill => tabs", outSlideRight),
 

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

@@ -27,6 +27,8 @@ 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 { ExcludedDomainsComponent } from "../autofill/popup/settings/excluded-domains.component";
+import { NotifcationsSettingsComponent } from "../autofill/popup/settings/notifications.component";
 import { PremiumComponent } from "../billing/popup/settings/premium.component";
 import BrowserPopupUtils from "../platform/popup/browser-popup-utils";
 import { GeneratorComponent } from "../tools/popup/generator/generator.component";
@@ -56,7 +58,6 @@ import { VaultSettingsComponent } from "../vault/popup/settings/vault-settings.c
 
 import { extensionRefreshRedirect, extensionRefreshSwap } from "./extension-refresh-route-utils";
 import { debounceNavigationGuard } from "./services/debounce-navigation.service";
-import { ExcludedDomainsComponent } from "./settings/excluded-domains.component";
 import { HelpAndFeedbackComponent } from "./settings/help-and-feedback.component";
 import { OptionsComponent } from "./settings/options.component";
 import { TabsV2Component } from "./tabs-v2.component";
@@ -256,6 +257,12 @@ const routes: Routes = [
     canActivate: [AuthGuard],
     data: { state: "account-security" },
   },
+  {
+    path: "notifications",
+    component: NotifcationsSettingsComponent,
+    canActivate: [AuthGuard],
+    data: { state: "notifications" },
+  },
   {
     path: "vault-settings",
     component: VaultSettingsComponent,

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

@@ -37,6 +37,8 @@ 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 { ExcludedDomainsComponent } from "../autofill/popup/settings/excluded-domains.component";
+import { NotifcationsSettingsComponent } from "../autofill/popup/settings/notifications.component";
 import { PremiumComponent } from "../billing/popup/settings/premium.component";
 import { HeaderComponent } from "../platform/popup/header.component";
 import { PopupFooterComponent } from "../platform/popup/layout/popup-footer.component";
@@ -81,7 +83,6 @@ import { AppComponent } from "./app.component";
 import { PopOutComponent } from "./components/pop-out.component";
 import { UserVerificationComponent } from "./components/user-verification.component";
 import { ServicesModule } from "./services/services.module";
-import { ExcludedDomainsComponent } from "./settings/excluded-domains.component";
 import { HelpAndFeedbackComponent } from "./settings/help-and-feedback.component";
 import { OptionsComponent } from "./settings/options.component";
 import { TabsV2Component } from "./tabs-v2.component";
@@ -149,6 +150,7 @@ import "../platform/popup/locales";
     LoginViaAuthRequestComponent,
     LoginDecryptionOptionsComponent,
     OptionsComponent,
+    NotifcationsSettingsComponent,
     AppearanceComponent,
     GeneratorComponent,
     PasswordGeneratorHistoryComponent,

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

@@ -30,17 +30,17 @@
       <button
         type="button"
         class="box-content-row box-content-row-flex text-default"
-        routerLink="/vault-settings"
+        routerLink="/notifications"
       >
-        <div class="row-main">{{ "vault" | i18n }}</div>
+        <div class="row-main">{{ "notifications" | 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"
-        routerLink="/excluded-domains"
+        routerLink="/vault-settings"
       >
-        <div class="row-main">{{ "excludedDomains" | i18n }}</div>
+        <div class="row-main">{{ "vault" | i18n }}</div>
         <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </button>
     </div>

apps/web/src/app/app.component.ts

@@ -2,7 +2,17 @@ import { DOCUMENT } from "@angular/common";
 import { Component, Inject, NgZone, OnDestroy, OnInit } from "@angular/core";
 import { NavigationEnd, Router } from "@angular/router";
 import * as jq from "jquery";
-import { Subject, filter, firstValueFrom, map, switchMap, takeUntil, timeout, timer } from "rxjs";
+import {
+  Subject,
+  combineLatest,
+  filter,
+  firstValueFrom,
+  map,
+  switchMap,
+  takeUntil,
+  timeout,
+  timer,
+} from "rxjs";
 
 import { EventUploadService } from "@bitwarden/common/abstractions/event/event-upload.service";
 import { NotificationsService } from "@bitwarden/common/abstractions/notifications.service";
@@ -15,6 +25,7 @@ import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
 import { KeyConnectorService } from "@bitwarden/common/auth/abstractions/key-connector.service";
 import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
 import { PaymentMethodWarningsServiceAbstraction as PaymentMethodWarningService } from "@bitwarden/common/billing/abstractions/payment-method-warnings-service.abstraction";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
@@ -241,8 +252,12 @@ export class AppComponent implements OnDestroy, OnInit {
       new SendOptionsPolicy(),
     ]);
 
-    this.paymentMethodWarningsRefresh$
+    combineLatest([
+      this.configService.getFeatureFlag$(FeatureFlag.ShowPaymentMethodWarningBanners),
+      this.paymentMethodWarningsRefresh$,
+    ])
       .pipe(
+        filter(([showPaymentMethodWarningBanners]) => showPaymentMethodWarningBanners),
         switchMap(() => this.organizationService.memberOrganizations$),
         switchMap(
           async (organizations) =>