TOTP: Add space to token placeholder for readablility.

settings/src/components/backup-codes.js

@@ -123,8 +123,8 @@ function CodeList( { codes } ) {
 				<ol>
 					{ codes.map( ( code ) => {
 						return (
-							 <li key={ code }>
-								 { code }
+							 <li key={ code } className="wporg-2fa__token">
+								 { code.slice( 0, 4 ) + ' ' + code.slice( 4 ) }
 							 </li>
 						)
 					} ) }

settings/src/components/numeric-control.js

@@ -0,0 +1,29 @@
+/**
+ * Input field for values that use digits, but aren't strictly numbers in the mathematical sense.
+ *
+ * The classic example is a credit card, but in our context we have TOTP codes, backup codes, etc. We may want to
+ * display them with spaces for easier reading, etc.
+ *
+ * If we used Gutenberg's `NumberControl`, we'd have to hide the extraneous UI elements, and it would still be
+ * using the underlying `input[type="number"]`, which has some accessibility issues.
+ *
+ * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#accessibility
+ * @link https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/
+ * @link https://stackoverflow.com/a/66759105/450127
+ */
+export default function NumericControl( props ) {
+	return (
+		<input
+			{ ...props }
+			type="text"
+			inputMode="numeric"
+			autoComplete={ props.autoComplete || 'off' }
+			pattern={ props.pattern || "[0-9 ]*" }
+			title={ props.title || "Only numbers and spaces are allowed" }
+			onChange={ ( event ) => {
+				// Most callers will only need the value, so make it convenient for them.
+				props.onChange( event.target.value, event );
+			} }
+		/>
+	);
+}

settings/src/components/totp.js

@@ -2,15 +2,16 @@
  * WordPress dependencies
  */
 import apiFetch from '@wordpress/api-fetch';
-import { Button, Notice, __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import { Button, Notice } from '@wordpress/components';
 import { Icon, cancelCircleFilled } from '@wordpress/icons';
 import { RawHTML, useCallback, useContext, useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import SetupProgressBar from './setup-progress-bar';
-import ScreenLink from './screen-link'
+import SetupProgressBar  from './setup-progress-bar';
+import ScreenLink        from './screen-link'
+import NumericControl    from './numeric-control';
 import { refreshRecord } from '../utilities';
 import { GlobalContext } from '../script';
 
@@ -197,28 +198,18 @@ function createQrCode( data ) {
  */
 function SetupForm( { handleEnable, verifyCode, setVerifyCode, qrCodeUrl, secretKey } ) {
 	const verifyCodeLength = 6;
-	const canSubmit        = qrCodeUrl && secretKey && verifyCode && verifyCode.length === verifyCodeLength;
+	const cleanVerifyCode  = verifyCode.replaceAll( /\s/g, '' );
+	const canSubmit        = qrCodeUrl && secretKey && cleanVerifyCode.length === verifyCodeLength;
 
 	return (
 		<form onSubmit={ handleEnable }>
-			<NumberControl
-				className="wporg-2fa__verify-code"
-				placeholder="123456"
-				min="0"
-				max="999999"
-				maxLength={ verifyCodeLength /* todo this isn't working. gutenberg bug? */ }
+			<NumericControl
+				className="wporg-2fa__verify-code wporg-2fa__token"
+				placeholder="123 456"
 				value={ verifyCode }
 				onChange={
-					/*
-					 * The value is passed as a string when clicking the button with a mouse, but as an int when
-					 * pressing enter on the keyboard. If it's left as an int, the button will be disabled because
-					 * `canSubmit` checks the `.length` property. That prevents the form from submitting, so it
-					 * needs to be normalized to a string.
-					 */
-					( code ) => setVerifyCode( code.toString() )
+					( code ) => setVerifyCode( code )
 				}
-				hideHTMLArrows={ false }
-				spinControls="none"
 				required={ true }
 			/>
 

settings/src/components/totp.scss

@@ -4,7 +4,7 @@
 	#bbpress-forums & {
 		> a {
 			display: inline-block;
-	
+
 			&:hover,
 			&:focus {
 				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent,var(--wp-admin-theme-color,#007cba));
@@ -21,7 +21,7 @@
 }
 
 .wporg-2fa__verify-code {
-	width: 10ch;
+	width: 23ch;
 	margin-bottom: 20px;
 }
 

settings/src/style.scss

@@ -8,6 +8,19 @@
 		clear: none;
 	}
 
+	/* Restore wporg-support styles that bbPress overrides */
+	.bbp-single-user & {
+		input[type="text"],
+		input[type="email"],
+		input[type="search"],
+		input[type="password"],
+		input[type="number"] {
+			padding: 6px 10px;
+			font-size: 14px;
+			font-family: "Open Sans", sans-serif;
+		}
+	}
+
 	.components-button {
 		margin-right: 20px;
 	}
@@ -37,6 +50,10 @@
 	}
 }
 
+.wporg-2fa__token {
+	letter-spacing: .3em;
+}
+
 .components-notice {
 	margin-left: 0;
 	margin-right: 0;