Only show the reauth modal if a primary 2FA provider is enabled

settings/src/components/account-status.js

@@ -15,26 +15,29 @@ import ScreenLink from './screen-link';
  * Render the Account Status.
  */
 export default function AccountStatus() {
-	const { userRecord } = useContext( GlobalContext );
-	const { record } = userRecord;
-	const emailStatus = record.pending_email ? 'pending' : 'ok';
-	const totpEnabled = record[ '2fa_available_providers' ].includes( 'Two_Factor_Totp' );
-	const webAuthnEnabled = record[ '2fa_available_providers' ].includes(
-		'TwoFactor_Provider_WebAuthn'
-	);
-	const primaryProviderEnabled = totpEnabled || webAuthnEnabled;
-	const backupCodesEnabled =
-		record[ '2fa_available_providers' ].includes( 'Two_Factor_Backup_Codes' );
+	const {
+		user: { userRecord, hasPrimaryProvider },
+	} = useContext( GlobalContext );
+	const {
+		record: {
+			'2fa_available_providers': availableProviders,
+			email,
+			pending_email: pendingEmail,
+		},
+	} = userRecord;
+	const emailStatus = pendingEmail ? 'pending' : 'ok';
+	const totpEnabled = availableProviders.includes( 'Two_Factor_Totp' );
+	const backupCodesEnabled = availableProviders.includes( 'Two_Factor_Backup_Codes' );
 
 	const backupBodyText =
-		! backupCodesEnabled && ! primaryProviderEnabled
+		! backupCodesEnabled && ! hasPrimaryProvider
 			? 'Please enable Two-Factor Authentication before enabling backup codes.'
 			: `You have
 				${ backupCodesEnabled ? '' : 'not' }
 				verified your backup codes for two-factor authentication.`;
 
 	return (
-		<>
+		<div className={ 'wporg-2fa__account-status' }>
 			<SettingStatusCard
 				screen="password"
 				status="enabled"
@@ -47,9 +50,9 @@ export default function AccountStatus() {
 				status={ emailStatus }
 				headerText="Account Email"
 				bodyText={
-					record.pending_email
-						? `Your account email is pending a change to ${ record.pending_email }.`
-						: `Your account email address is ${ record.email }.`
+					pendingEmail
+						? `Your account email is pending a change to ${ pendingEmail }.`
+						: `Your account email address is ${ email }.`
 				}
 			/>
 
@@ -72,7 +75,7 @@ export default function AccountStatus() {
 				bodyText={ backupBodyText }
 				disabled={ ! backupCodesEnabled }
 			/>
-		</>
+		</div>
 	);
 }
 

settings/src/components/backup-codes.js

@@ -16,7 +16,9 @@ import { refreshRecord } from '../utilities';
  * Setup and manage backup codes.
  */
 export default function BackupCodes() {
-	const { userRecord } = useContext( GlobalContext );
+	const {
+		user: { userRecord },
+	} = useContext( GlobalContext );
 	const [ regenerating, setRegenerating ] = useState( false );
 
 	const backupCodesEnabled =
@@ -35,7 +37,10 @@ export default function BackupCodes() {
  * @param props.setRegenerating
  */
 function Setup( { setRegenerating } ) {
-	const { setGlobalNotice, userRecord } = useContext( GlobalContext );
+	const {
+		setGlobalNotice,
+		user: { userRecord },
+	} = useContext( GlobalContext );
 	const [ backupCodes, setBackupCodes ] = useState( [] );
 	const [ hasPrinted, setHasPrinted ] = useState( false );
 
@@ -142,7 +147,9 @@ function CodeList( { codes } ) {
  * @param props.setRegenerating
  */
 function Manage( { setRegenerating } ) {
-	const { userRecord } = useContext( GlobalContext );
+	const {
+		user: { userRecord },
+	} = useContext( GlobalContext );
 	const remaining = userRecord.record[ '2fa_backup_codes_remaining' ];
 
 	return (

settings/src/components/email-address.js

@@ -14,8 +14,10 @@ import { GlobalContext } from '../script';
  * Render the Email setting.
  */
 export default function EmailAddress() {
-	const { userRecord } = useContext( GlobalContext );
-	const { record, edit, save, editedRecord, hasEdits, isSaving } = userRecord;
+	const {
+		user: { userRecord, isSaving },
+	} = useContext( GlobalContext );
+	const { record, edit, save, editedRecord, hasEdits } = userRecord;
 	const [ emailError, setEmailError ] = useState( '' );
 	const [ justChangedEmail, setJustChangedEmail ] = useState( false );
 

settings/src/components/password.js

@@ -25,7 +25,10 @@ import { GlobalContext } from '../script';
  * Render the Password setting.
  */
 export default function Password() {
-	const { setGlobalNotice, userRecord } = useContext( GlobalContext );
+	const {
+		setGlobalNotice,
+		user: { userRecord, isSaving },
+	} = useContext( GlobalContext );
 	const [ inputType, setInputType ] = useState( 'password' );
 	const [ hasAttemptedSave, setHasAttemptedSave ] = useState( false );
 	let passwordStrong = true; // Saved passwords have already passed the test.
@@ -58,7 +61,7 @@ export default function Password() {
 
 			setHasAttemptedSave( true );
 
-			if ( ! passwordStrong || userRecord.isSaving ) {
+			if ( ! passwordStrong || isSaving ) {
 				return;
 			}
 
@@ -74,7 +77,7 @@ export default function Password() {
 
 			setGlobalNotice( 'New password saved.' );
 		},
-		[ passwordStrong, userRecord.isSaving ]
+		[ passwordStrong, isSaving ]
 	);
 
 	const handlePasswordChange = useCallback( ( password ) => userRecord.edit( { password } ), [] );
@@ -144,7 +147,7 @@ export default function Password() {
 
 			<p>
 				<Button isPrimary disabled={ ! userRecord.editedRecord.password } type="submit">
-					{ userRecord.isSaving ? 'Saving...' : 'Save password' }
+					{ isSaving ? 'Saving...' : 'Save password' }
 				</Button>
 
 				{ window.crypto?.getRandomValues && (

settings/src/components/revalidate-modal.js

@@ -26,7 +26,10 @@ export default function RevalidateModal() {
 }
 
 function RevalidateIframe() {
-	const { setGlobalNotice, userRecord } = useContext( GlobalContext );
+	const {
+		setGlobalNotice,
+		user: { userRecord },
+	} = useContext( GlobalContext );
 	const ref = useRef();
 
 	useEffect( () => {

settings/src/components/tests/password/password.test.js

@@ -32,15 +32,17 @@ apiFetch.nonceMiddleware = { nonce: '' };
 
 // Default mock context
 const mockContext = {
-	userRecord: {
-		editedRecord: {
-			password: 'password',
-		},
-		edit: jest.fn(),
-		save: jest.fn(),
-		hasEdits: false,
-		record: {
-			'2fa_required': true,
+	user: {
+		userRecord: {
+			editedRecord: {
+				password: 'password',
+			},
+			edit: jest.fn(),
+			save: jest.fn(),
+			hasEdits: false,
+			record: {
+				'2fa_required': true,
+			},
 		},
 		isSaving: false,
 	},
@@ -57,8 +59,8 @@ describe( 'Password', () => {
 	} );
 
 	afterEach( () => {
-		mockContext.userRecord.edit.mockReset();
-		mockContext.userRecord.save.mockReset();
+		mockContext.user.userRecord.edit.mockReset();
+		mockContext.user.userRecord.save.mockReset();
 		mockContext.setGlobalNotice.mockReset();
 	} );
 
@@ -84,8 +86,8 @@ describe( 'Password', () => {
 		it( 'should display the weak password notice after submitting', () => {
 			// State: the user has updated their password to something weak
 			// although the strength is not tested here.
-			mockContext.userRecord.editedRecord.password = 'weak';
-			mockContext.userRecord.hasEdits = true;
+			mockContext.user.userRecord.editedRecord.password = 'weak';
+			mockContext.user.userRecord.hasEdits = true;
 
 			useContext.mockReturnValue( mockContext );
 
@@ -112,8 +114,8 @@ describe( 'Password', () => {
 		it( 'should display the strong password notice', () => {
 			// State: the user has updated their password to something strong
 			// although the strength is not tested here.
-			mockContext.userRecord.editedRecord.password = '@#4asdf34asdfasdf';
-			mockContext.userRecord.hasEdits = true;
+			mockContext.user.userRecord.editedRecord.password = '@#4asdf34asdfasdf';
+			mockContext.user.userRecord.hasEdits = true;
 
 			useContext.mockReturnValue( mockContext );
 
@@ -145,16 +147,16 @@ describe( 'Password', () => {
 		const input = getByLabelText( 'New Password' );
 		const newPassword = 'this is a password';
 		fireEvent.change( input, { target: { value: newPassword } } );
-		expect( mockContext.userRecord.edit ).toHaveBeenCalledWith( {
+		expect( mockContext.user.userRecord.edit ).toHaveBeenCalledWith( {
 			password: newPassword,
 		} );
 	} );
 
 	it( 'should submit form on button press', () => {
 		// State: the user has updated their password to something strong
 		// although the strength is not tested here.
-		mockContext.userRecord.editedRecord.password = '@#4asdf34asdfasdf';
-		mockContext.userRecord.hasEdits = true;
+		mockContext.user.userRecord.editedRecord.password = '@#4asdf34asdfasdf';
+		mockContext.user.userRecord.hasEdits = true;
 
 		useContext.mockReturnValue( mockContext );
 
@@ -171,7 +173,7 @@ describe( 'Password', () => {
 		const saveButton = buttons.filter( ( button ) => button.type === 'submit' )[ 0 ];
 		fireEvent.click( saveButton );
 
-		expect( mockContext.userRecord.save ).toHaveBeenCalled();
+		expect( mockContext.user.userRecord.save ).toHaveBeenCalled();
 	} );
 
 	it( 'should submit form on enter', () => {
@@ -186,6 +188,6 @@ describe( 'Password', () => {
 		const input = getByLabelText( 'New Password' );
 		fireEvent.submit( input );
 
-		expect( mockContext.userRecord.save ).toHaveBeenCalled();
+		expect( mockContext.user.userRecord.save ).toHaveBeenCalled();
 	} );
 } );

settings/src/components/tests/utlitites.test.js

@@ -9,12 +9,12 @@ import { useEntityRecord } from '@wordpress/core-data';
 /**
  * Local dependencies
  */
-import { useGetUserRecord, refreshRecord } from '../../utilities';
+import { useUser, refreshRecord } from '../../utilities';
 
 jest.mock( '@wordpress/data' );
 jest.mock( '@wordpress/core-data' );
 
-describe( 'useGetUserRecord', () => {
+describe( 'useUser', () => {
 	beforeEach( () => {
 		useSelect.mockClear();
 		useEntityRecord.mockClear();
@@ -23,37 +23,96 @@ describe( 'useGetUserRecord', () => {
 	it( 'should call useEntityRecord with correct arguments', () => {
 		useEntityRecord.mockReturnValue( { record: {} } );
 
-		useGetUserRecord( 1 );
+		useUser( 1 );
 
 		expect( useEntityRecord ).toHaveBeenCalledWith( 'root', 'user', 1 );
 	} );
 
-	it( 'should set isSaving in userRecord', () => {
+	it( 'should set isSaving in user', () => {
 		useEntityRecord.mockReturnValue( { record: {} } );
 		useSelect.mockReturnValue( true );
 
-		const result = useGetUserRecord( 1 );
+		const user = useUser( 1 );
 
 		expect( useSelect ).toHaveBeenCalled();
-		expect( result.isSaving ).toBeTruthy();
+		expect( user.isSaving ).toBeTruthy();
 	} );
 
-	it( 'should initialize password in userRecord.record if not defined', () => {
+	it( 'should initialize password in user.userRecord.record if not defined', () => {
 		useEntityRecord.mockReturnValue( { record: {} } );
 
-		const result = useGetUserRecord( 1 );
+		const user = useUser( 1 );
 
-		expect( result.record.password ).toBe( '' );
+		expect( user.userRecord.record.password ).toBe( '' );
 	} );
 
-	it( 'should not overwrite password in userRecord.record if already defined', () => {
+	it( 'should not overwrite password in user.userRecord.record if already defined', () => {
 		useEntityRecord.mockReturnValue( {
 			record: { password: 'test-password' },
 		} );
 
-		const result = useGetUserRecord( 1 );
+		const user = useUser( 1 );
 
-		expect( result.record.password ).toBe( 'test-password' );
+		expect( user.userRecord.record.password ).toBe( 'test-password' );
+	} );
+
+	it( 'should set hasPrimaryProvider to false if user.userRecord.record is undefined', () => {
+		useEntityRecord.mockReturnValue( {} );
+
+		const user = useUser( 1 );
+
+		expect( user.hasPrimaryProvider ).toBe( false );
+	} );
+
+	it( 'should set hasPrimaryProvider to false if 2fa_available_providers is undefined', () => {
+		useEntityRecord.mockReturnValue( { record: {} } );
+
+		const user = useUser( 1 );
+
+		expect( user.hasPrimaryProvider ).toBe( false );
+	} );
+
+	it( 'should set hasPrimaryProvider to false if 2fa_available_providers is empty', () => {
+		useEntityRecord.mockReturnValue( { record: { '2fa_available_providers': [] } } );
+
+		const user = useUser( 1 );
+
+		expect( user.hasPrimaryProvider ).toBe( false );
+	} );
+
+	it( 'should set hasPrimaryProvider to false if 2fa_available_providers only has Two_Factor_Backup_Codes', () => {
+		useEntityRecord.mockReturnValue( {
+			record: { '2fa_available_providers': [ 'Two_Factor_Backup_Codes' ] },
+		} );
+
+		const user = useUser( 1 );
+
+		expect( user.hasPrimaryProvider ).toBe( false );
+	} );
+
+	it( 'should set hasPrimaryProvider to true if 2fa_available_providers has Two_Factor_Totp', () => {
+		useEntityRecord.mockReturnValue( {
+			record: { '2fa_available_providers': [ 'Two_Factor_Totp', 'Two_Factor_Backup_Codes' ] },
+		} );
+
+		const user = useUser( 1 );
+
+		expect( user.hasPrimaryProvider ).toBe( true );
+	} );
+
+	it( 'should set hasPrimaryProvider to true if 2fa_available_providers has TwoFactor_Provider_WebAuthn', () => {
+		useEntityRecord.mockReturnValue( {
+			record: {
+				'2fa_available_providers': [
+					'TwoFactor_Provider_WebAuthn',
+					'Two_Factor_Backup_Codes',
+				],
+			},
+		} );
+
+		const user = useUser( 1 );
+
+		expect( user.hasPrimaryProvider ).toBe( true );
 	} );
 } );