Display the account status screen behind the modal

WordPress · May 9, 2023 · a82b109 · a82b109
1 parent 5bcde05
commit a82b109
Showing 1 changed file with 32 additions and 29 deletions.
diff --git a/settings/src/script.js b/settings/src/script.js
@@ -130,47 +130,50 @@ function Main( { userId } ) {
 		return <Spinner />;
 	}
 
-	let screenContent;
+	let screenContent = (
+		<Card>
+			<CardHeader className="wporg-2fa__navigation" size="xSmall">
+				<ScreenLink
+					screen="account-status"
+					ariaLabel="Back to the account status page"
+					anchorText={
+						<>
+							<Icon icon={ chevronLeft } />
+							Back
+						</>
+					}
+				/>
+
+				<h3>
+					{ screen.replace( '-', ' ' ).replace( 'totp', 'Two-Factor Authentication' ) }
+				</h3>
+			</CardHeader>
+
+			<CardBody className={ 'wporg-2fa__' + screen }>
+				<CurrentScreen />
+			</CardBody>
+		</Card>
+	);
 
 	if ( 'account-status' === screen ) {
 		screenContent = (
-			<div className={ 'wporg-2fa__' + screen }>
+			<div className={ 'wporg-2fa__account-status' }>
 				<AccountStatus />
 			</div>
 		);
 	} else if (
 		twoFactorRequiredScreens.includes( screen ) &&
 		userRecord.record[ '2fa_available_providers' ] &&
 		userRecord.record[ '2fa_revalidation' ] &&
-		userRecord.record[ '2fa_revalidation' ].expires_at <= new Date().getTime() / 1000
+		userRecord.record[ '2fa_revalidation' ].expires_at <= new Date().getTime() / 10
 	) {
-		screenContent = <RevalidateModal />;
-	} else {
 		screenContent = (
-			<Card>
-				<CardHeader className="wporg-2fa__navigation" size="xSmall">
-					<ScreenLink
-						screen="account-status"
-						ariaLabel="Back to the account status page"
-						anchorText={
-							<>
-								<Icon icon={ chevronLeft } />
-								Back
-							</>
-						}
-					/>
-
-					<h3>
-						{ screen
-							.replace( '-', ' ' )
-							.replace( 'totp', 'Two-Factor Authentication' ) }
-					</h3>
-				</CardHeader>
-
-				<CardBody className={ 'wporg-2fa__' + screen }>
-					<CurrentScreen />
-				</CardBody>
-			</Card>
+			<>
+				<div className={ 'wporg-2fa__account-status' }>
+					<AccountStatus />
+				</div>
+				<RevalidateModal />
+			</>
 		);
 	}