browser/apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.html

<form [formGroup]="formGroup" [bitSubmit]="submit">
  <bit-dialog dialogSize="large">
    <span bitDialogTitle
      >{{ "loginWithPasskey" | i18n }}
      <span class="tw-text-sm tw-normal-case tw-text-muted">{{ "newPasskey" | i18n }}</span>
    </span>
    <ng-container bitDialogContent>
      <ng-container *ngIf="currentStep === 'userVerification'">
        <p bitTypography="body1">
          {{ "passkeyEnterMasterPassword" | i18n }}
        </p>
        <bit-form-field disableMargin formGroupName="userVerification">
          <bit-label>{{ "masterPassword" | i18n }}</bit-label>
          <input type="password" bitInput formControlName="masterPassword" appAutofocus />
          <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
          <bit-hint>{{ "confirmIdentity" | i18n }}</bit-hint>
        </bit-form-field>
      </ng-container>

      <div *ngIf="currentStep === 'credentialCreation'" class="tw-flex tw-flex-col tw-items-center">
        <bit-icon [icon]="Icons.CreatePasskeyIcon" class="tw-mb-6"></bit-icon>
        <h3 bitTypography="h3">{{ "creatingPasskeyLoading" | i18n }}</h3>
        <p bitTypography="body1">{{ "creatingPasskeyLoadingInfo" | i18n }}</p>
      </div>

      <div
        *ngIf="currentStep === 'credentialCreationFailed'"
        class="tw-flex tw-flex-col tw-items-center"
      >
        <bit-icon [icon]="Icons.CreatePasskeyFailedIcon" class="tw-mb-6"></bit-icon>
        <h3 bitTypography="h3">{{ "errorCreatingPasskey" | i18n }}</h3>
        <p bitTypography="body1">{{ "errorCreatingPasskeyInfo" | i18n }}</p>
      </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" appAutofocus />
          <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">
        <ng-container *ngIf="currentStep === 'userVerification'">
          {{ "continue" | i18n }}
        </ng-container>
        <ng-container *ngIf="currentStep === 'credentialCreation'">
          {{ "continue" | i18n }}
        </ng-container>
        <ng-container *ngIf="currentStep === 'credentialCreationFailed'">
          {{ "tryAgain" | i18n }}
        </ng-container>
        <ng-container *ngIf="currentStep === 'credentialNaming'">
          {{ ((hasPasskeys$ | async) ? "save" : "enable") | i18n }}
        </ng-container>
      </button>
      <button type="button" bitButton bitFormButton buttonType="secondary" bitDialogClose>
        {{ "cancel" | i18n }}
      </button>
    </ng-container>
  </bit-dialog>
</form>