diff --git a/settings/src/components/totp.js b/settings/src/components/totp.js index 054cf301..34a99cbc 100644 --- a/settings/src/components/totp.js +++ b/settings/src/components/totp.js @@ -250,16 +250,62 @@ function SetupForm( { handleEnable, verifyCode, setVerifyCode, qrCodeUrl, secret ); } -// todo maybe create separate files for setup and manage? +/** + * Disable the TOTP provider. + */ function Manage() { + const { userRecord, setGlobalNotice } = useContext( GlobalContext ); + const [ error, setError ] = useState( '' ); + + // Enable TOTP when button clicked. + // todo maybe move this to a sep func to reduce clutter in this func, but would have to pass in a lot of values/functions. + const handleDisable = useCallback( async ( event ) => { + event.preventDefault(); + + try { + await apiFetch( { + path: '/two-factor/1.0/totp/', + method: 'DELETE', + data: { user_id: userRecord.record.id }, + } ); + + refreshRecord( userRecord ); + setGlobalNotice( 'Successfully disabled One Time Passwords.' ); + + } catch( error ) { + setError( error.message ); + } + } ); + return ( <> - You've enabled two-step authentication on your account — smart move! When you log in to WordPress.com, you'll need to enter your username and password, as well as a unique passcode generated by an app on your mobile device. +

+ You've enabled two-factor authentication on your account — smart move! + When you log in to WordPress.org, you'll need to enter your username and password, and then enter a unique passcode generated by an app on your mobile device. +

+ +

+ Make sure you've created { ' ' } + clickScreenLink( event, 'backup-codes' ) }>backup codes { ' ' } + and saved them in a safe location, in case you ever lose your device. You may also need them when transitioning to a new device. + Without them you may permenantly lose access to your account. +

+ +

+ Status: { ' ' } + Two-step authentication is currently on. +

- Switching to a new device? Follow these steps to avoid losing access to your account. - https://wordpress.com/support/security/two-step-authentication/#moving-to-a-new-device + - Status: Two-step authentication is currently on. + { error && + + + { error } + + } ); } diff --git a/settings/src/components/totp.scss b/settings/src/components/totp.scss index abf6d7b0..25e66c86 100644 --- a/settings/src/components/totp.scss +++ b/settings/src/components/totp.scss @@ -11,3 +11,8 @@ .wporg-2fa__verify-code { width: 10ch; } + +.wporg-2fa__enabled-status { + color: green; // todo use color var + text-transform: uppercase; +}