[PM-2014] feat: add passkey naming ui

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">

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 };
 

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": {