Update copy in AuthnDialog

This makes the authn dialog make sense in a browser environment and Teleport Connect
gravitational · Nov 5, 2024 · 3730a3f · 3730a3f
1 parent b4eda18
commit 3730a3f
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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>
@@ -44,7 +46,9 @@ export default function AuthnDialog({ mfa, onCancel }: Props) {
           </Danger>
         )}
         <Text textAlign="center" color="text.slightlyMuted">
-          To continue, you must verify your identity by re-authenticating:
+          {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 && (