From fcfe0640b35087477d036ed3aa8cf5bd0df0d9bf Mon Sep 17 00:00:00 2001
From: Michael Myers <michael.myers@goteleport.com>
Date: Tue, 5 Nov 2024 15:09:33 -0600
Subject: [PATCH] Update copy in AuthnDialog

This makes the authn dialog make sense in a browser environment and
Teleport Connect
---
 .../AuthnDialog/AuthnDialog.story.tsx         | 15 ++++++++++++-
 .../AuthnDialog/AuthnDialog.test.tsx          | 21 ++++++++++++++++---
 .../components/AuthnDialog/AuthnDialog.tsx    | 16 +++++++++-----
 3 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/web/packages/teleport/src/components/AuthnDialog/AuthnDialog.story.tsx b/web/packages/teleport/src/components/AuthnDialog/AuthnDialog.story.tsx
index c14222e102ae9..b0226bd71faaa 100644
--- a/web/packages/teleport/src/components/AuthnDialog/AuthnDialog.story.tsx
+++ b/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,
diff --git a/web/packages/teleport/src/components/AuthnDialog/AuthnDialog.test.tsx b/web/packages/teleport/src/components/AuthnDialog/AuthnDialog.test.tsx
index 0f7df2729eb93..5066113d24400 100644
--- a/web/packages/teleport/src/components/AuthnDialog/AuthnDialog.test.tsx
+++ b/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();
diff --git a/web/packages/teleport/src/components/AuthnDialog/AuthnDialog.tsx b/web/packages/teleport/src/components/AuthnDialog/AuthnDialog.tsx
index 52edb304c9f38..a8b87df47de90 100644
--- a/web/packages/teleport/src/components/AuthnDialog/AuthnDialog.tsx
+++ b/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}>
@@ -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 && (