From 7a9cc49bba4c14f287ebd7dbd3224a393b2dac97 Mon Sep 17 00:00:00 2001
From: Eric Binnion <ericbinnion@gmail.com>
Date: Wed, 9 Dec 2015 16:50:50 -0600
Subject: [PATCH 1/2] Me: Use FormTelInput for 2fa instead of FormTextInput

---
 client/me/security-2fa-backup-codes-prompt/index.jsx | 5 ++---
 client/me/security-2fa-code-prompt/index.jsx         | 5 ++---
 client/me/security-2fa-enable/index.jsx              | 5 ++---
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/client/me/security-2fa-backup-codes-prompt/index.jsx b/client/me/security-2fa-backup-codes-prompt/index.jsx
index d62c59f3e3409b..d9cd0bb7f2b547 100644
--- a/client/me/security-2fa-backup-codes-prompt/index.jsx
+++ b/client/me/security-2fa-backup-codes-prompt/index.jsx
@@ -10,7 +10,7 @@ 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' );
@@ -125,10 +125,9 @@ 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"
 						valueLink={ this.linkState( 'backupCodeEntry' ) }
diff --git a/client/me/security-2fa-code-prompt/index.jsx b/client/me/security-2fa-code-prompt/index.jsx
index 5d0ace33b79f01..48afbf6145dcff 100644
--- a/client/me/security-2fa-code-prompt/index.jsx
+++ b/client/me/security-2fa-code-prompt/index.jsx
@@ -11,7 +11,7 @@ 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' );
@@ -197,11 +197,10 @@ module.exports = React.createClass( {
 			<form className="security-2fa-code-prompt" onSubmit={ this.onSubmit }>
 				<FormFieldset>
 					<FormLabel htmlFor="verification-code">{ this.translate( 'Verification Code' ) }</FormLabel>
-					<FormTextInput
+					<FormTelInput
 						className="security-2fa-code-prompt__verification-code"
 						disabled={ this.state.submittingForm }
 						name="verification-code"
-						type="text"
 						autoComplete="off"
 						valueLink={ this.linkState( 'verificationCode' ) }
 						onFocus={ function() {
diff --git a/client/me/security-2fa-enable/index.jsx b/client/me/security-2fa-enable/index.jsx
index 285995f17fefd5..59ac277025f026 100644
--- a/client/me/security-2fa-enable/index.jsx
+++ b/client/me/security-2fa-enable/index.jsx
@@ -12,7 +12,7 @@ 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' ),
@@ -332,12 +332,11 @@ module.exports = React.createClass( {
 		return (
 			<div className="security-2fa-enable__next">
 				{ this.renderInputHelp() }
-				<FormTextInput
+				<FormTelInput
 					autoComplete="off"
 					disabled={ this.state.submittingForm }
 					name="verification-code"
 					placeholder="123456"
-					type="text"
 					valueLink={ this.linkState( 'verificationCode' ) }
 					onFocus={ function() {
 						analytics.ga.recordEvent( 'Me', 'Focused On 2fa Enable Verification Code Input' );

From dd6b9ec7f2141c60c8be141f9d70a0831402b761 Mon Sep 17 00:00:00 2001
From: Eric Binnion <ericbinnion@gmail.com>
Date: Wed, 9 Dec 2015 16:52:25 -0600
Subject: [PATCH 2/2] Me: Adds constants file for shared data and updates
 placeholders

---
 client/me/constants.js                        | 19 +++++++++++++++++++
 client/me/reauth-required/index.jsx           | 17 +++++------------
 .../index.jsx                                 |  5 +++--
 client/me/security-2fa-code-prompt/index.jsx  |  9 ++++++++-
 client/me/security-2fa-enable/index.jsx       |  6 ++++--
 5 files changed, 39 insertions(+), 17 deletions(-)
 create mode 100644 client/me/constants.js

diff --git a/client/me/constants.js b/client/me/constants.js
new file mode 100644
index 00000000000000..150d4fcdee99e9
--- /dev/null
+++ b/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
+	} )
+};
diff --git a/client/me/reauth-required/index.jsx b/client/me/reauth-required/index.jsx
index e1fa506290eae7..20d6866a85033a 100644
--- a/client/me/reauth-required/index.jsx
+++ b/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
diff --git a/client/me/security-2fa-backup-codes-prompt/index.jsx b/client/me/security-2fa-backup-codes-prompt/index.jsx
index d9cd0bb7f2b547..92598d63945ee9 100644
--- 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( {
 
@@ -129,7 +130,7 @@ module.exports = React.createClass( {
 						disabled={ this.state.submittingCode }
 						name="backup-code-entry"
 						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
index 48afbf6145dcff..63e890bab78e6b 100644
--- 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 }
 						autoComplete="off"
 						valueLink={ this.linkState( 'verificationCode' ) }
 						onFocus={ function() {
diff --git a/client/me/security-2fa-enable/index.jsx b/client/me/security-2fa-enable/index.jsx
index 59ac277025f026..dbc5c3116d24b7 100644
--- a/client/me/security-2fa-enable/index.jsx
+++ b/client/me/security-2fa-enable/index.jsx
@@ -16,7 +16,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( {
 
@@ -334,9 +335,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 }
 					valueLink={ this.linkState( 'verificationCode' ) }
 					onFocus={ function() {
 						analytics.ga.recordEvent( 'Me', 'Focused On 2fa Enable Verification Code Input' );