Fix stories.

web/packages/teleport/src/Account/Account.story.tsx

@@ -87,7 +87,7 @@ export const LoadingDevicesFailed = () => (
 );
 
 export const RemoveDialog = () => (
-  <Account {...props} token="123" deviceToRemove={props.devices[0]} />
+  <Account {...props} deviceToRemove={props.devices[0]} />
 );
 
 export const RestrictedTokenCreateProcessing = () => (
@@ -110,7 +110,6 @@ export const RestrictedTokenCreateFailed = () => (
 );
 
 const props: AccountProps = {
-  token: '',
   onAddDevice: () => null,
   fetchDevicesAttempt: { status: 'success' },
   createRestrictedTokenAttempt: { status: '' },
@@ -179,7 +178,6 @@ const props: AccountProps = {
     },
   ],
   onDeviceAdded: () => {},
-  isReauthenticationRequired: false,
   addDeviceWizardVisible: false,
   closeAddDeviceWizard: () => {},
   passwordState: PasswordState.PASSWORD_STATE_SET,

web/packages/teleport/src/Account/Account.test.tsx

@@ -16,8 +16,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { render, screen, waitFor } from 'design/utils/testing';
 import { within } from '@testing-library/react';
+import { render, screen, waitFor } from 'design/utils/testing';
 
 import userEvent from '@testing-library/user-event';
 
@@ -27,9 +27,9 @@ import TeleportContext from 'teleport/teleportContext';
 import { AccountPage as Account } from 'teleport/Account/Account';
 import cfg from 'teleport/config';
 import { createTeleportContext } from 'teleport/mocks/contexts';
-import { PasswordState } from 'teleport/services/user';
 import auth from 'teleport/services/auth/auth';
 import MfaService, { MfaDevice } from 'teleport/services/mfa';
+import { PasswordState } from 'teleport/services/user';
 
 const defaultAuthType = cfg.auth.second_factor;
 const defaultPasswordless = cfg.auth.allowPasswordless;

web/packages/teleport/src/Account/ChangePasswordWizard/ChangePasswordWizard.story.tsx

@@ -26,6 +26,7 @@ import { ContextProvider } from 'teleport';
 import {
   MFA_OPTION_SSO_DEFAULT,
   MFA_OPTION_TOTP,
+  MFA_OPTION_WEBAUTHN,
   WebauthnAssertionResponse,
 } from 'teleport/services/mfa';
 
@@ -36,6 +37,8 @@ import {
   REAUTH_OPTION_WEBAUTHN,
   ReauthenticateStep,
 } from './ChangePasswordWizard';
+import { ReauthState } from 'teleport/components/ReAuthenticate/useReAuthenticate';
+import { makeEmptyAttempt } from 'shared/hooks/useAsync';
 
 export default {
   title: 'teleport/Account/Manage Devices/Change Password Wizard',
@@ -91,15 +94,15 @@ const stepProps = {
   onSuccess() {},
 
   // ReauthenticateStepProps
-  reauthOptions: [
-    REAUTH_OPTION_PASSKEY,
-    REAUTH_OPTION_WEBAUTHN,
-    MFA_OPTION_TOTP,
-    MFA_OPTION_SSO_DEFAULT,
-  ],
-  onReauthMethodChange: () => {},
-  submitWithPasswordless: async () => {},
-  submitWithMfa: async () => {},
+  hasPasswordless: true,
+  setReauthMethod: () => {},
+  reauthState: {
+    initAttempt: { status: 'success' },
+    mfaOptions: [MFA_OPTION_WEBAUTHN, MFA_OPTION_TOTP, MFA_OPTION_SSO_DEFAULT],
+    submitWithMfa: async () => null,
+    submitAttempt: makeEmptyAttempt(),
+    clearSubmitAttempt: () => {},
+  } as ReauthState,
 
   // ChangePasswordStepProps
   webauthnResponse: {} as WebauthnAssertionResponse,

web/packages/teleport/src/Account/ChangePasswordWizard/ChangePasswordWizard.test.tsx

@@ -17,7 +17,6 @@
  */
 
 import { render, screen } from 'design/utils/testing';
-import React from 'react';
 
 import { waitFor, within } from '@testing-library/react';
 import { userEvent, UserEvent } from '@testing-library/user-event';

web/packages/teleport/src/Account/ManageDevices/wizards/AddAuthDeviceWizard.story.tsx

@@ -42,6 +42,8 @@ import {
   SaveDeviceStep,
 } from './AddAuthDeviceWizard';
 import { ReauthenticateStep } from './ReauthenticateStep';
+import { ReauthState } from 'teleport/components/ReAuthenticate/useReAuthenticate';
+import { makeEmptyAttempt } from 'shared/hooks/useAsync';
 
 export default {
   title: 'teleport/Account/Manage Devices/Add Device Wizard',
@@ -67,7 +69,10 @@ export function ReauthenticateLimitedOptions() {
   return (
     <ReauthenticateStep
       {...stepProps}
-      mfaChallengeOptions={[{ value: 'totp', label: 'Authenticator App' }]}
+      reauthState={{
+        ...stepProps.reauthState,
+        mfaOptions: [{ value: 'totp', label: 'Authenticator App' }],
+      }}
     />
   );
 }
@@ -170,14 +175,12 @@ const stepProps: AddAuthDeviceWizardStepProps = {
   usage: 'passwordless' as DeviceUsage,
 
   // Reauth props
-  reauthAttempt: {} as Attempt,
-  clearReauthAttempt: () => {},
-  mfaChallengeOptions: [
-    MFA_OPTION_WEBAUTHN,
-    MFA_OPTION_TOTP,
-    MFA_OPTION_SSO_DEFAULT,
-  ],
-  submitWithMfa: async () => {},
+  reauthState: {
+    mfaOptions: [MFA_OPTION_WEBAUTHN, MFA_OPTION_TOTP, MFA_OPTION_SSO_DEFAULT],
+    submitWithMfa: async () => null,
+    submitAttempt: makeEmptyAttempt(),
+    clearSubmitAttempt: () => {},
+  } as ReauthState,
 
   // Create props
   mfaRegisterOptions: [MFA_OPTION_WEBAUTHN, MFA_OPTION_TOTP],

web/packages/teleport/src/Account/ManageDevices/wizards/DeleteAuthDeviceWizard.story.tsx

@@ -37,6 +37,8 @@ import {
   DeleteDeviceStep,
 } from './DeleteAuthDeviceWizard';
 import { ReauthenticateStep } from './ReauthenticateStep';
+import { ReauthState } from 'teleport/components/ReAuthenticate/useReAuthenticate';
+import { makeEmptyAttempt } from 'shared/hooks/useAsync';
 
 export default {
   title: 'teleport/Account/Manage Devices/Delete Device Wizard',
@@ -107,19 +109,17 @@ const stepProps: DeleteAuthDeviceWizardStepProps = {
   flowLength: 2,
   refCallback: () => {},
 
+  // Reauth props
+  reauthState: {
+    mfaOptions: [MFA_OPTION_WEBAUTHN, MFA_OPTION_TOTP, MFA_OPTION_SSO_DEFAULT],
+    submitWithMfa: async () => null,
+    submitAttempt: makeEmptyAttempt(),
+    clearSubmitAttempt: () => {},
+  } as ReauthState,
+
   // Delete props
   deviceToDelete: dummyPasskey,
   privilegeToken: 'privilege-token',
   onClose: () => {},
   onSuccess: () => {},
-
-  // Other props
-  reauthAttempt: {} as Attempt,
-  clearReauthAttempt: () => {},
-  mfaChallengeOptions: [
-    MFA_OPTION_WEBAUTHN,
-    MFA_OPTION_TOTP,
-    MFA_OPTION_SSO_DEFAULT,
-  ],
-  submitWithMfa: async () => {},
 };

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

@@ -25,6 +25,8 @@ import {
 } from 'teleport/services/mfa';
 
 import { ReAuthenticate, State } from './ReAuthenticate';
+import { ReauthState } from './useReAuthenticate';
+import { Attempt, makeEmptyAttempt } from 'shared/hooks/useAsync';
 
 export default {
   title: 'Teleport/ReAuthenticate',
@@ -33,26 +35,38 @@ export default {
 export const Loaded = () => <ReAuthenticate {...props} />;
 
 export const Processing = () => (
-  <ReAuthenticate {...props} attempt={{ status: 'processing' }} />
+  <ReAuthenticate
+    {...props}
+    reauthState={{
+      ...props.reauthState,
+      submitAttempt: { status: 'processing', data: null, statusText: '' },
+    }}
+  />
 );
 
 export const Failed = () => (
   <ReAuthenticate
     {...props}
-    attempt={{ status: 'failed', statusText: 'an error has occurred' }}
+    reauthState={{
+      ...props.reauthState,
+      submitAttempt: {
+        status: 'error',
+        data: null,
+        error: new Error('an error has occurred'),
+        statusText: 'an error has occurred',
+      },
+    }}
   />
 );
 
 const props: State = {
-  attempt: { status: '' },
-  clearAttempt: () => null,
-  getMfaChallenge: () => null,
-  getMfaChallengeOptions: async () => [
-    MFA_OPTION_WEBAUTHN,
-    MFA_OPTION_TOTP,
-    MFA_OPTION_SSO_DEFAULT,
-  ],
-  submitWithMfa: () => null,
-  submitWithPasswordless: () => null,
+  reauthState: {
+    initAttempt: { status: 'success' },
+    mfaOptions: [MFA_OPTION_WEBAUTHN, MFA_OPTION_TOTP, MFA_OPTION_SSO_DEFAULT],
+    submitWithMfa: async () => null,
+    submitAttempt: makeEmptyAttempt(),
+    clearSubmitAttempt: () => {},
+  } as ReauthState,
+
   onClose: () => null,
 };

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

@@ -50,20 +50,23 @@ export type Props = ReauthProps & {
 
 export default function Container(props: Props) {
   const state = useReAuthenticate(props);
-  return <ReAuthenticate onClose={props.onClose} {...state} />;
+  return <ReAuthenticate onClose={props.onClose} reauthState={state} />;
 }
 
-export type State = ReauthState & {
+export type State = {
+  reauthState: ReauthState;
   onClose: () => void;
 };
 
 export function ReAuthenticate({
   onClose,
-  initAttempt,
-  mfaOptions,
-  submitWithMfa,
-  submitAttempt,
-  clearSubmitAttempt,
+  reauthState: {
+    initAttempt,
+    mfaOptions,
+    submitWithMfa,
+    submitAttempt,
+    clearSubmitAttempt,
+  },
 }: State) {
   const [otpCode, setOtpToken] = useState('');
   const [mfaOption, setMfaOption] = useState<MfaOption>();