Merge trunk.

WordPress · Aug 29, 2024 · 56663ac · 56663ac
2 parents 1542311 + 91f6fce
commit 56663ac
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 42 deletions.
diff --git a/settings/src/components/account-status.js b/settings/src/components/account-status.js
@@ -53,7 +53,7 @@ export default function AccountStatus() {
 			<SettingStatusCard
 				screen="email"
 				status={ emailStatus }
-				headerText="Account Email"
+				headerText="Account email"
 				bodyText={
 					pendingEmail
 						? `Your account email is pending a change to ${ pendingEmail }.`
@@ -64,7 +64,7 @@ export default function AccountStatus() {
 			<SettingStatusCard
 				screen="webauthn"
 				status={ hasPrimaryProvider && ! webAuthnEnabled ? 'info' : webAuthnEnabled }
-				headerText="Two-Factor Security Key"
+				headerText="Two-factor security key"
 				bodyText={
 					webAuthnEnabled
 						? 'You have two-factor authentication enabled using security keys.'
@@ -76,7 +76,7 @@ export default function AccountStatus() {
 			<SettingStatusCard
 				screen="totp"
 				status={ hasPrimaryProvider && ! totpEnabled ? 'info' : totpEnabled }
-				headerText="Two-Factor App"
+				headerText="Two-factor app"
 				bodyText={
 					totpEnabled
 						? 'You have two-factor authentication enabled using an app.'
@@ -90,7 +90,7 @@ export default function AccountStatus() {
 				status={
 					! hasPrimaryProvider && ! backupCodesEnabled ? 'pending' : backupCodesEnabled
 				}
-				headerText="Two-Factor Backup Codes"
+				headerText="Two-factor backup codes"
 				bodyText={ backupBodyText }
 				disabled={ ! hasPrimaryProvider }
 			/>

diff --git a/settings/src/components/screen-navigation.js b/settings/src/components/screen-navigation.js
@@ -32,15 +32,7 @@ const ScreenNavigation = ( { screen, children, title = '', canNavigate = true }
 				/>
 			) }
 
-			<h3>
-				{ title.length
-					? title
-					: screen
-							.replace( '-', ' ' )
-							.replace( 'totp', 'Two-Factor Authentication' )
-							.replace( 'webauthn', 'Two-Factor Security Key' )
-							.replace( 'svn', 'SVN' ) }
-			</h3>
+			<h3>{ title }</h3>
 		</CardHeader>
 		<CardBody className={ 'wporg-2fa__' + screen }>{ children }</CardBody>
 	</Card>

diff --git a/settings/src/components/screen-navigation.scss b/settings/src/components/screen-navigation.scss
@@ -21,7 +21,6 @@
 	h3 {
 		font-weight: 600;
 		margin: unset;
-		text-transform: capitalize;
 	}
 
 }
diff --git a/settings/src/components/settings.js b/settings/src/components/settings.js
@@ -25,38 +25,57 @@ export default function Settings() {
 
 	// The index is the URL slug and the value is the React component.
 	const components = {
-		home: <AccountStatus />,
-		email: <EmailAddress />,
-		password: <Password />,
-		totp: (
-			<TOTP
-				onSuccess={ () => {
-					if ( ! backupCodesEnabled ) {
-						navigateToScreen( 'backup-codes' );
-					} else {
-						navigateToScreen( 'home' );
-					}
-				} }
-			/>
-		),
-		webauthn: (
-			<WebAuthn
-				onKeyAdd={ () => {
-					if ( ! backupCodesEnabled ) {
-						navigateToScreen( 'backup-codes' );
-					}
-				} }
-			/>
-		),
-		'backup-codes': <BackupCodes onSuccess={ () => navigateToScreen( 'home' ) } />,
-		'svn-password': <SVNPassword />,
+		email: {
+			title: 'Account email',
+			component: <EmailAddress />,
+		},
+		password: {
+			title: 'Password',
+			component: <Password />,
+		},
+		totp: {
+			title: 'Two-factor authentication',
+			component: (
+				<TOTP
+					onSuccess={ () => {
+						if ( ! backupCodesEnabled ) {
+							navigateToScreen( 'backup-codes' );
+						} else {
+							navigateToScreen( 'home' );
+						}
+					} }
+				/>
+			),
+		},
+		'backup-codes': {
+			title: 'Backup codes',
+			component: <BackupCodes onSuccess={ () => navigateToScreen( 'home' ) } />,
+		},
+		webauthn: {
+			title: 'Two-factor security key',
+			component: (
+				<WebAuthn
+					onKeyAdd={ () => {
+						if ( ! backupCodesEnabled ) {
+							navigateToScreen( 'backup-codes' );
+						}
+					} }
+				/>
+			),
+		},
+		'svn-password': {
+			title: 'SVN Password',
+			component: <SVNPassword />,
+		},
 	};
 
 	const currentScreenComponent =
 		'home' === screen ? (
-			components[ screen ]
+			<AccountStatus />
 		) : (
-			<ScreenNavigation screen={ screen }>{ components[ screen ] }</ScreenNavigation>
+			<ScreenNavigation screen={ screen } title={ components[ screen ].title }>
+				{ components[ screen ].component }
+			</ScreenNavigation>
 		);
 
 	return currentScreenComponent;

diff --git a/settings/src/components/totp.js b/settings/src/components/totp.js
@@ -116,7 +116,7 @@ function Setup( { setSuccess } ) {
 	return (
 		<div className="wporg-2fa__totp_setup-container">
 			<p className="wporg-2fa__screen-intro">
-				Two-Factor Authentication adds an extra layer of security to your account. Use a
+				Two-factor authentication adds an extra layer of security to your account. Use a
 				phone app like{ ' ' }
 				<a
 					href="https://support.google.com/accounts/answer/1066447"