[PM-2014] feat: add passkey limit

apps/web/src/app/auth/settings/fido2-login-settings/fido2-login-settings.component.html

@@ -37,7 +37,9 @@
   </tr>
 </table>
 
-<ng-container *ngIf="hasData">
+<p bitTypography="body2" *ngIf="limitReached">{{ "passkeyLimitReachedInfo" | i18n }}</p>
+
+<ng-container *ngIf="hasData && !limitReached">
   <button
     *ngIf="hasCredentials"
     type="button"

apps/web/src/app/auth/settings/fido2-login-settings/fido2-login-settings.component.ts

@@ -19,6 +19,8 @@ import { openDeleteCredentialDialogComponent } from "./delete-credential-dialog/
 export class Fido2LoginSettingsComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();
 
+  protected readonly MaxCredentialCount = 5;
+
   protected credentials?: WebauthnCredentialView[];
   protected loading = true;
 
@@ -40,6 +42,10 @@ export class Fido2LoginSettingsComponent implements OnInit, OnDestroy {
     return this.credentials !== undefined;
   }
 
+  get limitReached() {
+    return this.credentials?.length >= this.MaxCredentialCount;
+  }
+
   ngOnInit(): void {
     this.webauthnService.credentials$
       .pipe(takeUntil(this.destroy$))

apps/web/src/locales/en/messages.json

@@ -682,6 +682,9 @@
   "removePasskeyInfo": {
     "message": "If all passkeys are removed, you will be unable to log into new devices without your master password."
   },
+  "passkeyLimitReachedInfo": {
+    "message": "Passkey limit reached. Remove a passkey to add another."
+  },
   "tryAgain": {
     "message": "Try again"
   },