Add a wizard component for first time configurations.

settings/src/components/backup-codes.js

@@ -18,8 +18,11 @@
 
 /**
  * Setup and manage backup codes.
+ *
+ * @param props
+ * @param props.onSuccess
  */
-export default function BackupCodes() {
+export default function BackupCodes( { onSuccess = () => {} } ) {
 	const {
 		user: { backupCodesEnabled, hasPrimaryProvider, backupCodesRemaining },
 		backupCodesVerified,
@@ -32,10 +35,7 @@
 			<Notice status="error" isDismissible={ false }>
 				<Icon icon={ cancelCircleFilled } />
 				Please
-				<ScreenLink
-					screen="account-status"
-					anchorText="enable a Two-Factor security key or app"
-				/>
+				<ScreenLink screen="home" anchorText="enable a Two-Factor security key or app" />
 				before enabling backup codes.
 			</Notice>
 		);
@@ -47,7 +47,7 @@
 		regenerating ||
 		! backupCodesVerified
 	) {
-		return <Setup setRegenerating={ setRegenerating } />;
+		return <Setup setRegenerating={ setRegenerating } onSuccess={ onSuccess } />;
 	}
 
 	return <Manage setRegenerating={ setRegenerating } />;
@@ -58,8 +58,9 @@
  *
  * @param props
  * @param props.setRegenerating
+ * @param props.onSuccess
  */
-function Setup( { setRegenerating } ) {
+function Setup( { setRegenerating, onSuccess } ) {
 	const {
 		setGlobalNotice,
 		user: { userRecord },
@@ -101,16 +102,17 @@
 		};
 
 		generateCodes();
 	}, [] );
 
 	// Finish the setup process.
 	const handleFinished = useCallback( async () => {
 		// TODO: Add try catch here after https://github.com/WordPress/wporg-two-factor/pull/187/files is merged.
 		// The codes have already been saved to usermeta, see `generateCodes()` above.
 		setBackupCodesVerified( true );
 		await refreshRecord( userRecord ); // This has the intended side-effect of redirecting to the Manage screen.
 		setGlobalNotice( 'Backup codes have been enabled.' );
 		setRegenerating( false );
+		onSuccess();
 	} );
 
 	return (

settings/src/components/backup-codes.scss

@@ -10,6 +10,12 @@
 			margin: 0;
 		}
 
+		@media (max-width: 600px) {
+			ol {
+				column-count: 1;
+			}
+		}
+
 		li::marker {
 			/* todo: a11y issues w/ contrast here? mockup calls for this to be lighter than the backup code
 			     -- presumably so that users don't mistakenly think it's part of the code --

settings/src/components/first-time/congratulations.js

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+
+/**
+ * Check if the URL is valid. Make sure it stays on wordpress.org.
+ *
+ * @param  url
+ * @return {boolean} Whether it's a valid URL.
+ */
+const isValidUrl = ( url ) => {
+	try {
+		const { hostname } = new URL( url );
+		return hostname.endsWith( 'wordpress.org' );
+	} catch ( exception ) {
+		return false;
+	}
+};
+
+export default function Congratulations() {
+	return (
+		<>
+			<p>
+				To ensure the highest level of security for your account, please remember to keep
+				your authentication methods up-to-date. We recommend configuring multiple
+				authentication methods to guarantee you always have access to your account.
+			</p>
+			<div className="wporg-2fa__submit-actions">
+				<Button
+					onClick={ () => {
+						const redirectTo = new URLSearchParams( window.location.search ).get(
+							'redirect_to'
+						);
+
+						if ( redirectTo && isValidUrl( redirectTo ) ) {
+							window.location.href = redirectTo;
+						} else {
+							window.location.href =
+								'//profiles.wordpress.org/me/profile/edit/group/3';
+						}
+					} }
+					isPrimary
+				>
+					Continue
+				</Button>
+			</div>
+		</>
+	);
+}

settings/src/components/first-time/first-time.js

@@ -0,0 +1,156 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useContext, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ScreenNavigation from '../screen-navigation';
+import TOTP from '../totp';
+import WebAuthn from '../webauthn/webauthn';
+import BackupCodes from '../backup-codes';
+import SetupProgressBar from './setup-progress-bar';
+import Home from './home';
+import Congratulations from './congratulations';
+import WordPressLogo from './wordpress-logo';
+import { GlobalContext } from '../../script';
+
+/**
+ * Render the correct component based on the URL.
+ */
+export default function FirstTime() {
+	const modalRef = useRef( null );
+	const { navigateToScreen, screen } = useContext( GlobalContext );
+
+	// The index is the URL slug and the value is the React component.
+	const screens = {
+		home: {
+			stepIndex: 0,
+			title: 'Set up two-factor authentication',
+			component: (
+				<Home
+					onSelect={ ( val ) => {
+						navigateToScreen( val );
+					} }
+				/>
+			),
+		},
+		totp: {
+			stepIndex: 1,
+			title: 'Set up one-time password',
+			component: (
+				<TOTP
+					onSuccess={ () => {
+						navigateToScreen( 'backup-codes' );
+					} }
+				/>
+			),
+		},
+		webauthn: {
+			stepIndex: 1,
+			title: 'Set up security key',
+			component: (
+				<WebAuthn
+					onKeyAdd={ () => {
+						navigateToScreen( 'backup-codes' );
+					} }
+				/>
+			),
+		},
+		'backup-codes': {
+			stepIndex: 2,
+			title: 'Print backup codes',
+			component: (
+				<BackupCodes
+					onSuccess={ () => {
+						navigateToScreen( 'congratulations' );
+					} }
+				/>
+			),
+		},
+		congratulations: {
+			stepIndex: 3,
+			component: <Congratulations />,
+		},
+	};
+
+	// Lock the scroll when the modal is open, and trap tab navigation.
+	useEffect( () => {
+		const modal = modalRef.current;
+		const focusableElements = modal.querySelectorAll(
+			'a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])'
+		);
+		const firstFocusableElement = focusableElements[ 0 ];
+		const lastFocusableElement = focusableElements[ focusableElements.length - 1 ];
+
+		const trapFocus = ( event ) => {
+			const isTabPressed = event.key === 'Tab' || event.keyCode === 9;
+			if ( ! isTabPressed ) {
+				return;
+			}
+
+			if ( event.shiftKey ) {
+				// eslint-disable-next-line @wordpress/no-global-active-element
+				if ( document.activeElement === firstFocusableElement ) {
+					lastFocusableElement.focus();
+					event.preventDefault();
+				}
+				return;
+			}
+
+			// eslint-disable-next-line @wordpress/no-global-active-element
+			if ( document.activeElement === lastFocusableElement ) {
+				firstFocusableElement.focus();
+				event.preventDefault();
+			}
+		};
+
+		modal.addEventListener( 'keydown', trapFocus );
+
+		document.querySelector( 'html' ).style.overflow = 'hidden';
+
+		// Focus the first focusable element in the modal when it opens
+		firstFocusableElement.focus();
+
+		return () => {
+			modal.removeEventListener( 'keydown', trapFocus );
+			document.querySelector( 'html' ).style.overflow = 'initial';
+		};
+	}, [ screen ] );
+
+	const currentStepIndex = screens[ screen ].stepIndex;
+	let currentScreenComponent = null;
+
+	if ( 'congratulations' === screen ) {
+		currentScreenComponent = (
+			<ScreenNavigation screen={ screen } title={ 'Setup complete' } canNavigate={ false }>
+				{ screens[ screen ].component }
+			</ScreenNavigation>
+		);
+	} else {
+		currentScreenComponent = (
+			<>
+				<SetupProgressBar currentStepIndex={ currentStepIndex } stepCount={ 3 } />
+				<ScreenNavigation
+					screen={ screen }
+					title={ screens[ screen ].title }
+					canNavigate={ currentStepIndex !== 0 }
+				>
+					{ screens[ screen ].component }
+				</ScreenNavigation>
+			</>
+		);
+	}
+
+	return (
+		<div className="wporg-2fa__first-time" ref={ modalRef }>
+			<div className="wporg-2fa__first-time__inner">
+				<div className="wporg-2fa__first-time__inner-content">
+					<WordPressLogo />
+					{ currentScreenComponent }
+				</div>
+			</div>
+		</div>
+	);
+}

settings/src/components/first-time/first-time.scss

@@ -0,0 +1,89 @@
+.wporg-2fa__first-time {
+    position: fixed;
+    background: #fff;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+
+    .wporg-2fa__first-time__inner {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        overflow: scroll;
+    }
+
+    .wporg-2fa__first-time__inner-content {
+        padding: 8vh 16px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        @media (min-width: 600px) {
+            width: 600px;
+        }
+
+        > svg {
+            margin-bottom: 32px;
+            width: 250px;
+        }
+
+        // Preven cards from shrinking.
+        .components-card {
+            width: 100%;
+        }
+
+        .components-card__body {
+            padding: 32px;
+            padding-top: 16px;
+        }
+    }
+
+    .wporg-2fa__first-time-default {
+        display: flex;
+        flex-direction: column;
+        gap: 18px;
+        padding-top: 8px;
+    }
+
+    .wporg-2fa__first-time-default-item {
+        margin: 0;
+        position: relative;
+        display: flex;
+        gap: 10px;
+        align-items: flex-start;
+        cursor: pointer;
+
+        span {
+            font-weight: 600;
+            z-index: 1;
+        }
+
+        input {
+            position: relative;
+            z-index: 1;
+            margin-top: 4px;
+            margin-left: 6px;
+        }
+
+        > div {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+
+            p {
+                color: var(--wp--preset--color--charcoal-4, #656a71);
+                margin: 0;
+                z-index: 1; 
+            }
+        }
+    }
+}
+
+.wporg-2fa__congratulations h3 {
+    margin-bottom: 14px;
+}