import {Fragment} from 'react'; import {ModalRenderProps} from 'sentry/actionCreators/modal'; import {Alert} from 'sentry/components/alert'; import {Button} from 'sentry/components/button'; import DeprecatedAsyncComponent from 'sentry/components/deprecatedAsyncComponent'; import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; import {Authenticator} from 'sentry/types'; import TextBlock from 'sentry/views/settings/components/text/textBlock'; type Props = DeprecatedAsyncComponent['props'] & ModalRenderProps & { authenticatorName: string; }; type State = DeprecatedAsyncComponent['state'] & { authenticators: Authenticator[] | null; skipSms: boolean; }; class RecoveryOptionsModal extends DeprecatedAsyncComponent { getDefaultState() { return {...super.getDefaultState(), skipSms: false}; } getEndpoints(): ReturnType { return [['authenticators', '/users/me/authenticators/']]; } handleSkipSms = () => { this.setState({skipSms: true}); }; renderBody() { const {authenticatorName, closeModal, Body, Header, Footer} = this.props; const {authenticators, skipSms} = this.state; const {recovery, sms} = authenticators!.reduce<{[key: string]: Authenticator}>( (obj, item) => { obj[item.id] = item; return obj; }, {} ); const recoveryEnrolled = recovery && recovery.isEnrolled; const displaySmsPrompt = sms && !sms.isEnrolled && !skipSms && !sms.disallowNewEnrollment; return (

{t('Two-Factor Authentication Enabled')}

{t('Two-factor authentication via %s has been enabled.', authenticatorName)} {t('You should now set up recovery options to secure your account.')} {displaySmsPrompt ? ( // set up backup phone number {t('We recommend adding a phone number as a backup 2FA method.')} ) : ( // get recovery codes {t( `Recovery codes are the only way to access your account if you lose your device and cannot receive two-factor authentication codes.` )} )} {displaySmsPrompt ? ( // set up backup phone number ) : ( // get recovery codes )} ); } } export default RecoveryOptionsModal;