Add onboarding flow for new users.

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

@@ -13,6 +13,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,95 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { GlobalContext } from '../../script';
+
+/**
+ * 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() {
+	const {
+		user: { webAuthnEnabled, totpEnabled },
+	} = useContext( GlobalContext );
+
+	const getAuthenticationMethod = () => {
+		if ( webAuthnEnabled && totpEnabled ) {
+			return null;
+		}
+
+		return (
+			<ul>
+				<li>
+					{ totpEnabled && (
+						<a href="https://profiles.wordpress.org/me/profile/edit/group/3/?screen=webauthn">
+							Set up a security key
+						</a>
+					) }
+
+					{ webAuthnEnabled && (
+						<a href="https://profiles.wordpress.org/me/profile/edit/group/3/?screen=totp">
+							Set up one time password
+						</a>
+					) }
+				</li>
+			</ul>
+		);
+	};
+
+	return (
+		<>
+			<p>
+				To ensure the highest level of security for your account, please remember to keep
+				your authentication methods up-to-date, and consult{ ' ' }
+				<a href="//make.wordpress.org/meta/handbook/tutorials-guides/configuring-two-factor-authentication/">
+					our documentation
+				</a>{ ' ' }
+				if you need help or have any questions.
+			</p>
+			<p>
+				We recommend configuring multiple authentication methods to guarantee you always
+				have access to your account.
+			</p>
+
+			{ getAuthenticationMethod() }
+
+			<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>
+				<Button variant="link">View security settings</Button>
+			</div>
+		</>
+	);
+}

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

@@ -0,0 +1,110 @@
+/**
+ * WordPress dependencies
+ */
+import { 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 { GlobalContext } from '../../script';
+
+/**
+ * Render the correct component based on the URL.
+ */
+export default function FirstTime() {
+	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 />,
+		},
+	};
+
+	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 }
+					steps={ [ 'Select', 'Configure', 'Print' ] }
+				/>
+				<ScreenNavigation
+					screen={ screen }
+					title={ screens[ screen ].title }
+					canNavigate={ currentStepIndex !== 0 }
+				>
+					{ screens[ screen ].component }
+				</ScreenNavigation>
+			</>
+		);
+	}
+
+	return (
+		<div className="wporg-2fa__first-time">
+			<div className={ `wporg-2fa__first-time__inner-content ${ screen }` }>
+				{ currentScreenComponent }
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,75 @@
+.wporg-2fa__first-time {
+    padding: 0 16px;
+    min-height: 600px;
+    display: flex;
+    justify-content: center;
+
+    .wporg-2fa__first-time__inner-content {
+        padding: 0 0 100px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        @media (min-width: 600px) {
+            width: 600px;
+        }
+
+        // Preven cards from shrinking.
+        .components-card {
+            width: 100%;
+        }
+
+        .components-card__body {
+            padding: 32px;
+            padding-top: 16px;
+        }
+    }
+
+    .wporg-2fa__first-time__inner-content.congratulations {
+        justify-content: center;
+    }
+
+    .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;
+}