From 6911542ac73d653dda3d401a27f2b748a96d266b Mon Sep 17 00:00:00 2001
From: Aleksander <170264518+t-aleksander@users.noreply.github.com>
Date: Fri, 23 Oct 2026 13:58:52 +0200
Subject: [PATCH] unavailable badge

---
 web/messages/en/common.json                   |  1 +
 .../components/AuthCardRow/style.scss         |  4 ++++
 .../components/FactorRow/FactorRow.tsx        | 16 ++++++-------
 web/tests/profile-factor-row.test.tsx         | 24 +++++++++++++++++++
 4 files changed, 37 insertions(+), 8 deletions(-)
 create mode 100644 web/tests/profile-factor-row.test.tsx

diff --git a/web/messages/en/common.json b/web/messages/en/common.json
index 0b4967e5b0..23b008135a 100644
--- a/web/messages/en/common.json
+++ b/web/messages/en/common.json
@@ -76,6 +76,7 @@
   "state_enabled": "Enabled",
   "state_configured": "Configured",
   "state_not_configured": "Not configured",
+  "state_unavailable": "Unavailable",
   "state_smtp_not_configured": "SMTP configuration has not been completed by the administrator.",
   "state_smtp_not_configured_admin": "SMTP not configured. Please configure SMTP to send enrollment details by email.",
   "state_step": "Step {step}",
diff --git a/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/components/AuthCardRow/style.scss b/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/components/AuthCardRow/style.scss
index eea8230383..beb1fbe8b7 100644
--- a/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/components/AuthCardRow/style.scss
+++ b/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/components/AuthCardRow/style.scss
@@ -62,6 +62,10 @@
         &.disabled {
           --color: var(--fg-critical);
         }
+
+        &.unavailable {
+          --color: var(--fg-attention);
+        }
       }
 
       & > .separator {
diff --git a/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/components/FactorRow/FactorRow.tsx b/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/components/FactorRow/FactorRow.tsx
index 493111388c..7ffcb4873e 100644
--- a/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/components/FactorRow/FactorRow.tsx
+++ b/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/components/FactorRow/FactorRow.tsx
@@ -34,7 +34,7 @@ export const FactorRow = ({
     >
       {smtpDisabled ? (
         <>
-          <p className="status disabled">{m.state_not_configured()}</p>
+          <p className="status unavailable">{m.state_unavailable()}</p>
           <span className="separator" />
           <p>{m.state_smtp_not_configured()}</p>
         </>
@@ -47,15 +47,15 @@ export const FactorRow = ({
           <p>{m.profile_auth_card_passkey_usage_web()}</p>
           <span className="separator" />
           <p>{m.profile_auth_card_passkey_usage_vpn()}</p>
-          {isDefault && (
-            <Badge
-              variant="success"
-              size="compact"
-              text={m.profile_auth_card_default_method()}
-            />
-          )}
         </>
       )}
+      {isDefault && (
+        <Badge
+          variant="success"
+          size="compact"
+          text={m.profile_auth_card_default_method()}
+        />
+      )}
     </AuthCardRow>
   );
 };
diff --git a/web/tests/profile-factor-row.test.tsx b/web/tests/profile-factor-row.test.tsx
new file mode 100644
index 0000000000..ae6a803de1
--- /dev/null
+++ b/web/tests/profile-factor-row.test.tsx
@@ -0,0 +1,24 @@
+import { render, screen, within } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { FactorRow } from '../src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/components/FactorRow/FactorRow';
+
+describe('FactorRow with SMTP not configured', () => {
+  it('shows a single Unavailable label and keeps the Default badge', () => {
+    render(
+      <FactorRow
+        icon="mail"
+        title="Email"
+        enabled
+        isDefault
+        smtpDisabled
+        testId="email-codes-row"
+      />,
+    );
+
+    const row = within(screen.getByTestId('email-codes-row'));
+    expect(row.getByText('Unavailable')).toBeInTheDocument();
+    expect(row.getByText('Default method')).toBeInTheDocument();
+    expect(row.queryByText('Not configured')).not.toBeInTheDocument();
+    expect(row.queryByText('Enabled')).not.toBeInTheDocument();
+  });
+});