import {Fragment, useState} from 'react'; import type {ModalRenderProps} from 'sentry/actionCreators/modal'; import {Alert} from 'sentry/components/alert'; import {Button} from 'sentry/components/button'; import LoadingError from 'sentry/components/loadingError'; import LoadingIndicator from 'sentry/components/loadingIndicator'; import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; import type {Authenticator} from 'sentry/types'; import {useApiQuery} from 'sentry/utils/queryClient'; import TextBlock from 'sentry/views/settings/components/text/textBlock'; type Props = ModalRenderProps & { authenticatorName: string; }; function RecoveryOptionsModal({ authenticatorName, closeModal, Body, Header, Footer, }: Props) { const { isLoading, isError, refetch: refetchAuthenticators, data: authenticators = [], } = useApiQuery(['/users/me/authenticators/'], { staleTime: 5000, // expire after 5 seconds }); const [skipSms, setSkipSms] = useState(false); const {recovery, sms} = authenticators.reduce<{[key: string]: Authenticator}>( (obj, item) => { obj[item.id] = item; return obj; }, {} ); const recoveryEnrolled = recovery?.isEnrolled; const displaySmsPrompt = sms && !sms.isEnrolled && !skipSms && !sms.disallowNewEnrollment; const handleSkipSms = () => { setSkipSms(true); }; if (isLoading) return ; if (isError) { return ( ); } 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;