Stub UI for password

settings/settings.php

@@ -34,5 +34,6 @@ function replace_core_ui_with_custom() : void {
  * Render our custom 2FA interface.
  */
 function render_custom_ui() : void {
+	wp_enqueue_style( 'wp-components' );
 	echo do_blocks( '<!-- wp:wporg-two-factor/settings /-->' );
 }

settings/src/components/password.js

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, TextControl } from '@wordpress/components';
+
+/**
+ * Render the Password setting.
+ */
+export default function Password() {
+	// todo
+	// use same generator as core, do server side?
+	// strength meter
+	// warn when weak
+	// automatically generate placeholder?
+	// how to get empty value so placeholder shows up?
+
+	return (
+		<>
+			<p>
+				To update your password enter a new one below.
+				Strong passwords are random, at least twenty characters long, and include uppercase letters and symbols.
+			</p>
+
+			<p>
+				For convenience, use a password manager to store and automatically enter passwords.
+				For more information, read about <a href="https://wordpress.org/support/article/password-best-practices/">password best practices</a>.
+			</p>
+
+			<TextControl
+				type="password"
+				help="The generate button will create a secure, random password."
+				label="New password"
+				size="62"
+				placeholder="E&cCHunA,fG]jqC(,ckM"
+				onChange={ () => { console.log('change') } }
+			/>
+
+			<p>
+				<Button variant="primary" onClick={ savePassword }>
+					Save password
+				</Button>
+
+				<Button variant="secondary" onClick={ generatePassword }>
+					Generate strong password
+				</Button>
+			</p>
+		</>
+	);
+}
+
+/**
+ * Save the new password.
+ */
+function savePassword( event ) {
+	console.log('save');
+	// send rest api request
+	// on success, update state to show that it's been saved
+}
+
+/**
+ * Generate a secure, random password.
+ */
+function generatePassword( event ) {
+	// maybe bind this to the Password func so it can directly access
+	console.log('generate');
+}

settings/src/components/password.scss

@@ -0,0 +1,2 @@
+.wporg-2fa__password {
+}

settings/src/script.js

@@ -9,6 +9,7 @@ import { Icon, arrowLeft } from '@wordpress/icons';
  * Internal dependencies
  */
 import AccountStatus from './components/account-status';
+import Password from './components/password';
 
 window.addEventListener( 'DOMContentLoaded', renderSettings );
 
@@ -93,18 +94,6 @@ function EmailAddress() {
 	);
 }
 
-/**
- * Render the Password setting.
- */
-function Password() {
-	return (
-		<p>
-			Password:
-			Generate Password button
-		</p>
-	);
-}
-
 /**
  * Render the user's 2FA status.
  */

settings/src/style.scss

@@ -1,4 +1,14 @@
 .wp-block-wporg-two-factor-settings {
 }
 
+.wp-block-wporg-two-factor-settings h3 {
+	font-size: 14px;
+	clear: none;
+}
+
+.wp-block-wporg-two-factor-settings .components-button {
+	margin-right: 20px;
+}
+
 @import "components/account-status";
+@import "components/password";