Merge pull request #1399 from Automattic/fix/me-2fa-number-input

Me: Use FormTelInput instead of FormTextInput

client/me/constants.js

@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import i18n from 'lib/mixins/i18n';
+
+export default {
+	sixDigit2faPlaceholder: i18n.translate( 'e.g. 123456', {
+		context: '6 digit two factor code placeholder.',
+		textOnly: true
+	} ),
+	sevenDigit2faPlaceholder: i18n.translate( 'e.g. 1234567', {
+		context: '7 digit two factor code placeholder.',
+		textOnly: true
+	} ),
+	eightDigitBackupCodePlaceholder: i18n.translate( 'e.g. 12345678', {
+		context: '8 digit two factor backup code placeholder.',
+		textOnly: true
+	} )
+};

client/me/reauth-required/index.jsx

@@ -18,7 +18,8 @@ var Dialog = require( 'components/dialog' ),
 	observe = require( 'lib/mixins/data-observe' ),
 	Notice = require( 'components/notice' ),
 	eventRecorder = require( 'me/event-recorder' ),
-	userUtilities = require( 'lib/user/utils' );
+	userUtilities = require( 'lib/user/utils' ),
+	constants = require( 'me/constants' );
 
 module.exports = React.createClass( {
 
@@ -152,17 +153,9 @@ module.exports = React.createClass( {
 	},
 
 	render: function() {
-		var codePlaceholder = this.translate( 'e.g. 123456', {
-			context: '6 digit two factor code placeholder.',
-			textOnly: true
-		} );
-
-		if ( this.props.twoStepAuthorization.isTwoStepSMSEnabled() ) {
-			codePlaceholder = this.translate( 'e.g. 1234567', {
-				context: '7 digit two factor code placeholder.',
-				textOnly: true
-			} );
-		}
+		var codePlaceholder = this.props.twoStepAuthorization.isTwoStepSMSEnabled()
+			? constants.sevenDigit2faPlaceholder
+			: constants.sixDigit2faPlaceholder;
 
 		return (
 			<Dialog

client/me/security-2fa-backup-codes-prompt/index.jsx

@@ -10,10 +10,11 @@ var React = require( 'react' ),
 var FormButton = require( 'components/forms/form-button' ),
 	FormFieldset = require( 'components/forms/form-fieldset' ),
 	FormLabel = require( 'components/forms/form-label' ),
-	FormTextInput = require( 'components/forms/form-text-input' ),
+	FormTelInput = require( 'components/forms/form-tel-input' ),
 	Notice = require( 'components/notice' ),
 	twoStepAuthorization = require( 'lib/two-step-authorization' ),
-	analytics = require( 'analytics' );
+	analytics = require( 'analytics' ),
+	constants = require( 'me/constants' );
 
 module.exports = React.createClass( {
 
@@ -125,12 +126,11 @@ module.exports = React.createClass( {
 			<form className="security-2fa-backup-codes-prompt" onSubmit={ this.onVerify }>
 				<FormFieldset>
 					<FormLabel htmlFor="backup-code-entry">{ this.translate( 'Type a Backup Code' ) }</FormLabel>
-					<FormTextInput
+					<FormTelInput
 						disabled={ this.state.submittingCode }
 						name="backup-code-entry"
-						type="text"
 						autoComplete="off"
-						placeholder="12345678"
+						placeholder={ constants.eightDigitBackupCodePlaceholder }
 						valueLink={ this.linkState( 'backupCodeEntry' ) }
 						onFocus={ function() {
 							analytics.ga.recordEvent( 'Me', 'Focused On 2fa Backup Codes Confirm Printed Backup Codes Input' );

client/me/security-2fa-code-prompt/index.jsx

@@ -11,10 +11,11 @@ var FormButton = require( 'components/forms/form-button' ),
 	FormLabel = require( 'components/forms/form-label' ),
 	FormFieldset = require( 'components/forms/form-fieldset' ),
 	FormSettingExplanation = require( 'components/forms/form-setting-explanation' ),
-	FormTextInput = require( 'components/forms/form-text-input' ),
+	FormTelInput = require( 'components/forms/form-tel-input' ),
 	Notice = require( 'components/notice' ),
 	twoStepAuthorization = require( 'lib/two-step-authorization' ),
-	analytics = require( 'analytics' );
+	analytics = require( 'analytics' ),
+	constants = require( 'me/constants' );
 
 module.exports = React.createClass( {
 
@@ -193,15 +194,20 @@ module.exports = React.createClass( {
 	},
 
 	render: function() {
+		var codePlaceholder = twoStepAuthorization.isTwoStepSMSEnabled()
+			? constants.sevenDigit2faPlaceholder
+			: constants.sixDigit2faPlaceholder;
+
 		return (
 			<form className="security-2fa-code-prompt" onSubmit={ this.onSubmit }>
 				<FormFieldset>
 					<FormLabel htmlFor="verification-code">{ this.translate( 'Verification Code' ) }</FormLabel>
-					<FormTextInput
+					<FormTelInput
+						autoFocus
 						className="security-2fa-code-prompt__verification-code"
 						disabled={ this.state.submittingForm }
 						name="verification-code"
-						type="text"
+						placeholder={ codePlaceholder }
 						autoComplete="off"
 						valueLink={ this.linkState( 'verificationCode' ) }
 						onFocus={ function() {

client/me/security-2fa-enable/index.jsx

@@ -12,11 +12,12 @@ var React = require( 'react' ),
 var FormButton = require( 'components/forms/form-button' ),
 	FormLabel = require( 'components/forms/form-label' ),
 	FormSettingExplanation = require( 'components/forms/form-setting-explanation' ),
-	FormTextInput = require( 'components/forms/form-text-input' ),
+	FormTelInput = require( 'components/forms/form-tel-input' ),
 	Notice = require( 'components/notice' ),
 	Security2faProgress = require( 'me/security-2fa-progress' ),
 	twoStepAuthorization = require( 'lib/two-step-authorization' ),
-	analytics = require( 'analytics' );
+	analytics = require( 'analytics' ),
+	constants = require( 'me/constants' );
 
 module.exports = React.createClass( {
 
@@ -332,12 +333,12 @@ module.exports = React.createClass( {
 		return (
 			<div className="security-2fa-enable__next">
 				{ this.renderInputHelp() }
-				<FormTextInput
+				<FormTelInput
 					autoComplete="off"
+					autoFocus
 					disabled={ this.state.submittingForm }
 					name="verification-code"
-					placeholder="123456"
-					type="text"
+					placeholder={ 'sms' === this.state.method ? constants.sevenDigit2faPlaceholder : constants.sixDigit2faPlaceholder }
 					valueLink={ this.linkState( 'verificationCode' ) }
 					onFocus={ function() {
 						analytics.ga.recordEvent( 'Me', 'Focused On 2fa Enable Verification Code Input' );