Fix unable to see the first set of backup code - using localStroage (#…

…221)

* Revert "Fix unable to see the first set of backup codes after enabling the 2FA (#217)"

This reverts commit 0cbad52.

* add hasSetupCompleted

* Add {browser: true} to fix eslint error

settings/.eslintrc.js

@@ -2,6 +2,10 @@ module.exports = {
 	root: true,
 	extends: 'plugin:@wordpress/eslint-plugin/recommended',
 
+	env: {
+		browser: true,
+	},
+
 	globals: { navigator: 'readonly' },
 
 	rules: {

settings/src/components/backup-codes.js

@@ -17,14 +17,17 @@ import { refreshRecord } from '../utilities/common';
  */
 export default function BackupCodes() {
 	const {
-		user: {
-			backupCodesEnabled,
-			totpEnabled,
-			userRecord: { record },
-		},
+		user: { backupCodesEnabled, totpEnabled },
 		navigateToScreen,
 	} = useContext( GlobalContext );
 	const [ regenerating, setRegenerating ] = useState( false );
+	// TODO: hasSetupCompleted and its related logic should be removed
+	// once https://github.com/WordPress/two-factor/issues/507 is fixed.
+	// This is a workaround that fixes the side effect brought up by #507.
+	// See more in https://github.com/WordPress/wporg-two-factor/issues/216 and its PR.
+	const [ hasSetupCompleted, setHasSetupCompleted ] = useState(
+		localStorage.getItem( 'WPORG_2FA_HAS_BACKUP_CODES_BEEN_SAVED' ) === 'true'
+	);
 
 	// If TOTP hasn't been enabled, the user should not have access to BackupCodes component.
 	// This is primarily added to prevent users from accessing through the URL.
@@ -33,24 +36,23 @@ export default function BackupCodes() {
 		return;
 	}
 
-	// TODO: record.isSetupFinished and its related logic should be removed
-	// once https://github.com/WordPress/two-factor/issues/507 is fixed.
-	// This is a workaround that fixes the side effect brought up by #507.
-	// See more in https://github.com/WordPress/wporg-two-factor/issues/216 and its PR.
-	if ( backupCodesEnabled && record.isSetupFinished && ! regenerating ) {
+	if ( backupCodesEnabled && hasSetupCompleted && ! regenerating ) {
 		return <Manage setRegenerating={ setRegenerating } />;
 	}
 
-	return <Setup setRegenerating={ setRegenerating } />;
+	return (
+		<Setup setRegenerating={ setRegenerating } setHasSetupCompleted={ setHasSetupCompleted } />
+	);
 }
 
 /**
  * Setup the Backup Codes provider.
  *
  * @param props
  * @param props.setRegenerating
+ * @param props.setHasSetupCompleted
  */
-function Setup( { setRegenerating } ) {
+function Setup( { setRegenerating, setHasSetupCompleted } ) {
 	const {
 		setGlobalNotice,
 		user: { userRecord },
@@ -89,12 +91,14 @@ function Setup( { setRegenerating } ) {
 
 	// Finish the setup process.
 	const handleFinished = useCallback( async () => {
-		setGlobalNotice( 'Backup codes have been enabled.' );
-		setRegenerating( false );
-		userRecord.record.isSetupFinished = true;
+		// 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.
 		await refreshRecord( userRecord ); // This has the intended side-effect of redirecting to the Manage screen.
-	}, [] );
+		setGlobalNotice( 'Backup codes have been enabled.' );
+		setRegenerating( false );
+		setHasSetupCompleted( true );
+		localStorage.setItem( 'WPORG_2FA_HAS_BACKUP_CODES_BEEN_SAVED', true );
+	} );
 
 	return (
 		<>
@@ -179,9 +183,11 @@ function CodeList( { codes } ) {
  */
 function Manage( { setRegenerating } ) {
 	const {
-		user: { userRecord },
+		user: {
+			userRecord: { record },
+		},
 	} = useContext( GlobalContext );
-	const remaining = userRecord.record[ '2fa_backup_codes_remaining' ];
+	const remaining = record[ '2fa_backup_codes_remaining' ];
 
 	return (
 		<>
@@ -208,10 +214,9 @@ function Manage( { setRegenerating } ) {
 
 			<Button
 				isSecondary
-				onClick={ async () => {
+				onClick={ () => {
 					setRegenerating( true );
-					userRecord.record.isSetupFinished = false;
-					await refreshRecord( userRecord ); // This has the intended side-effect of redirecting to the Manage screen.
+					localStorage.setItem( 'WPORG_2FA_HAS_BACKUP_CODES_BEEN_SAVED', false );
 				} }
 			>
 				Generate new backup codes