[PM-32016] - make at-risk banner dismissable

apps/browser/src/vault/popup/components/vault/view/view.component.html

@@ -11,7 +11,7 @@
   </popup-header>
 
   @if (cipher) {
-    <app-cipher-view [cipher]="cipher">
+    <app-cipher-view [cipher]="cipher" [allowDismissAtRiskCallout]="true">
       @if (showAutofillButton()) {
         <button
           type="button"

libs/state/src/core/state-definitions.ts

@@ -230,6 +230,9 @@ export const VAULT_AUTOFILL_SIMPLIFIED_ICON = new StateDefinition(
   "disk",
 );
 export const VAULT_AT_RISK_PASSWORDS_MEMORY = new StateDefinition("vaultAtRiskPasswords", "memory");
+export const VAULT_AT_RISK_VIEW_DISK_LOCAL = new StateDefinition("vaultAtRiskView", "disk", {
+  web: "disk-local",
+});
 export const WELCOME_EXTENSION_DIALOG_DISK = new StateDefinition(
   "vaultWelcomeExtensionDialogDismissed",
   "disk",

libs/vault/src/cipher-view/cipher-view.component.html

@@ -11,7 +11,33 @@
     {{ "changeAtRiskPasswordAndAddWebsite" | i18n }}
   </bit-callout>
 
-  <bit-callout *ngIf="showChangePasswordLink()" type="warning" [title]="''">
+  <bit-callout
+    *ngIf="showChangePasswordLink() && !allowDismissAtRiskCallout()"
+    type="warning"
+    [title]="''"
+  >
+    @if (changePasswordLink()) {
+      <a
+        bitLink
+        [href]="changePasswordLink()"
+        appStopClick
+        (click)="launchChangePassword()"
+        linkType="secondary"
+        endIcon="bwi-external-link"
+      >
+        {{ "changeAtRiskPassword" | i18n }}
+      </a>
+    } @else {
+      {{ "changeAtRiskPassword" | i18n }}
+    }
+  </bit-callout>
+
+  <bit-callout
+    *ngIf="showAtRiskCallout() && allowDismissAtRiskCallout()"
+    type="warning"
+    [title]="''"
+    (dismiss)="dismissAtRiskCallout()"
+  >
     @if (changePasswordLink()) {
       <a
         bitLink

libs/vault/src/cipher-view/cipher-view.component.ts

@@ -1,7 +1,17 @@
 import { CommonModule } from "@angular/common";
 import { Component, computed, input, resource } from "@angular/core";
 import { toObservable, toSignal } from "@angular/core/rxjs-interop";
-import { combineLatest, of, switchMap, map, catchError, from, Observable, startWith } from "rxjs";
+import {
+  combineLatest,
+  firstValueFrom,
+  of,
+  switchMap,
+  map,
+  catchError,
+  from,
+  Observable,
+  startWith,
+} from "rxjs";
 
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
 // eslint-disable-next-line no-restricted-imports
@@ -16,6 +26,11 @@ import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abs
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { getByIds } from "@bitwarden/common/platform/misc";
+import {
+  StateProvider,
+  UserKeyDefinition,
+  VAULT_AT_RISK_VIEW_DISK_LOCAL,
+} from "@bitwarden/common/platform/state";
 import { CipherId, EmergencyAccessId, UserId } from "@bitwarden/common/types/guid";
 import { ChangeLoginPasswordService } from "@bitwarden/common/vault/abstractions/change-login-password.service";
 import {
@@ -47,6 +62,18 @@ import { LoginCredentialsViewComponent } from "./login-credentials/login-credent
 import { SshKeyViewComponent } from "./sshkey-sections/sshkey-view.component";
 import { ViewIdentitySectionsComponent } from "./view-identity-sections/view-identity-sections.component";
 
+/** Maps cipher ID → passwordRevisionDate ISO string at time of dismissal (null = no revision date). */
+export type DismissedAtRiskCipherRecord = Record<string, string | null>;
+
+export const DISMISSED_AT_RISK_CIPHERS_KEY = new UserKeyDefinition<DismissedAtRiskCipherRecord>(
+  VAULT_AT_RISK_VIEW_DISK_LOCAL,
+  "dismissedAtRiskCiphers",
+  {
+    deserializer: (obj) => obj ?? {},
+    clearOn: ["logout"],
+  },
+);
+
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
@@ -99,6 +126,12 @@ export class CipherViewComponent {
    */
   readonly isAdminConsole = input<boolean>(false);
 
+  /**
+   * When true, the at-risk password callout displays an "X" dismiss button.
+   * Should only be set on browser extension and web app.
+   */
+  readonly allowDismissAtRiskCallout = input<boolean>(false);
+
   readonly activeUserId$ = getUserId(this.accountService.activeAccount$);
 
   constructor(
@@ -114,6 +147,7 @@ export class CipherViewComponent {
     private cipherRiskService: CipherRiskService,
     private billingAccountService: BillingAccountProfileStateService,
     private vaultSettingsService: VaultSettingsService,
+    private stateProvider: StateProvider,
   ) {}
 
   readonly resolvedCollections = toSignal<CollectionView[] | undefined>(
@@ -285,6 +319,41 @@ export class CipherViewComponent {
     );
   });
 
+  protected readonly atRiskBannerDismissed = toSignal(
+    combineLatest([this.activeUserId$, this.cipher$]).pipe(
+      switchMap(([userId, cipher]) =>
+        this.stateProvider.getUser(userId, DISMISSED_AT_RISK_CIPHERS_KEY).state$.pipe(
+          map((dismissed) => {
+            if (!dismissed || !(cipher.id in dismissed)) {
+              return false;
+            }
+            const storedRevDate = dismissed[cipher.id];
+            const currentRevDate = cipher.login?.passwordRevisionDate?.toISOString() ?? null;
+            return storedRevDate === currentRevDate;
+          }),
+        ),
+      ),
+    ),
+    { initialValue: false },
+  );
+
+  readonly showAtRiskCallout = computed(() => {
+    return this.showChangePasswordLink() && !this.atRiskBannerDismissed();
+  });
+
+  protected readonly dismissAtRiskCallout = async () => {
+    const cipher = this.cipher();
+    const userId = await firstValueFrom(this.activeUserId$);
+    if (!cipher || !userId) {
+      return;
+    }
+    const revDate = cipher.login?.passwordRevisionDate?.toISOString() ?? null;
+    await this.stateProvider.getUser(userId, DISMISSED_AT_RISK_CIPHERS_KEY).update((state) => ({
+      ...(state ?? {}),
+      [cipher.id]: revDate,
+    }));
+  };
+
   readonly showAtRiskPasswordNotifications = toSignal(
     this.vaultSettingsService.showAtRiskPasswordNotifications$,
   );

libs/vault/src/vault-item-dialog/vault-item-dialog.component.html

@@ -13,6 +13,7 @@
         [cipher]="cipher"
         [collections]="collections"
         [isAdminConsole]="formConfig.isAdminConsole"
+        [allowDismissAtRiskCallout]="true"
       ></app-cipher-view>
     }