[PM-13251] Password History (#11618)

* add password history view component in vault lib

* integrate PasswordHistoryView into individual vault

* add password history v2 to browser extension

* update color of password history link

* add check for `cipherId` before rendering password history

apps/web/src/app/vault/individual-vault/password-history.component.html

@@ -3,34 +3,7 @@
     {{ "passwordHistory" | i18n }}
   </span>
   <ng-container bitDialogContent>
-    <div *ngIf="history && history.length">
-      <bit-item *ngFor="let h of history">
-        <div class="tw-pl-3 tw-py-2">
-          <bit-color-password
-            class="tw-text-base"
-            [password]="h.password"
-            [showCount]="false"
-          ></bit-color-password>
-          <div class="tw-text-sm tw-text-muted">{{ h.lastUsedDate | date: "medium" }}</div>
-        </div>
-        <ng-container slot="end">
-          <bit-item-action>
-            <button
-              type="button"
-              bitIconButton="bwi-clone"
-              aria-label="Copy"
-              appStopClick
-              (click)="copy(h.password)"
-            >
-              <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-            </button>
-          </bit-item-action>
-        </ng-container>
-      </bit-item>
-    </div>
-    <div class="no-items" *ngIf="!history || !history.length">
-      <p>{{ "noPasswordsInList" | i18n }}</p>
-    </div>
+    <vault-password-history-view [cipherId]="cipherId" />
   </ng-container>
   <ng-container bitDialogFooter>
     <button bitButton (click)="close()" buttonType="primary" type="button">

apps/web/src/app/vault/individual-vault/password-history.component.ts

@@ -1,22 +1,11 @@
 import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
 import { CommonModule } from "@angular/common";
-import { OnInit, Inject, Component } from "@angular/core";
-import { firstValueFrom, map } from "rxjs";
+import { Inject, Component } from "@angular/core";
 
-import { WINDOW } from "@bitwarden/angular/services/injection-tokens";
-import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { CipherId, UserId } from "@bitwarden/common/types/guid";
-import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+import { CipherId } from "@bitwarden/common/types/guid";
 import { PasswordHistoryView } from "@bitwarden/common/vault/models/view/password-history.view";
-import {
-  AsyncActionsModule,
-  DialogModule,
-  DialogService,
-  ToastService,
-  ItemModule,
-} from "@bitwarden/components";
+import { AsyncActionsModule, DialogModule, DialogService } from "@bitwarden/components";
+import { PasswordHistoryViewComponent } from "@bitwarden/vault";
 
 import { SharedModule } from "../../shared/shared.module";
 
@@ -34,9 +23,15 @@ export interface ViewPasswordHistoryDialogParams {
   selector: "app-vault-password-history",
   templateUrl: "password-history.component.html",
   standalone: true,
-  imports: [CommonModule, AsyncActionsModule, DialogModule, ItemModule, SharedModule],
+  imports: [
+    CommonModule,
+    AsyncActionsModule,
+    DialogModule,
+    SharedModule,
+    PasswordHistoryViewComponent,
+  ],
 })
-export class PasswordHistoryComponent implements OnInit {
+export class PasswordHistoryComponent {
   /**
    * The ID of the cipher to display the password history for.
    */
@@ -50,22 +45,10 @@ export class PasswordHistoryComponent implements OnInit {
   /**
    * The constructor for the password history dialog component.
    * @param params The parameters passed to the password history dialog.
-   * @param cipherService The cipher service - used to get the cipher to display the password history for.
-   * @param platformUtilsService The platform utils service - used to copy passwords to the clipboard.
-   * @param i18nService The i18n service - used to translate strings.
-   * @param accountService The account service - used to get the active account to decrypt the cipher.
-   * @param win The window object - used to copy passwords to the clipboard.
-   * @param toastService The toast service - used to display feedback to the user when a password is copied.
    * @param dialogRef The dialog reference - used to close the dialog.
    **/
   constructor(
     @Inject(DIALOG_DATA) public params: ViewPasswordHistoryDialogParams,
-    protected cipherService: CipherService,
-    protected platformUtilsService: PlatformUtilsService,
-    protected i18nService: I18nService,
-    protected accountService: AccountService,
-    @Inject(WINDOW) private win: Window,
-    protected toastService: ToastService,
     private dialogRef: DialogRef<PasswordHistoryComponent>,
   ) {
     /**
@@ -74,44 +57,6 @@ export class PasswordHistoryComponent implements OnInit {
     this.cipherId = params.cipherId;
   }
 
-  async ngOnInit() {
-    await this.init();
-  }
-
-  /**
-   * Copies a password to the clipboard.
-   * @param password The password to copy.
-   */
-  copy(password: string) {
-    const copyOptions = this.win != null ? { window: this.win } : undefined;
-    this.platformUtilsService.copyToClipboard(password, copyOptions);
-    this.toastService.showToast({
-      variant: "info",
-      title: "",
-      message: this.i18nService.t("valueCopied", this.i18nService.t("password")),
-    });
-  }
-
-  /**
-   * Initializes the password history dialog component.
-   */
-  protected async init() {
-    const cipher = await this.cipherService.get(this.cipherId);
-    const activeAccount = await firstValueFrom(
-      this.accountService.activeAccount$.pipe(map((a: { id: string | undefined }) => a)),
-    );
-
-    if (!activeAccount || !activeAccount.id) {
-      throw new Error("Active account is not available.");
-    }
-
-    const activeUserId = activeAccount.id as UserId;
-    const decCipher = await cipher.decrypt(
-      await this.cipherService.getKeyForCipherKeyDecryption(cipher, activeUserId),
-    );
-    this.history = decCipher.passwordHistory == null ? [] : decCipher.passwordHistory;
-  }
-
   /**
    * Closes the password history dialog.
    */

apps/web/src/locales/en/messages.json

@@ -663,6 +663,9 @@
     "message": "Copy password",
     "description": "Copy password to clipboard"
   },
+  "passwordCopied": {
+    "message": "Password copied"
+  },
   "copyUsername": {
     "message": "Copy username",
     "description": "Copy username to clipboard"