diff --git a/settings/src/components/backup-codes-setup.js b/settings/src/components/backup-codes-setup.js
new file mode 100644
index 00000000..17fa7961
--- /dev/null
+++ b/settings/src/components/backup-codes-setup.js
@@ -0,0 +1,158 @@
+import apiFetch from '@wordpress/api-fetch';
+import { useContext, useCallback, useEffect, useState } from '@wordpress/element';
+import { Button, ButtonGroup, CheckboxControl, Flex, Notice, Spinner } from '@wordpress/components';
+import { Icon, warning, cancelCircleFilled } from '@wordpress/icons';
+import { GlobalContext } from '../script';
+import { refreshRecord } from '../utilities/common';
+import { IntroText } from './backup-codes';
+import CopyToClipboardButton from './copy-to-clipboard-button';
+import DownloadButton from './download-button';
+import PrintButton from './print-button';
+
+/**
+ * Setup the Backup Codes provider.
+ *
+ * @param props
+ * @param props.onSuccess
+ */
+export function Setup( { onSuccess } ) {
+ const {
+ setGlobalNotice,
+ user: { userRecord },
+ setError,
+ error,
+ setBackupCodesVerified,
+ } = useContext( GlobalContext );
+ const [ backupCodes, setBackupCodes ] = useState( [] );
+ const [ hasPrinted, setHasPrinted ] = useState( false );
+
+ // Generate new backup codes and save them in usermeta.
+ useEffect( () => {
+ // useEffect callbacks can't be async directly, because that'd return the promise as a "cleanup" function.
+ const generateCodes = async () => {
+ // This will save the backup codes and enable the provider, which isn't really what we want, but that
+ // mimics the upstream plugin. It's probably better to fix it there first, and then update this, to
+ // make sure we stay in sync with upstream.
+ // See https://github.com/WordPress/two-factor/issues/507
+ try {
+ const response = await apiFetch( {
+ path: '/two-factor/1.0/generate-backup-codes',
+ method: 'POST',
+ data: {
+ user_id: userRecord.record.id,
+ enable_provider: true,
+ },
+ } );
+
+ setBackupCodes( response.codes );
+
+ // Update the Account Status screen in case they click `Back` without verifying the codes, but
+ // don't redirect to the Manage screen yet. This is mainly due to the side-effects of
+ // `two-factor/#507`, so it will need to be modified or maybe removed when that is fixed upstream.
+ setBackupCodesVerified( false );
+ await refreshRecord( userRecord );
+ } catch ( apiFetchError ) {
+ setError( apiFetchError );
+ }
+ };
+
+ generateCodes();
+ // This should only run once on mount.
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [] );
+
+ // Finish the setup process.
+ const handleFinished = useCallback( async () => {
+ // TODO: Add try catch here after https://github.com/WordPress/wporg-two-factor/pull/187/files is merged.
+ // The codes have already been saved to usermeta, see `generateCodes()` above.
+ setBackupCodesVerified( true );
+ setGlobalNotice( 'Backup codes have been enabled.' );
+ onSuccess();
+ } );
+
+ return (
+ <>
+
+
+
+
Please print the codes and keep them in a safe place.
+
+
+
+ Without access to the one-time password app or a backup code, you will lose
+ access to your account. Once you navigate away from this page, you will not be
+ be able to view these codes again.
+
+
+ { hasCodes && (
+
+
+
+
+
+ ) }
+
+ );
+}
diff --git a/settings/src/components/backup-codes.js b/settings/src/components/backup-codes.js
index e769f95f..fedd1415 100644
--- a/settings/src/components/backup-codes.js
+++ b/settings/src/components/backup-codes.js
@@ -1,20 +1,15 @@
/**
* WordPress dependencies
*/
-import apiFetch from '@wordpress/api-fetch';
-import { useContext, useCallback, useEffect, useState } from '@wordpress/element';
-import { Button, ButtonGroup, CheckboxControl, Flex, Notice, Spinner } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+import { Button, Notice } from '@wordpress/components';
import { Icon, warning, cancelCircleFilled } from '@wordpress/icons';
/**
* Internal dependencies
*/
import { GlobalContext } from '../script';
-import { refreshRecord } from '../utilities/common';
import ScreenLink from './screen-link';
-import CopyToClipboardButton from './copy-to-clipboard-button';
-import PrintButton from './print-button';
-import DownloadButton from './download-button';
/**
* Setup and manage backup codes.
@@ -22,20 +17,10 @@ import DownloadButton from './download-button';
* @param props
* @param props.onSuccess
*/
-export default function BackupCodes( { onSuccess = () => {} } ) {
+export default function BackupCodes() {
const {
user: { hasPrimaryProvider },
- shouldAutoGenerateBackupCodes,
} = useContext( GlobalContext );
- const [ generating, setGenerating ] = useState( false );
-
- useEffect( () => {
- if ( shouldAutoGenerateBackupCodes ) {
- setGenerating( true );
- }
- // This should only run once on mount.
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [] );
// Prevent users from accessing directly through the URL.
if ( ! hasPrimaryProvider ) {
@@ -49,165 +34,10 @@ export default function BackupCodes( { onSuccess = () => {} } ) {
);
}
- return generating ? (
-
- ) : (
-
- );
-}
-
-/**
- * Setup the Backup Codes provider.
- *
- * @param props
- * @param props.setGenerating
- * @param props.onSuccess
- */
-function Setup( { setGenerating, onSuccess } ) {
- const {
- setGlobalNotice,
- user: { userRecord },
- setError,
- error,
- setBackupCodesVerified,
- setShouldAutoGenerateBackupCodes,
- } = useContext( GlobalContext );
- const [ backupCodes, setBackupCodes ] = useState( [] );
- const [ hasPrinted, setHasPrinted ] = useState( false );
-
- // Generate new backup codes and save them in usermeta.
- useEffect( () => {
- // useEffect callbacks can't be async directly, because that'd return the promise as a "cleanup" function.
- const generateCodes = async () => {
- // This will save the backup codes and enable the provider, which isn't really what we want, but that
- // mimics the upstream plugin. It's probably better to fix it there first, and then update this, to
- // make sure we stay in sync with upstream.
- // See https://github.com/WordPress/two-factor/issues/507
- try {
- const response = await apiFetch( {
- path: '/two-factor/1.0/generate-backup-codes',
- method: 'POST',
- data: {
- user_id: userRecord.record.id,
- enable_provider: true,
- },
- } );
-
- setBackupCodes( response.codes );
- setShouldAutoGenerateBackupCodes( false );
-
- // Update the Account Status screen in case they click `Back` without verifying the codes, but
- // don't redirect to the Manage screen yet. This is mainly due to the side-effects of
- // `two-factor/#507`, so it will need to be modified or maybe removed when that is fixed upstream.
- setBackupCodesVerified( false );
- await refreshRecord( userRecord );
- } catch ( apiFetchError ) {
- setError( apiFetchError );
- }
- };
-
- generateCodes();
- // This should only run once on mount.
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [] );
-
- // Finish the setup process.
- const handleFinished = useCallback( async () => {
- // TODO: Add try catch here after https://github.com/WordPress/wporg-two-factor/pull/187/files is merged.
- // The codes have already been saved to usermeta, see `generateCodes()` above.
- setBackupCodesVerified( true );
- setGlobalNotice( 'Backup codes have been enabled.' );
- setGenerating( false );
- onSuccess();
- } );
-
- return (
- <>
-
-
-
-
Please print the codes and keep them in a safe place.
-
-
-
- Without access to the one-time password app or a backup code, you will lose
- access to your account. Once you navigate away from this page, you will not be
- be able to view these codes again.
-
-
Backup codes let you access your account if your primary two-factor authentication method is
unavailable, like if your phone is lost or stolen. Each code can only be used once.
@@ -216,13 +46,11 @@ const IntroText = () => (
/**
* Render the screen where users can manage Backup Codes.
- *
- * @param props
- * @param props.setGenerating
*/
-function Manage( { setGenerating } ) {
+function Manage() {
const {
user: { backupCodesEnabled, backupCodesRemaining },
+ navigateToScreen,
} = useContext( GlobalContext );
return (
@@ -249,7 +77,7 @@ function Manage( { setGenerating } ) {
) }
-