From 46ed70bd7afe41968ed554a8ce1c7322b0740b28 Mon Sep 17 00:00:00 2001
From: Andreas Coroiu <andreas.coroiu@gmail.com>
Date: Thu, 11 May 2023 10:31:32 +0200
Subject: [PATCH] [PM-2014] feat: show `save` if passkeys already exist

---
 .../create-credential-dialog.component.html          |  2 +-
 .../create-credential-dialog.component.ts            | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/auth/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.html b/apps/web/src/app/auth/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.html
index 44ac9d92b9c..e807cb7a2be 100644
--- a/apps/web/src/app/auth/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.html
+++ b/apps/web/src/app/auth/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.html
@@ -59,7 +59,7 @@
           {{ "tryAgain" | i18n }}
         </ng-container>
         <ng-container *ngIf="currentStep === 'credentialNaming'">
-          {{ "turnOn" | i18n }}
+          {{ ((hasPasskeys$ | async) ? "save" : "turnOn ") | i18n }}
         </ng-container>
       </button>
       <button type="button" bitButton bitFormButton buttonType="secondary" bitDialogClose>
diff --git a/apps/web/src/app/auth/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.ts b/apps/web/src/app/auth/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.ts
index 0c8095297c2..362aca1f82d 100644
--- a/apps/web/src/app/auth/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.ts
+++ b/apps/web/src/app/auth/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.ts
@@ -1,6 +1,7 @@
 import { DialogConfig, DialogRef } from "@angular/cdk/dialog";
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
+import { map, Observable } from "rxjs";
 
 import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { VerificationType } from "@bitwarden/common/auth/enums/verification-type";
@@ -24,7 +25,7 @@ type Step =
 @Component({
   templateUrl: "create-credential-dialog.component.html",
 })
-export class CreateCredentialDialogComponent {
+export class CreateCredentialDialogComponent implements OnInit {
   protected readonly NameMaxCharacters = 50;
   protected readonly CreateCredentialDialogResult = CreateCredentialDialogResult;
   protected readonly Icons = { CreatePasskeyIcon, CreatePasskeyFailedIcon };
@@ -40,6 +41,7 @@ export class CreateCredentialDialogComponent {
   });
   protected credentialOptions?: CredentialCreateOptionsView;
   protected deviceResponse?: PublicKeyCredential;
+  protected hasPasskeys$?: Observable<boolean>;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -47,6 +49,12 @@ export class CreateCredentialDialogComponent {
     private webauthnService: WebauthnService
   ) {}
 
+  ngOnInit(): void {
+    this.hasPasskeys$ = this.webauthnService.credentials$.pipe(
+      map((credentials) => credentials.length > 0)
+    );
+  }
+
   protected submit = async () => {
     this.dialogRef.disableClose = true;