Add info about MFA methods to user reset modal (#50381)

* Rewrite story to use controls

* Add info about MFA methods

web/packages/teleport/src/Users/UserReset/UserReset.story.tsx

@@ -16,40 +16,69 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { Meta } from '@storybook/react';
+
+import { Attempt } from 'shared/hooks/useAttemptNext';
+import { useEffect, useState } from 'react';
+
+import cfg from 'teleport/config';
+
 import { UserReset } from './UserReset';
 
-export default {
-  title: 'Teleport/Users/UserReset',
+type StoryProps = {
+  status: 'processing' | 'success' | 'error';
+  isMfaEnabled: boolean;
+  allowPasswordless: boolean;
 };
 
-export const Processing = () => {
-  return <UserReset {...props} attempt={{ status: 'processing' }} />;
+const meta: Meta<StoryProps> = {
+  title: 'Teleport/Users/UserReset',
+  component: Story,
+  argTypes: {
+    status: {
+      control: { type: 'radio' },
+      options: ['processing', 'success', 'error'],
+    },
+  },
+  args: {
+    status: 'processing',
+    isMfaEnabled: true,
+    allowPasswordless: true,
+  },
 };
 
-export const Success = () => {
-  return <UserReset {...props} attempt={{ status: 'success' }} />;
-};
+export default meta;
+
+export function Story(props: StoryProps) {
+  const statusToAttempt: Record<StoryProps['status'], Attempt> = {
+    processing: { status: 'processing' },
+    success: { status: 'success' },
+    error: { status: 'failed', statusText: 'some server error' },
+  };
+  const [, setState] = useState({});
+
+  useEffect(() => {
+    const defaultAuth = structuredClone(cfg.auth);
+    cfg.auth.second_factor = props.isMfaEnabled ? 'on' : 'off';
+    cfg.auth.allowPasswordless = props.allowPasswordless;
+    setState({}); // Force re-render of the component with new cfg.
+
+    return () => {
+      cfg.auth = defaultAuth;
+    };
+  }, [props.isMfaEnabled, props.allowPasswordless]);
 
-export const Failed = () => {
   return (
     <UserReset
-      {...props}
-      attempt={{ status: 'failed', statusText: 'some server error' }}
+      username="smith"
+      token={{
+        value: '0c536179038b386728dfee6602ca297f',
+        expires: new Date('2021-04-08T07:30:00Z'),
+        username: 'Lester',
+      }}
+      onReset={() => {}}
+      onClose={() => {}}
+      attempt={statusToAttempt[props.status]}
     />
   );
-};
-
-const props = {
-  username: 'smith',
-  token: {
-    value: '0c536179038b386728dfee6602ca297f',
-    expires: new Date('2021-04-08T07:30:00Z'),
-    username: 'Lester',
-  },
-  onReset() {},
-  onClose() {},
-  attempt: {
-    status: 'processing',
-    statusText: '',
-  },
-};
+}

web/packages/teleport/src/Users/UserReset/UserReset.tsx

@@ -17,7 +17,7 @@
  */
 
 import { useState } from 'react';
-import { ButtonPrimary, ButtonSecondary, Text, Alert } from 'design';
+import { ButtonPrimary, ButtonSecondary, Text, Alert, P2 } from 'design';
 import Dialog, {
   DialogHeader,
   DialogTitle,
@@ -26,6 +26,7 @@ import Dialog, {
 } from 'design/Dialog';
 import { useAttemptNext } from 'shared/hooks';
 
+import cfg from 'teleport/config';
 import { ResetToken } from 'teleport/services/user';
 
 import UserTokenLink from './../UserTokenLink';
@@ -58,24 +59,39 @@ export function UserReset({
       </DialogHeader>
       <DialogContent>
         {attempt.status === 'failed' && (
-          <Alert kind="danger" children={attempt.statusText} />
+          <Alert kind="danger">{attempt.statusText}</Alert>
         )}
-        <Text mb={4} mt={1}>
-          You are about to reset authentication for user
-          <Text bold as="span">
-            {` ${username} `}
+        <P2>
+          You are about to reset authentication for user{' '}
+          <Text bold as="strong">
+            {username}
           </Text>
-          . This will generate a temporary URL which can be used to set up new
-          authentication.
-        </Text>
+          . This will generate a&nbsp;temporary URL which can be used to set up
+          new authentication.
+        </P2>
+        {cfg.isMfaEnabled() && (
+          <P2>
+            All{' '}
+            {cfg.isPasswordlessEnabled()
+              ? 'passkeys and MFA methods'
+              : 'MFA methods'}{' '}
+            of this user will be removed. The user will be able to set up{' '}
+            {cfg.isPasswordlessEnabled() ? (
+              <>a&nbsp;new passkey or an MFA method</>
+            ) : (
+              <>a&nbsp;new method</>
+            )}{' '}
+            after following the URL.
+          </P2>
+        )}
       </DialogContent>
       <DialogFooter>
         <ButtonPrimary
           mr="3"
           disabled={attempt.status === 'processing'}
           onClick={onReset}
         >
-          Generate reset url
+          Generate Reset URL
         </ButtonPrimary>
         <ButtonSecondary onClick={onClose}>Cancel</ButtonSecondary>
       </DialogFooter>