Me: Updates 2fa placeholders and autofocus

Automattic · Dec 8, 2015 · 88f0ab4 · 88f0ab4
1 parent ca782ea
commit 88f0ab4
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/client/me/security-2fa-backup-codes-prompt/index.jsx b/client/me/security-2fa-backup-codes-prompt/index.jsx
@@ -13,7 +13,8 @@ var FormButton = require( 'components/forms/form-button' ),
 	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( {
 
@@ -130,7 +131,7 @@ module.exports = React.createClass( {
 						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' );

diff --git a/client/me/security-2fa-code-prompt/index.jsx b/client/me/security-2fa-code-prompt/index.jsx
@@ -14,7 +14,8 @@ var FormButton = require( 'components/forms/form-button' ),
 	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,14 +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>
 					<FormTelInput
+						autoFocus
 						className="security-2fa-code-prompt__verification-code"
 						disabled={ this.state.submittingForm }
 						name="verification-code"
+						placeholder={ codePlaceholder }
 						type="text"
 						autoComplete="off"
 						valueLink={ this.linkState( 'verificationCode' ) }

diff --git a/client/me/security-2fa-enable/index.jsx b/client/me/security-2fa-enable/index.jsx
@@ -15,7 +15,8 @@ var FormButton = require( 'components/forms/form-button' ),
 	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( {
 
@@ -324,9 +325,10 @@ module.exports = React.createClass( {
 				{ this.renderInputHelp() }
 				<FormTelInput
 					autoComplete="off"
+					autoFocus
 					disabled={ this.state.submittingForm }
 					name="verification-code"
-					placeholder="123456"
+					placeholder={ 'sms' === this.state.method ? constants.sevenDigit2faPlaceholder : constants.sixDigit2faPlaceholder }
 					type="text"
 					valueLink={ this.linkState( 'verificationCode' ) }
 					onFocus={ function() {