[PM-14421] Add temporary callout for at-risk tasks to browser vault view

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

@@ -2388,6 +2388,15 @@
       }
     }
   },
+  "reviewAndChangeAtRiskPasswords": {
+    "message": "Review and change $COUNT$ at-risk passwords",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "2"
+      }
+    }
+  },
   "websiteItemLabel": {
     "message": "Website $number$ (URI)",
     "placeholders": {

apps/browser/src/vault/popup/components/at-risk-callout/at-risk-password-callout.component.html

@@ -0,0 +1,6 @@
+<bit-callout *ngIf="(pendingTasks$ | async)?.length as taskCount" type="warning" [title]="''">
+  <i class="bwi bwi-exclamation-triangle tw-text-warning" aria-hidden="true"></i>
+  <a bitLink [routerLink]="'/at-risk-passwords'">
+    {{ "reviewAndChangeAtRiskPasswords" | i18n: taskCount.toString() }}
+  </a>
+</bit-callout>

apps/browser/src/vault/popup/components/at-risk-callout/at-risk-password-callout.component.ts

@@ -0,0 +1,32 @@
+import { CommonModule } from "@angular/common";
+import { Component, inject } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { map, switchMap } from "rxjs";
+
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { AnchorLinkDirective, CalloutModule } from "@bitwarden/components";
+import { I18nPipe } from "@bitwarden/ui-common";
+import { filterOutNullish, SecurityTaskType, TaskService } from "@bitwarden/vault";
+
+// TODO: This component will need to be reworked to use the new EndUserNotificationService in PM-10609
+
+@Component({
+  selector: "vault-at-risk-password-callout",
+  standalone: true,
+  imports: [CommonModule, AnchorLinkDirective, RouterModule, CalloutModule, I18nPipe],
+  templateUrl: "./at-risk-password-callout.component.html",
+})
+export class AtRiskPasswordCalloutComponent {
+  private taskService = inject(TaskService);
+  private activeAccount$ = inject(AccountService).activeAccount$.pipe(filterOutNullish());
+
+  protected pendingTasks$ = this.activeAccount$.pipe(
+    switchMap((user) =>
+      this.taskService
+        .pendingTasks$(user.id)
+        .pipe(
+          map((tasks) => tasks.filter((t) => t.type === SecurityTaskType.UpdateAtRiskCredential)),
+        ),
+    ),
+  );
+}

apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html

@@ -32,6 +32,9 @@
     slot="above-scroll-area"
     *ngIf="vaultState !== VaultStateEnum.Empty && !(loading$ | async)"
   >
+    <vault-at-risk-password-callout
+      *appIfFeature="FeatureFlag.SecurityTasks"
+    ></vault-at-risk-password-callout>
     <app-vault-header-v2></app-vault-header-v2>
   </ng-container>
 

apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts

@@ -7,10 +7,17 @@ import { combineLatest, Observable, shareReplay, switchMap } from "rxjs";
 import { filter, map, take } from "rxjs/operators";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { CipherId, CollectionId, OrganizationId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
-import { ButtonModule, DialogService, Icons, NoItemsModule } from "@bitwarden/components";
+import {
+  BannerComponent,
+  ButtonModule,
+  DialogService,
+  Icons,
+  NoItemsModule,
+} from "@bitwarden/components";
 import { DecryptionFailureDialogComponent, VaultIcons } from "@bitwarden/vault";
 
 import { CurrentAccountComponent } from "../../../../auth/popup/account-switching/current-account.component";
@@ -19,6 +26,7 @@ import { PopupHeaderComponent } from "../../../../platform/popup/layout/popup-he
 import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page.component";
 import { VaultPopupItemsService } from "../../services/vault-popup-items.service";
 import { VaultPopupListFiltersService } from "../../services/vault-popup-list-filters.service";
+import { AtRiskPasswordCalloutComponent } from "../at-risk-callout/at-risk-password-callout.component";
 
 import { BlockedInjectionBanner } from "./blocked-injection-banner/blocked-injection-banner.component";
 import {
@@ -56,6 +64,8 @@ enum VaultState {
     ScrollingModule,
     VaultHeaderV2Component,
     DecryptionFailureDialogComponent,
+    BannerComponent,
+    AtRiskPasswordCalloutComponent,
   ],
 })
 export class VaultV2Component implements OnInit, OnDestroy {
@@ -135,4 +145,6 @@ export class VaultV2Component implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {}
+
+  protected readonly FeatureFlag = FeatureFlag;
 }