diff --git a/settings/src/components/password.js b/settings/src/components/password.js
index 2bf22459..2b0e6903 100644
--- a/settings/src/components/password.js
+++ b/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 ) {
diff --git a/settings/src/components/setup-two-factor.js b/settings/src/components/setup-two-factor.js
new file mode 100644
index 00000000..871beec8
--- /dev/null
+++ b/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 = ;
+ break;
+
+ case 'generateBackupCodes':
+ renderFunction = ;
+ break;
+
+ default:
+ case 'Introduction':
+ renderFunction = setStep( 'scanVerifyQrCode' ) } />;
+ break;
+ }
+
+ return renderFunction;
+}
+
+
+//
+function Introduction( { onStart } ) {
+ return (
+ <>
+
+ 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.
+
+
+
+
+ );
+}
diff --git a/settings/src/components/two-factor-status.js b/settings/src/components/two-factor-status.js
new file mode 100644
index 00000000..8cee4663
--- /dev/null
+++ b/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(
+ <>
+
+ "You've enabled two-factor authenticaton on your account — smart move! ..." +
+ "button to disable"
+
+
+
+ backup codes
+ genertate new backup codes button
+
+
+
+
+ );
+}
diff --git a/settings/src/script.js b/settings/src/script.js
index 04d289a1..93f557de 100644
--- a/settings/src/script.js
+++ b/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 (
- <>
+
{ 'account-status' !== screen &&
-