ScreenLink: Introduce component to simplify linking between screens.

The caller no longer needs to deal with the importing `clickScreenLink` and setting it as the `onClick` handler.

settings/src/components/account-status.js

@@ -9,6 +9,7 @@ import { Icon, cancelCircleFilled, check, chevronRight, warning } from '@wordpre
  * Internal dependencies
  */
 import { GlobalContext } from '../script';
+import ScreenLink from './screen-link';
 
 /**
  * Render the Account Status.
@@ -65,27 +66,24 @@ export default function AccountStatus() {
  * Render a card for the status of the given setting.
  */
 function SettingStatusCard( { screen, status, headerText, bodyText } ) {
-	const { clickScreenLink } = useContext( GlobalContext );
-
-	let screenUrl = new URL( document.location.href );
-	screenUrl.searchParams.set( 'screen', screen );
-
 	return (
 		<Card className={ 'wporg-2fa__status-card wporg-2fa__status-card-' + screen }>
-			<a
-				href={ screenUrl.href }
-				onClick={ ( event ) => clickScreenLink( event, screen ) }
-			>
-				<CardHeader>
-					<StatusIcon status={ status } />
-					{ headerText }
-				</CardHeader>
+			<ScreenLink
+				screen={ screen }
+				anchorText={
+					<>
+						<CardHeader>
+							<StatusIcon status={ status } />
+							{ headerText }
+						</CardHeader>
 
-				<CardBody>
-					<p>{ bodyText }</p>
-					<Icon icon={ chevronRight } />
-				</CardBody>
-			</a>
+						<CardBody>
+							<p>{ bodyText }</p>
+							<Icon icon={ chevronRight } />
+						</CardBody>
+					</>
+				}
+			/>
 		</Card>
 	);
 }

settings/src/components/screen-link.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { GlobalContext } from '../script';
+
+export default function ScreenLink( { screen, anchorText, buttonStyle = false } ) {
+	const { clickScreenLink } = useContext( GlobalContext );
+	const classes = [];
+	let screenUrl = new URL( document.location.href );
+
+	screenUrl.searchParams.set( 'screen', screen );
+
+	if ( 'primary' === buttonStyle ) {
+		classes.push( 'components-button' );
+		classes.push( 'is-primary' );
+	} else if ( 'secondary' === buttonStyle ) {
+		classes.push( 'components-button' );
+		classes.push( 'is-secondary' );
+	}
+
+	return (
+		<a
+			href={ screenUrl.href }
+			onClick={ ( event ) => clickScreenLink( event, screen ) }
+			className={ classes.join( ' ' ) }
+		>
+			{ anchorText }
+		</a>
+	)
+}

settings/src/components/screen-link.scss

@@ -0,0 +1,6 @@
+/* Overwrite bbPress styles with Gutenberg styles */
+#bbpress-forums .wp-block-wporg-two-factor-settings a.components-button,
+#bbpress-forums .wp-block-wporg-two-factor-settings a.components-button:hover {
+	box-shadow: inset 0 0 0 1px var(--wp-components-color-accent,var(--wp-admin-theme-color,#007cba));
+	text-decoration: none;
+}

settings/src/components/totp.js

@@ -10,6 +10,7 @@ import { RawHTML, useCallback, useContext, useEffect, useState } from '@wordpres
  * Internal dependencies
  */
 import SetupProgressBar from './setup-progress-bar';
+import ScreenLink from './screen-link'
 import { refreshRecord } from '../utilities';
 import { GlobalContext } from '../script';
 
@@ -75,9 +76,6 @@ function Setup() {
 		}
 	} );
 
-	const cancelUrl = new URL( document.location.href );
-	cancelUrl.searchParams.set( 'screen', 'account-status' );
-
 	return (
 		<>
 			<SetupProgressBar step="totp" />
@@ -108,7 +106,6 @@ function Setup() {
 				setVerifyCode={ setVerifyCode }
 				qrCodeUrl={ qrCodeUrl }
 				secretKey={ secretKey }
-				cancelUrl={ cancelUrl }
 			/>
 
 			{ error &&
@@ -197,8 +194,7 @@ function createQrCode( data ) {
 /**
  * Render the form for entering the TOTP code.
  */
-function SetupForm( { handleEnable, verifyCode, setVerifyCode, qrCodeUrl, secretKey, cancelUrl } ) {
-	const { clickScreenLink } = useContext( GlobalContext );
+function SetupForm( { handleEnable, verifyCode, setVerifyCode, qrCodeUrl, secretKey } ) {
 	const verifyCodeLength = 6;
 	const canSubmit        = qrCodeUrl && secretKey && verifyCode && verifyCode.length === verifyCodeLength;
 
@@ -230,14 +226,7 @@ function SetupForm( { handleEnable, verifyCode, setVerifyCode, qrCodeUrl, secret
 					Enable
 				</Button>
 
-				<Button
-					isLink
-					href={ cancelUrl.href }
-					onClick={ ( event ) => clickScreenLink( event, 'account-status' ) }
-				>
-					Cancel
-					{/* todo this should look like a button not a link */}
-				</Button>
+				<ScreenLink screen="account-status" anchorText="Cancel" buttonStyle="secondary" />
 			</div>
 		</form>
 	);
@@ -278,7 +267,7 @@ function Manage() {
 
 			<p>
 				Make sure you've created { ' ' }
-				<a href="?screen=backup-codes" onClick={ ( event ) => clickScreenLink( event, 'backup-codes' ) }>backup codes</a> { ' ' }
+				<ScreenLink screen="backup-codes" anchorText="backup codes" /> { ' ' }
 				and saved them in a safe location, in case you ever lose your device. You may also need them when transitioning to a new device.
 				Without them you may permenantly lose access to your account.
 			</p>

settings/src/components/totp.scss

@@ -10,6 +10,7 @@
 
 .wporg-2fa__verify-code {
 	width: 10ch;
+	margin-bottom: 20px;
 }
 
 .wporg-2fa__enabled-status {

settings/src/script.js

@@ -9,6 +9,7 @@ import { Card, CardHeader, CardBody, Flex, Spinner } from '@wordpress/components
  * Internal dependencies
  */
 import { getUserRecord } from './utilities';
+import ScreenLink from './components/screen-link'
 import AccountStatus from './components/account-status';
 import Password from './components/password';
 import EmailAddress from './components/email-address';
@@ -108,13 +109,15 @@ function Main( { userId } ) {
 			<Card>
 				<CardHeader className="wporg-2fa__navigation" size="xSmall">
 					<Flex>
-						<a
-							href="?screen=account-status"
-							onClick={ ( event ) => clickScreenLink( event, 'account-status' ) }
-						>
-							<Icon icon={ arrowLeft } />
-							Back
-						</a>
+						<ScreenLink
+							screen="account-status"
+							anchorText={
+								<>
+									<Icon icon={ arrowLeft } />
+									Back
+								</>
+							}
+						/>
 
 						<h3>{ screen.replace( '-', ' ' ).replace( 'totp', 'One Time Passwords' ) }</h3>
 					</Flex>

settings/src/style.scss

@@ -28,3 +28,4 @@
 @import "components/totp";
 @import "components/setup-progress-bar";
 @import "components/global-notice";
+@import "components/screen-link";