TOTP: Add management screen so users can disable provider.

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.
+			<p>
+				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.
+			</p>
+
+			<p>
+				Make sure you've created { ' ' }
+				<a href="?screen=backup-codes" onClick={ ( event ) => clickScreenLink( event, 'backup-codes' ) }>backup codes</a> { ' ' }
+				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.
+			</p>
+
+			<p>
+				<strong>Status:</strong> { ' ' }
+				Two-step authentication is currently <span className="wporg-2fa__enabled-status">on</span>.
+			</p>
 
-			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
+			<Button isPrimary onClick={ handleDisable }>
+				Disable Two Factor Authentication
+			</Button>
 
-			Status: Two-step authentication is currently on.
+			{ error &&
+				<Notice status="error" isDismissible={ false }>
+					<Icon icon={ cancelCircleFilled } />
+					{ error }
+				</Notice>
+			}
 		</>
 	);
 }

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;
+}