[PM-14423] item view security task (#13485)

* show pending change password tasks for ciphers in extension

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

@@ -3,6 +3,19 @@
     {{ "cardExpiredMessage" | i18n }}
   </bit-callout>
 
+  <ng-container *ngIf="isSecurityTasksEnabled$ | async">
+    <bit-callout
+      *ngIf="cipher?.login.uris.length > 0 && hadPendingChangePasswordTask"
+      type="warning"
+      [title]="''"
+    >
+      <i class="bwi bwi-exclamation-triangle tw-text-warning" aria-hidden="true"></i>
+      <a bitLink (click)="launchChangePassword()">
+        {{ "changeAtRiskPassword" | i18n }}
+        <i class="bwi bwi-popout tw-ml-1" aria-hidden="true"></i>
+      </a>
+    </bit-callout>
+  </ng-container>
   <!-- HELPER TEXT -->
   <p
     class="tw-text-sm tw-text-muted"
@@ -23,7 +36,15 @@
   </app-item-details-v2>
 
   <!-- LOGIN CREDENTIALS -->
-  <app-login-credentials-view *ngIf="hasLogin" [cipher]="cipher"></app-login-credentials-view>
+  <app-login-credentials-view
+    *ngIf="hasLogin"
+    [cipher]="cipher"
+    [activeUserId]="activeUserId$ | async"
+    [hadPendingChangePasswordTask]="
+      hadPendingChangePasswordTask && (isSecurityTasksEnabled$ | async)
+    "
+    (handleChangePassword)="launchChangePassword()"
+  ></app-login-credentials-view>
 
   <!-- AUTOFILL OPTIONS -->
   <app-autofill-options-view

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

@@ -1,6 +1,6 @@
 import { CommonModule } from "@angular/common";
 import { Component, Input, OnChanges, OnDestroy } from "@angular/core";
-import { firstValueFrom, map, Observable, Subject, takeUntil } from "rxjs";
+import { firstValueFrom, Observable, Subject, takeUntil } from "rxjs";
 
 import { CollectionService, CollectionView } from "@bitwarden/admin-console/common";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -12,11 +12,17 @@ import { Organization } from "@bitwarden/common/admin-console/models/domain/orga
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { isCardExpired } from "@bitwarden/common/autofill/utils";
-import { CollectionId } from "@bitwarden/common/types/guid";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { CollectionId, UserId } from "@bitwarden/common/types/guid";
 import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
-import { CalloutModule, SearchModule } from "@bitwarden/components";
+import { AnchorLinkDirective, CalloutModule, SearchModule } from "@bitwarden/components";
+
+import { ChangeLoginPasswordService } from "../abstractions/change-login-password.service";
+import { TaskService, SecurityTaskType } from "../tasks";
 
 import { AdditionalOptionsComponent } from "./additional-options/additional-options.component";
 import { AttachmentsV2ViewComponent } from "./attachments/attachments-v2-view.component";
@@ -48,12 +54,13 @@ import { ViewIdentitySectionsComponent } from "./view-identity-sections/view-ide
     ViewIdentitySectionsComponent,
     LoginCredentialsViewComponent,
     AutofillOptionsViewComponent,
+    AnchorLinkDirective,
   ],
 })
 export class CipherViewComponent implements OnChanges, OnDestroy {
   @Input({ required: true }) cipher: CipherView | null = null;
 
-  private activeUserId$ = this.accountService.activeAccount$.pipe(map((a) => a?.id));
+  activeUserId$ = getUserId(this.accountService.activeAccount$);
 
   /**
    * Optional list of collections the cipher is assigned to. If none are provided, they will be fetched using the
@@ -68,12 +75,18 @@ export class CipherViewComponent implements OnChanges, OnDestroy {
   folder$: Observable<FolderView | undefined> | undefined;
   private destroyed$: Subject<void> = new Subject();
   cardIsExpired: boolean = false;
+  hadPendingChangePasswordTask: boolean = false;
+  isSecurityTasksEnabled$ = this.configService.getFeatureFlag$(FeatureFlag.SecurityTasks);
 
   constructor(
     private organizationService: OrganizationService,
     private collectionService: CollectionService,
     private folderService: FolderService,
     private accountService: AccountService,
+    private defaultTaskService: TaskService,
+    private platformUtilsService: PlatformUtilsService,
+    private changeLoginPasswordService: ChangeLoginPasswordService,
+    private configService: ConfigService,
   ) {}
 
   async ngOnChanges() {
@@ -137,7 +150,11 @@ export class CipherViewComponent implements OnChanges, OnDestroy {
       );
     }
 
-    const userId = await firstValueFrom(getUserId(this.accountService.activeAccount$));
+    const userId = await firstValueFrom(this.activeUserId$);
+
+    if (this.cipher.edit && this.cipher.viewPassword) {
+      await this.checkPendingChangePasswordTasks(userId);
+    }
 
     if (this.cipher.organizationId && userId) {
       this.organization$ = this.organizationService
@@ -147,15 +164,29 @@ export class CipherViewComponent implements OnChanges, OnDestroy {
     }
 
     if (this.cipher.folderId) {
-      const activeUserId = await firstValueFrom(this.activeUserId$);
-
-      if (!activeUserId) {
-        return;
-      }
-
       this.folder$ = this.folderService
-        .getDecrypted$(this.cipher.folderId, activeUserId)
+        .getDecrypted$(this.cipher.folderId, userId)
         .pipe(takeUntil(this.destroyed$));
     }
   }
+
+  async checkPendingChangePasswordTasks(userId: UserId): Promise<void> {
+    const tasks = await firstValueFrom(this.defaultTaskService.pendingTasks$(userId));
+
+    this.hadPendingChangePasswordTask = tasks?.some((task) => {
+      return (
+        task.cipherId === this.cipher?.id && task.type === SecurityTaskType.UpdateAtRiskCredential
+      );
+    });
+  }
+
+  launchChangePassword = async () => {
+    if (this.cipher != null) {
+      const url = await this.changeLoginPasswordService.getChangePasswordUrl(this.cipher);
+      if (url == null) {
+        return;
+      }
+      this.platformUtilsService.launchUri(url);
+    }
+  };
 }

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

@@ -89,6 +89,12 @@
         (click)="logCopyEvent()"
       ></button>
     </bit-form-field>
+    <bit-hint *ngIf="hadPendingChangePasswordTask">
+      <a bitLink (click)="launchChangePasswordEvent()">
+        {{ "changeAtRiskPassword" | i18n }}
+        <i class="bwi bwi-popout tw-ml-1" aria-hidden="true"></i>
+      </a>
+    </bit-hint>
     <div
       *ngIf="showPasswordCount && passwordRevealed"
       [ngClass]="{ 'tw-mt-3': !cipher.login.totp, 'tw-mb-2': true }"

libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.spec.ts

@@ -8,6 +8,7 @@ import { EventCollectionService } from "@bitwarden/common/abstractions/event/eve
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions";
 import { EventType } from "@bitwarden/common/enums";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { UserId } from "@bitwarden/common/types/guid";
@@ -74,6 +75,7 @@ describe("LoginCredentialsViewComponent", () => {
         { provide: PlatformUtilsService, useValue: mock<PlatformUtilsService>() },
         { provide: ToastService, useValue: mock<ToastService>() },
         { provide: I18nService, useValue: { t: (...keys: string[]) => keys.join(" ") } },
+        { provide: ConfigService, useValue: mock<ConfigService>() },
       ],
     }).compileComponents();
 

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

@@ -1,7 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { CommonModule, DatePipe } from "@angular/common";
-import { Component, inject, Input } from "@angular/core";
+import { Component, EventEmitter, inject, Input, Output } from "@angular/core";
 import { Observable, switchMap } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -10,6 +10,7 @@ import { AccountService } from "@bitwarden/common/auth/abstractions/account.serv
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions";
 import { EventType } from "@bitwarden/common/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { UserId } from "@bitwarden/common/types/guid";
 import { PremiumUpgradePromptService } from "@bitwarden/common/vault/abstractions/premium-upgrade-prompt.service";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import {
@@ -17,6 +18,7 @@ import {
   SectionComponent,
   SectionHeaderComponent,
   TypographyModule,
+  LinkModule,
   IconButtonModule,
   BadgeModule,
   ColorPasswordModule,
@@ -46,10 +48,14 @@ type TotpCodeValues = {
     ColorPasswordModule,
     BitTotpCountdownComponent,
     ReadOnlyCipherCardComponent,
+    LinkModule,
   ],
 })
 export class LoginCredentialsViewComponent {
   @Input() cipher: CipherView;
+  @Input() activeUserId: UserId;
+  @Input() hadPendingChangePasswordTask: boolean;
+  @Output() handleChangePassword = new EventEmitter<void>();
 
   isPremium$: Observable<boolean> = this.accountService.activeAccount$.pipe(
     switchMap((account) =>
@@ -59,6 +65,7 @@ export class LoginCredentialsViewComponent {
   showPasswordCount: boolean = false;
   passwordRevealed: boolean = false;
   totpCodeCopyObj: TotpCodeValues;
+
   private datePipe = inject(DatePipe);
 
   constructor(
@@ -111,4 +118,8 @@ export class LoginCredentialsViewComponent {
       this.cipher.organizationId,
     );
   }
+
+  launchChangePasswordEvent(): void {
+    this.handleChangePassword.emit();
+  }
 }

libs/vault/src/services/default-change-login-password.service.ts

@@ -35,7 +35,7 @@ export class DefaultChangeLoginPasswordService implements ChangeLoginPasswordSer
     ]);
 
     if (!reliable || wellKnownChangeUrl == null) {
-      return cipher.login.uri;
+      return url.origin;
     }
 
     return wellKnownChangeUrl;