Mark email mfa as unavailable when SMTP becomes disabled

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

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 {

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

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();
+  });
+});