add setupprogressback to totp and backup codes

settings/src/components/backup-codes.js

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import SetupProgressBar from './setup-progress-bar';
+
 //
 export default function TOTP( { userRecord } ) {
 	const enabledProviders  = Object.values( userRecord.record[ '2fa_enabled_providers' ] );
@@ -16,16 +21,13 @@ export default function TOTP( { userRecord } ) {
 function Setup() {
 	return (
 		<>
+			<SetupProgressBar step="backup-codes" />
+
 			<p>
 				Backup codes let you access your account if your primary two-factor authentication method is unavailable, like if your phone is lost or stolen.
 				We ask that you print this list of ten unique, one-time-use backup codes and keep the list in a safe place.
 			</p>
 
-			<p>
-				Backup codes let you access your account if your phone is lost or stolen, or even just accidentally run through the washing machine!
-
-			</p>
-
 			<code>
 				backup codes
 			</code>

settings/src/components/setup-progress-bar.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon, lock, reusableBlock } from '@wordpress/icons';
+
+export default function SetupProgressBar( { step } ) {
+	return (
+		<ul className="wporg-2fa__setup-steps">
+			<li className={ 'totp' === step ? 'is-enabled' : 'is-disabled' }>
+				<Icon icon={ lock } />
+				Verify Codes
+			</li>
+
+			<li className={ 'backup-codes' === step ? 'is-enabled' : 'is-disabled' }>
+				<Icon icon={ reusableBlock } />
+				Backup Codes
+			</li>
+		</ul>
+	);
+}

settings/src/components/setup-progress-bar.scss

@@ -0,0 +1,11 @@
+// todo style this closer to the mockup
+.wporg-2fa__setup-steps {
+	.is-enabled {
+		font-weight: bold;
+		color: blue; // todo use color var w/ correct color
+	}
+
+	.is-disabled {
+		color: grey; // todo use color var w/ correct color
+	}
+}

settings/src/components/totp.js

@@ -1,17 +1,16 @@
-/**
- * External dependencies
- */
-//const { qrcode } = window; // Loaded via block.json.
-// qr code generation fails if ^ enabled. maybe b/c it creates the var before the lib is loaded?
-
 /**
  * WordPress dependencies
  */
 import apiFetch from '@wordpress/api-fetch';
 import { Button, Notice } from '@wordpress/components';
-import { Icon,  cancelCircleFilled, lock, reusableBlock } from '@wordpress/icons';
+import { Icon, cancelCircleFilled } from '@wordpress/icons';
 import { RawHTML, useCallback, useEffect, useState } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import SetupProgressBar from './setup-progress-bar';
+
 export default function TOTP( { userRecord, clickScreenLink } ) {
 	const enabledProviders = Object.values( userRecord.record[ '2fa_enabled_providers' ] );
 	const totpStatus       = enabledProviders.includes( 'Two_Factor_Totp' ) ? 'enabled' : 'disabled';
@@ -59,7 +58,7 @@ function Setup( { userID, clickScreenLink } ) {
 		event.preventDefault();
 
 		try {
-			const response = await apiFetch( {
+			await apiFetch( {
 				path: '/two-factor/1.0/totp/',
 				method: 'POST',
 				data: {
@@ -81,10 +80,17 @@ function Setup( { userID, clickScreenLink } ) {
 
 	return (
 		<>
-			<SetupIntro step="verify-codes" />
+			<SetupProgressBar step="totp" />
+
+			<p>
+				Two-Factor Authentication adds an extra layer of security to your account.
+				Once enabled, logging in to WordPress.org will require you to enter a unique passcode
+				generated by an app on your mobile device , in addition to your username and password.
+			</p>
 
 			<p>
 				Scan this QR code with the authenticator app on your mobile device.
+				<br />
 
 				<Button isLink onClick={ () => console.log( 'show code' ) }>
 					Can't scan the code?
@@ -163,9 +169,6 @@ function Setup( { userID, clickScreenLink } ) {
  */
 function createQrCode( data ) {
 	const { qrcode } = window; // Loaded via block.json.
-	// has to be in here b/c in the global scope it's not defined yet?
-	// should have some way of declaring that this script depends on the other being loaded.
-	// could maybe do in php w/ wp_register_script(), but that might be the "old way" of doing it.
 
 	/*
 	 * 0 = Automatically select the version, to avoid going over the limit of URL
@@ -180,33 +183,6 @@ function createQrCode( data ) {
 	return qr.createSvgTag( 5 );
 }
 
-{/* move to separate file so it can be imported into backup codes */}
-function SetupIntro( step = 'verify-codes' ) {
-	// todo highlight the current step based on param
-
-	return (
-		<>
-			<ul>
-				<li>
-					<Icon icon={ lock } />
-					Verify Codes
-				</li>
-
-				<li>
-					<Icon icon={ reusableBlock } />
-					Backup Codes
-				</li>
-			</ul>
-
-			<p>
-				Two-Step Authentication adds an extra layer of security to your account.
-				Once enabled, logging in to WordPress.org will require you to enter a unique passcode
-				generated by an app on your mobile device , in addition to your username and password.
-			</p>
-		</>
-	);
-}
-
 //
 function Manage() {
 	return (

settings/src/style.scss

@@ -26,3 +26,4 @@
 @import "components/password";
 @import "components/email-address";
 @import "components/totp";
+@import "components/setup-progress-bar";