wip leftovers after db58453. reset and start on filling in TOTP. brea…

…k the nav header stuff into its own commit

settings/src/components/password.js

@@ -49,6 +49,7 @@ export default function Password( { userRecord } ) {
 	// Handle clicking the `Save Password` button.
 	const savePasswordHandler = useCallback( async () => {
 		await userRecord.save();
+		// catch error here and show error? or dont bother b/c shouldn't happen normally and will show up in console?
 
 		// Changing the password resets the nonce, which causes subsequent API requests to fail. `apiFetch()` will
 		// retry them automatically, but that results in an extra XHR request and a console error.
@@ -169,6 +170,9 @@ function generatePassword() {
 /**
  * Determines if the password is strong.
  *
+ * Validation is also done on the backend by `security-weak-passwords.php`.
+ * todo ^ may fit better somewhere else, but do want to say something in client about how not just relying on client-side validation
+ *
  * @returns {boolean}
  */
 function isPasswordStrong( password, userRecord ) {

settings/src/components/setup-two-factor.js

@@ -0,0 +1,67 @@
+// todo probably delete this, just use straightforward approach like db584537ae1d919c552425c557c88360c65d8682.
+
+/**
+ * WordPress dependencies
+ */
+import { Button, Flex, Notice, TextControl }     from '@wordpress/components';
+import { useCallback, useEffect, useState }      from '@wordpress/element';
+import { Icon, cancelCircleFilled, check, seen } from '@wordpress/icons';
+// remove unused
+
+/**
+ * Internal dependencies
+ */
+import { SetupTOTP } from './setup-totp';
+import { BackupCodes } from './backup-codes';
+
+/**
+ * Render the Password setting.
+ */
+export default function SetupTwoFactor( { userRecord } ) {
+	const [ step, setStep ] = useState( 'Introduction' );
+
+	// maybe move the steps etc up to a higher level like two-factor-setup.js
+		// so that totp.js can just be focused on totp only
+
+	const enableTOTPHandler = useCallback( () => {
+		// save settings
+		setStep( 'generateBackupCodes' );
+	} );
+
+	let renderFunction;
+
+	switch ( step ) {
+		case 'scanVerifyQrCode':
+			renderFunction = <ScanVerifyQrCode onEnable={ enableTOTPHandler } />;
+			break;
+
+		case 'generateBackupCodes':
+			renderFunction = <BackupCodes />;
+			break;
+
+		default:
+		case 'Introduction':
+			renderFunction = <Introduction onStart={ () => setStep( 'scanVerifyQrCode' ) } />;
+			break;
+	}
+
+	return renderFunction;
+}
+
+
+//
+function Introduction( { onStart } ) {
+	return (
+		<>
+			<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>
+
+			<Button isPrimary onClick={ onStart }>
+				Get Started
+			</Button>
+		</>
+	);
+}

settings/src/components/two-factor-status.js

@@ -0,0 +1,38 @@
+// todo probably delete this, just use straightforward approach like db584537ae1d919c552425c557c88360c65d8682.
+
+/**
+ * WordPress dependencies
+ */
+import { Card, CardBody, CardHeader } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { BackupCodes } from './backup-codes';
+
+
+/**
+ * Render the user's 2FA status.
+ */
+export default function TwoFactorStatus( { userRecord } ) {
+	const emailStatus       = record.pending_email ? 'pending' : 'ok';
+	const totpStatus        = Object.keys( record[ '2fa_enabled_providers' ] ).length ? 'enabled' : 'disabled';
+	const backupCodesStatus = record['2fa_backup_codes_remaining'] > 0 ? 'enabled' : 'disabled';
+
+
+	return(
+		<>
+			<Card>
+				"You've enabled two-factor authenticaton  on your account — smart move! ..." +
+				"button to disable"
+			</Card>
+
+			<Card>
+				backup codes
+				genertate new backup codes button
+
+				<BackupCodes />
+			</Card>
+		</>
+	);
+}

settings/src/script.js

@@ -3,7 +3,7 @@
  */
 import { StrictMode, useCallback, useState } from '@wordpress/element';
 import { Icon, arrowLeft } from '@wordpress/icons';
-import { Spinner } from '@wordpress/components';
+import { Card, CardHeader, CardBody, Flex, Spinner } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { store as coreDataStore, useEntityRecord } from '@wordpress/core-data';
 
@@ -13,8 +13,10 @@ import { store as coreDataStore, useEntityRecord } from '@wordpress/core-data';
 import AccountStatus from './components/account-status';
 import Password from './components/password';
 import EmailAddress from './components/email-address';
+//import SetupTwoFactor from './components/setup-two-factor';
 import TOTP from './components/totp';
 import BackupCodes from './components/backup-codes';
+//import TwoFactorStatus from './components/two-factor-status';
 
 window.addEventListener( 'DOMContentLoaded', renderSettings );
 
@@ -49,8 +51,10 @@ function Main( { userId } ) {
 		'account-status':    AccountStatus,
 		'email':             EmailAddress,
 		'password':          Password,
+		//'setup-two-factor':  SetupTwoFactor,
 		'totp':              TOTP,
 		'backup-codes':      BackupCodes,
+		//'two-factor-status': TwoFactorStatus,
 	};
 
 	let currentUrl    = new URL( document.location.href );
@@ -91,20 +95,24 @@ function Main( { userId } ) {
 	}
 
 	return (
-		<>
+		<Card>
 			{ 'account-status' !== screen &&
-				<div className="wporg-2fa__navigation">
-					<a href="?screen=account-status" onClick={ ( event ) => clickScreenLink( event, 'account-status' ) }>
-						<Icon icon={ arrowLeft } />
-						Back
-					</a>
-				</div>
+				<CardHeader className="wporg-2fa__navigation">
+					<Flex>
+						<a href="?screen=account-status" onClick={ ( event ) => clickScreenLink( event, 'account-status' ) }>
+							<Icon icon={ arrowLeft } />
+							Back
+						</a>
+
+						<h2>{ initialScreen }</h2>
+					</Flex>
+				</CardHeader>
 			}
 
-			<div className={ 'wporg-2fa__' + screen }>
+			<CardBody className={ 'wporg-2fa__' + screen }>
 				<CurrentScreen clickScreenLink={ clickScreenLink } userRecord={ userRecord } />
-			</div>
-		</>
+			</CardBody>
+		</Card>
 	);
 }