Disable Backup Codes UI until primary provider enabled

WordPress · May 16, 2023 · 7139254 · 7139254
1 parent 182a87a
commit 7139254
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 41 deletions.
diff --git a/settings/src/components/account-status.js b/settings/src/components/account-status.js
@@ -18,14 +18,20 @@ export default function AccountStatus() {
 	const { userRecord } = useContext( GlobalContext );
 	const { record } = userRecord;
 	const emailStatus = record.pending_email ? 'pending' : 'ok';
-	const totpStatus = record[ '2fa_available_providers' ].includes( 'Two_Factor_Totp' )
-		? 'enabled'
-		: 'disabled';
-	const backupCodesStatus = record[ '2fa_available_providers' ].includes(
-		'Two_Factor_Backup_Codes'
-	)
-		? 'enabled'
-		: 'disabled';
+	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 backupBodyText =
+		! backupCodesEnabled && ! primaryProviderEnabled
+			? 'Please enable Two-Factor Authentication before enabling backup codes.'
+			: `You have
+				${ backupCodesEnabled ? '' : 'not' }
+				verified your backup codes for two-factor authentication.`;
 
 	return (
 		<>
@@ -49,10 +55,10 @@ export default function AccountStatus() {
 
 			<SettingStatusCard
 				screen="totp"
-				status={ totpStatus }
+				status={ totpEnabled }
 				headerText="Two-Factor Authentication"
 				bodyText={
-					'enabled' === totpStatus
+					totpEnabled
 						? /* @todo update this when hardware tokens become an additional option. */
 						  'You have two-factor authentication enabled using an app.'
 						: 'You do not have two-factor authentication enabled.'
@@ -61,11 +67,10 @@ export default function AccountStatus() {
 
 			<SettingStatusCard
 				screen="backup-codes"
-				status={ backupCodesStatus }
+				status={ backupCodesEnabled }
 				headerText="Two-Factor Backup Codes"
-				bodyText={ `You have ${
-					'enabled' === backupCodesStatus ? '' : 'not'
-				} verified your backup codes for two-factor authentication.` }
+				bodyText={ backupBodyText }
+				disabled={ ! backupCodesEnabled }
 			/>
 		</>
 	);
@@ -79,27 +84,29 @@ export default function AccountStatus() {
  * @param props.status
  * @param props.headerText
  * @param props.bodyText
+ * @param props.disabled
  */
-function SettingStatusCard( { screen, status, headerText, bodyText } ) {
+function SettingStatusCard( { screen, status, headerText, bodyText, disabled = false } ) {
+	const cardContent = (
+		<CardBody>
+			<StatusIcon status={ status } />
+			<h3 aria-label={ 'Click to enter the ' + headerText + ' setting page.' }>
+				{ headerText }
+			</h3>
+			<p>{ bodyText }</p>
+			<Icon icon={ chevronRight } size={ 26 } className="wporg-2fa__status-card-open" />
+		</CardBody>
+	);
+
+	let classes = 'wporg-2fa__status-card wporg-2fa__status-card-' + screen;
+
+	if ( disabled ) {
+		classes += ' is-disabled';
+	}
+
 	return (
-		<Card className={ 'wporg-2fa__status-card wporg-2fa__status-card-' + screen }>
-			<ScreenLink
-				screen={ screen }
-				anchorText={
-					<CardBody>
-						<StatusIcon status={ status } />
-						<h3 aria-label={ 'Click to enter the ' + headerText + ' setting page.' }>
-							{ headerText }
-						</h3>
-						<p>{ bodyText }</p>
-						<Icon
-							icon={ chevronRight }
-							size={ 26 }
-							className="wporg-2fa__status-card-open"
-						/>
-					</CardBody>
-				}
-			/>
+		<Card className={ classes }>
+			{ disabled ? cardContent : <ScreenLink screen={ screen } anchorText={ cardContent } /> }
 		</Card>
 	);
 }
@@ -113,6 +120,10 @@ function SettingStatusCard( { screen, status, headerText, bodyText } ) {
 function StatusIcon( { status } ) {
 	let icon;
 
+	if ( 'boolean' === typeof status ) {
+		status = status ? 'enabled' : 'disabled';
+	}
+
 	switch ( status ) {
 		case 'ok':
 		case 'enabled':

diff --git a/settings/src/components/account-status.scss b/settings/src/components/account-status.scss
@@ -5,6 +5,12 @@
 			z-index: 1;
 		}
 
+		&.is-disabled,
+		&.is-disabled .wporg-2fa__status-card-open {
+			opacity: .6;
+			cursor: not-allowed;
+		}
+
 		a {
 			display: block;
 			text-decoration: none;

diff --git a/settings/src/components/backup-codes.js b/settings/src/components/backup-codes.js
@@ -19,13 +19,10 @@ export default function BackupCodes() {
 	const { userRecord } = useContext( GlobalContext );
 	const [ regenerating, setRegenerating ] = useState( false );
 
-	const backupCodesStatus = userRecord.record[ '2fa_available_providers' ].includes(
-		'Two_Factor_Backup_Codes'
-	)
-		? 'enabled'
-		: 'disabled';
+	const backupCodesEnabled =
+		userRecord.record[ '2fa_available_providers' ].includes( 'Two_Factor_Backup_Codes' );
 
-	if ( 'enabled' === backupCodesStatus && ! regenerating ) {
+	if ( backupCodesEnabled && ! regenerating ) {
 		return <Manage setRegenerating={ setRegenerating } />;
 	}
 	return <Setup setRegenerating={ setRegenerating } />;

diff --git a/settings/src/components/totp.js b/settings/src/components/totp.js
@@ -17,9 +17,9 @@ import { GlobalContext } from '../script';
 export default function TOTP() {
 	const { userRecord } = useContext( GlobalContext );
 	const availableProviders = userRecord.record[ '2fa_available_providers' ];
-	const totpStatus = availableProviders.includes( 'Two_Factor_Totp' ) ? 'enabled' : 'disabled';
+	const totpEnabled = availableProviders.includes( 'Two_Factor_Totp' );
 
-	if ( 'enabled' === totpStatus ) {
+	if ( totpEnabled ) {
 		return <Manage />;
 	}