From 92e97d722bbdacf3f3ddcd32d2e1d05abf9db341 Mon Sep 17 00:00:00 2001
From: Andreas Coroiu <andreas.coroiu@gmail.com>
Date: Mon, 8 May 2023 16:26:17 +0200
Subject: [PATCH] [PM-2014] feat: add passkey naming ui

---
 .../create-credential-dialog.component.html   | 15 ++++++++++++-
 .../create-credential-dialog.component.ts     |  1 +
 apps/web/src/locales/en/messages.json         | 22 +++++++++++++++++++
 3 files changed, 37 insertions(+), 1 deletion(-)

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 82877573e3e..86f665f4a30 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
@@ -32,7 +32,20 @@
         <p bitTypography="body1">{{ "errorCreatingPasskeyInfo" | i18n }}</p>
       </div>
 
-      <div *ngIf="currentStep === 'credentialNaming'">Name your credential plz</div>
+      <div *ngIf="currentStep === 'credentialNaming'">
+        <h3 bitTypography="h3">{{ "passkeySuccessfullyCreated" | i18n }}</h3>
+        <p bitTypography="body1">
+          {{ "customPasskeyNameInfo" | i18n }}
+        </p>
+        <bit-form-field disableMargin formGroupName="credentialNaming">
+          <bit-label>{{ "customName" | i18n }}</bit-label>
+          <input type="text" bitInput formControlName="name" />
+          <bit-hint>{{
+            "charactersCurrentAndMaximum"
+              | i18n : formGroup.value.credentialNaming.name.length : NameMaxCharacters
+          }}</bit-hint>
+        </bit-form-field>
+      </div>
     </ng-container>
     <ng-container bitDialogFooter>
       <button type="submit" bitButton bitFormButton buttonType="primary">
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 81e30cff858..83a8aa0246a 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
@@ -26,6 +26,7 @@ type Step =
   templateUrl: "create-credential-dialog.component.html",
 })
 export class CreateCredentialDialogComponent {
+  protected readonly NameMaxCharacters = 50;
   protected readonly CreateCredentialDialogResult = CreateCredentialDialogResult;
   protected readonly Icons = { CreatePasskeyIcon, CreatePasskeyFailedIcon };
 
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 840bb343627..b3b02399c5d 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -655,6 +655,15 @@
   "errorCreatingPasskeyInfo": {
     "message": "There was a problem creating your passkey."
   },
+  "passkeySuccessfullyCreated": {
+    "message": "Passkey successfully created!"
+  },
+  "customName": {
+    "message": "Custom name"
+  },
+  "customPasskeyNameInfo": {
+    "message": "Name your passkey to help you identify it."
+  },
   "tryAgain": {
     "message": "Try again"
   },
@@ -5389,6 +5398,19 @@
   "required": {
     "message": "required"
   },
+  "charactersCurrentAndMaximum": {
+    "message": "$CURRENT$/$MAX$ character maximum",
+    "placeholders": {
+      "current": {
+        "content": "$1",
+        "example": "0"
+      },
+      "max": {
+        "content": "$2",
+        "example": "100"
+      }
+    }
+  },
   "characterMaximum": {
     "message": "$MAX$ character maximum",
     "placeholders": {