share fingerprint dialog between desktop and browser

apps/browser/src/popup/settings/fingerprint-dialog.component.ts

@@ -1,33 +0,0 @@
-import { DIALOG_DATA } from "@angular/cdk/dialog";
-import { Component, Inject } from "@angular/core";
-
-import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
-import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
-import {
-  AsyncActionsModule,
-  ButtonModule,
-  DialogModule,
-  DialogService,
-} from "@bitwarden/components";
-
-export type FingerprintDialogData = {
-  fingerprint: string;
-};
-
-@Component({
-  templateUrl: "fingerprint-dialog.component.html",
-  standalone: true,
-  imports: [JslibModule, ButtonModule, DialogModule, AsyncActionsModule],
-})
-export class FingerprintDialogComponent {
-  constructor(
-    @Inject(DIALOG_DATA) protected data: FingerprintDialogData,
-    private cryptoService: CryptoService,
-    private stateService: StateService
-  ) {}
-
-  static open(dialogService: DialogService, data: FingerprintDialogData) {
-    return dialogService.open(FingerprintDialogComponent, { data });
-  }
-}

apps/browser/src/popup/settings/settings.component.ts

@@ -17,6 +17,7 @@ import {
 } from "rxjs";
 
 import { ModalService } from "@bitwarden/angular/services/modal.service";
+import { FingerprintDialogComponent } from "@bitwarden/auth";
 import { VaultTimeoutSettingsService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout-settings.service";
 import { VaultTimeoutService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout.service";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
@@ -39,7 +40,6 @@ import { PopupUtilsService } from "../services/popup-utils.service";
 
 import { AboutComponent } from "./about.component";
 import { AwaitDesktopDialogComponent } from "./await-desktop-dialog.component";
-import { FingerprintDialogComponent } from "./fingerprint-dialog.component";
 
 const RateUrls = {
   [DeviceType.ChromeExtension]:
@@ -485,9 +485,9 @@ export class SettingsComponent implements OnInit {
   }
 
   async fingerprint() {
-    const fingerprint = await this.cryptoService
+    const fingerprint = await this.cryptoService.getFingerprint(
-      .getFingerprint(await this.stateService.getUserId())
+      await this.stateService.getUserId()
-      .then((rawFingerprint) => rawFingerprint.join("-"));
+    );
 
     const dialogRef = FingerprintDialogComponent.open(this.dialogService, {
       fingerprint,

apps/desktop/src/app/app.component.ts

@@ -16,6 +16,7 @@ import { firstValueFrom, Subject, takeUntil } from "rxjs";
 
 import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
+import { FingerprintDialogComponent } from "@bitwarden/auth";
 import { EventUploadService } from "@bitwarden/common/abstractions/event/event-upload.service";
 import { NotificationsService } from "@bitwarden/common/abstractions/notifications.service";
 import { SearchService } from "@bitwarden/common/abstractions/search.service";
@@ -244,18 +245,8 @@ export class AppComponent implements OnInit, OnDestroy {
             const fingerprint = await this.cryptoService.getFingerprint(
               await this.stateService.getUserId()
             );
-            const result = await this.dialogService.openSimpleDialog({
+            const dialogRef = FingerprintDialogComponent.open(this.dialogService, { fingerprint });
-              title: { key: "fingerprintPhrase" },
+            await firstValueFrom(dialogRef.closed);
-              content:
-                this.i18nService.t("yourAccountsFingerprint") + ":\n" + fingerprint.join("-"),
-              acceptButtonText: { key: "learnMore" },
-              cancelButtonText: { key: "close" },
-              type: "info",
-            });
-
-            if (result) {
-              this.platformUtilsService.launchUri("https://bitwarden.com/help/fingerprint-phrase/");
-            }
             break;
           }
           case "deleteAccount":

libs/auth/src/components/fingerprint-dialog.component.html

@@ -1,22 +1,23 @@
 <bit-simple-dialog>
+  <i bitDialogIcon class="bwi bwi-info-circle tw-text-3xl" aria-hidden="true"></i>
   <span bitDialogTitle>{{ "yourAccountsFingerprint" | i18n }}:</span>
   <span bitDialogContent>
-    <strong>{{ data.fingerprint }}</strong>
+    {{ data.fingerprint.join("-") }}
   </span>
   <ng-container bitDialogFooter>
-    <button bitButton type="button" buttonType="secondary" bitDialogClose>
-      {{ "close" | i18n }}
-    </button>
     <a
       bitButton
       href="https://bitwarden.com/help/fingerprint-phrase/"
       target="_blank"
       rel="noopener"
-      type="button"
       buttonType="primary"
       bitDialogClose
     >
       {{ "learnMore" | i18n }}
+      <i class="bwi bwi-external-link bwi-fw" aria-hidden="true"></i>
     </a>
+    <button bitButton type="button" buttonType="secondary" bitDialogClose>
+      {{ "close" | i18n }}
+    </button>
   </ng-container>
 </bit-simple-dialog>

libs/auth/src/components/fingerprint-dialog.component.ts

@@ -0,0 +1,22 @@
+import { DIALOG_DATA } from "@angular/cdk/dialog";
+import { Component, Inject } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ButtonModule, DialogModule, DialogService } from "@bitwarden/components";
+
+export type FingerprintDialogData = {
+  fingerprint: string[];
+};
+
+@Component({
+  templateUrl: "fingerprint-dialog.component.html",
+  standalone: true,
+  imports: [JslibModule, ButtonModule, DialogModule],
+})
+export class FingerprintDialogComponent {
+  constructor(@Inject(DIALOG_DATA) protected data: FingerprintDialogData) {}
+
+  static open(dialogService: DialogService, data: FingerprintDialogData) {
+    return dialogService.open(FingerprintDialogComponent, { data });
+  }
+}

libs/auth/src/index.ts

@@ -0,0 +1 @@
+export * from "./components/fingerprint-dialog.component";