Update copy in AuthnDialog (#48476)

This makes the authn dialog make sense in a browser environment and
Teleport Connect

web/packages/teleport/src/components/AuthnDialog/AuthnDialog.story.tsx

@@ -26,7 +26,7 @@ export default {
   title: 'Teleport/AuthnDialog',
 };
 
-export const Loaded = () => {
+export const LoadedWithMultipleOptions = () => {
   const props: Props = {
     ...defaultProps,
     mfa: {
@@ -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,

web/packages/teleport/src/components/AuthnDialog/AuthnDialog.test.tsx

@@ -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();

web/packages/teleport/src/components/AuthnDialog/AuthnDialog.tsx

@@ -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>
@@ -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}>