Disable backup codes UI entirely if another provider isn't enabled

- Don't show link to backup codes screen - Navigate to account screen if screen is accessed directly
WordPress · May 18, 2023 · a719132 · a719132
1 parent 8d5f4f8
commit a719132
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 24 deletions.
diff --git a/settings/src/components/account-status.js b/settings/src/components/account-status.js
@@ -59,14 +59,16 @@ export default function AccountStatus() {
 				}
 			/>
 
-			<SettingStatusCard
-				screen="backup-codes"
-				status={ backupCodesStatus }
-				headerText="Two-Factor Backup Codes"
-				bodyText={ `You have ${
-					'enabled' === backupCodesStatus ? '' : 'not'
-				} verified your backup codes for two-factor authentication.` }
-			/>
+			{ totpStatus === 'enabled' && (
+				<SettingStatusCard
+					screen="backup-codes"
+					status={ backupCodesStatus }
+					headerText="Two-Factor Backup Codes"
+					bodyText={ `You have ${
+						'enabled' === backupCodesStatus ? '' : 'not'
+					} verified your backup codes for two-factor authentication.` }
+				/>
+			) }
 		</div>
 	);
 }

diff --git a/settings/src/components/backup-codes.js b/settings/src/components/backup-codes.js
@@ -16,19 +16,28 @@ import { refreshRecord } from '../utilities';
  * Setup and manage backup codes.
  */
 export default function BackupCodes() {
-	const { userRecord } = useContext( GlobalContext );
+	const {
+		userRecord: {
+			record: { '2fa_available_providers': availableProviders },
+		},
+		navigateToScreen,
+	} = useContext( GlobalContext );
 	const [ regenerating, setRegenerating ] = useState( false );
+	const backupCodesProviderAvailable = availableProviders.includes( 'Two_Factor_Backup_Codes' );
+	const onlyProviderIsBackupCodes =
+		availableProviders.length === 1 && backupCodesProviderAvailable;
 
-	const backupCodesStatus = userRecord.record[ '2fa_available_providers' ].includes(
-		'Two_Factor_Backup_Codes'
-	)
-		? 'enabled'
-		: 'disabled';
-
-	if ( 'enabled' === backupCodesStatus && ! regenerating ) {
-		return <Manage setRegenerating={ setRegenerating } />;
-	}
-	return <Setup setRegenerating={ setRegenerating } />;
+	useEffect( () => {
+		if ( onlyProviderIsBackupCodes ) {
+			navigateToScreen( 'account-status' );
+		}
+	}, [ onlyProviderIsBackupCodes ] );
+
+	return backupCodesProviderAvailable && ! regenerating ? (
+		<Manage setRegenerating={ setRegenerating } />
+	) : (
+		<Setup setRegenerating={ setRegenerating } />
+	);
 }
 
 /**

diff --git a/settings/src/script.js b/settings/src/script.js
@@ -107,10 +107,8 @@ function Main( { userId } ) {
 	 * This is used in conjunction with real links in order to preserve deep linking and other foundational
 	 * behaviors that are broken otherwise.
 	 */
-	const clickScreenLink = useCallback(
-		( event, nextScreen ) => {
-			event.preventDefault();
-
+	const navigateToScreen = useCallback(
+		( nextScreen ) => {
 			// Reset to initial after navigating away from a page.
 			if ( hasEdits ) {
 				edit( record );
@@ -126,6 +124,18 @@ function Main( { userId } ) {
 		[ hasEdits ]
 	);
 
+	/**
+	 * Handle clicks on screen links.
+	 *
+	 * @param event
+	 * @param nextScreen
+	 */
+	const clickScreenLink = useCallback( ( event, nextScreen ) => {
+		event.preventDefault();
+
+		navigateToScreen( nextScreen );
+	}, [] );
+
 	if ( ! hasResolved ) {
 		return <Spinner />;
 	}
@@ -180,7 +190,9 @@ function Main( { userId } ) {
 	}
 
 	return (
-		<GlobalContext.Provider value={ { clickScreenLink, userRecord, setGlobalNotice } }>
+		<GlobalContext.Provider
+			value={ { clickScreenLink, userRecord, setGlobalNotice, navigateToScreen } }
+		>
 			<GlobalNotice notice={ globalNotice } setNotice={ setGlobalNotice } />
 			{ screenContent }
 		</GlobalContext.Provider>