Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update copy in AuthnDialog #48476

Merged
merged 1 commit into from
Nov 6, 2024
Merged

Update copy in AuthnDialog #48476

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion web/packages/teleport/src/components/AuthnDialog/AuthnDialog.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default {
title: 'Teleport/AuthnDialog',
};

export const Loaded = () => {
export const LoadedWithMultipleOptions = () => {
const props: Props = {
...defaultProps,
mfa: {
Expand All @@ -49,6 +49,19 @@ export const Loaded = () => {
return <AuthnDialog {...props} />;
};

export const LoadedWithSingleOption = () => {
const props: Props = {
...defaultProps,
mfa: {
...defaultProps.mfa,
webauthnPublicKey: {
challenge: new ArrayBuffer(1),
},
},
};
return <AuthnDialog {...props} />;
};

export const Error = () => {
const props: Props = {
...defaultProps,
Expand Down
21 changes: 18 additions & 3 deletions web/packages/teleport/src/components/AuthnDialog/AuthnDialog.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,16 +50,31 @@ describe('AuthnDialog', () => {
jest.clearAllMocks();
});

test('renders the dialog with basic content', () => {
test('renders single option dialog', () => {
const mfa = makeMockState({ ssoChallenge: mockSsoChallenge });
render(<AuthnDialog mfa={mfa} onCancel={mockOnCancel} />);

expect(screen.getByText('Verify Your Identity')).toBeInTheDocument();
expect(
screen.getByText('Re-authenticate in the Browser')
screen.getByText('Select the method below to verify your identity:')
).toBeInTheDocument();
expect(screen.getByText('Okta')).toBeInTheDocument();
expect(screen.getByTestId('close-dialog')).toBeInTheDocument();
});

test('renders multi option dialog', () => {
const mfa = makeMockState({
ssoChallenge: mockSsoChallenge,
webauthnPublicKey: {
challenge: new ArrayBuffer(1),
},
});
render(<AuthnDialog mfa={mfa} onCancel={mockOnCancel} />);

expect(screen.getByText('Verify Your Identity')).toBeInTheDocument();
expect(
screen.getByText(
'To continue, you must verify your identity by re-authenticating:'
'Select one of the following methods to verify your identity:'
)
).toBeInTheDocument();
expect(screen.getByText('Okta')).toBeInTheDocument();
Expand Down
16 changes: 11 additions & 5 deletions web/packages/teleport/src/components/AuthnDialog/AuthnDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,12 @@ import { SSOIcon } from 'shared/components/ButtonSso/ButtonSso';
import { MfaState } from 'teleport/lib/useMfa';

export default function AuthnDialog({ mfa, onCancel }: Props) {
let hasMultipleOptions = mfa.ssoChallenge && mfa.webauthnPublicKey;

return (
<Dialog dialogCss={() => ({ width: '400px' })} open={true}>
<Flex justifyContent="space-between" alignItems="center" mb={4}>
<H2>Re-authenticate in the Browser</H2>
<H2>Verify Your Identity</H2>
<ButtonIcon data-testid="close-dialog" onClick={onCancel}>
<Cross color="text.slightlyMuted" />
</ButtonIcon>
Expand All @@ -43,8 +45,10 @@ export default function AuthnDialog({ mfa, onCancel }: Props) {
{mfa.errorText}
</Danger>
)}
<Text textAlign="center" color="text.slightlyMuted">
To continue, you must verify your identity by re-authenticating:
<Text color="text.slightlyMuted">
{hasMultipleOptions
? 'Select one of the following methods to verify your identity:'
: 'Select the method below to verify your identity:'}
</Text>
</DialogContent>
<Flex textAlign="center" width="100%" flexDirection="column" gap={2}>
Expand All @@ -57,11 +61,13 @@ export default function AuthnDialog({ mfa, onCancel }: Props) {
>
<SSOIcon
type={guessProviderType(
mfa.ssoChallenge.device.displayName,
mfa.ssoChallenge.device.displayName ||
mfa.ssoChallenge.device.connectorId,
mfa.ssoChallenge.device.connectorType
)}
/>
{mfa.ssoChallenge.device.displayName}
{mfa.ssoChallenge.device.displayName ||
mfa.ssoChallenge.device.connectorId}
</ButtonSecondary>
)}
{mfa.webauthnPublicKey && (
Expand Down
Loading