From f8f7615f6c4294b3bb7e2dac762ca77e2587d959 Mon Sep 17 00:00:00 2001
From: Andreas Coroiu <andreas.coroiu@gmail.com>
Date: Thu, 11 May 2023 13:48:45 +0200
Subject: [PATCH] [PM-2014] feat: add passkey limit

---
 .../fido2-login-settings.component.html                     | 4 +++-
 .../fido2-login-settings/fido2-login-settings.component.ts  | 6 ++++++
 apps/web/src/locales/en/messages.json                       | 3 +++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/app/auth/settings/fido2-login-settings/fido2-login-settings.component.html b/apps/web/src/app/auth/settings/fido2-login-settings/fido2-login-settings.component.html
index 7f412d24264..3e25a4b05a0 100644
--- a/apps/web/src/app/auth/settings/fido2-login-settings/fido2-login-settings.component.html
+++ b/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"
diff --git a/apps/web/src/app/auth/settings/fido2-login-settings/fido2-login-settings.component.ts b/apps/web/src/app/auth/settings/fido2-login-settings/fido2-login-settings.component.ts
index 975d50adc32..b66d945ebf3 100644
--- a/apps/web/src/app/auth/settings/fido2-login-settings/fido2-login-settings.component.ts
+++ b/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$))
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 355b1be6561..2263c9cf8ad 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/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"
   },