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 ? ( <> -

{m.state_not_configured()}

+

{m.state_unavailable()}

{m.state_smtp_not_configured()}

@@ -47,15 +47,15 @@ export const FactorRow = ({

{m.profile_auth_card_passkey_usage_web()}

{m.profile_auth_card_passkey_usage_vpn()}

- {isDefault && ( - - )} )} + {isDefault && ( + + )} ); }; 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( + , + ); + + 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(); + }); +});