From e019de07b73f4b7f14d6c55b0ea207980b3959cd Mon Sep 17 00:00:00 2001
From: Eric Binnion <ericbinnion@gmail.com>
Date: Wed, 9 Dec 2015 12:55:02 -0600
Subject: [PATCH 1/3] Me: Fixes 2fa via app layout

---
 client/me/security-2fa-enable/index.jsx  | 81 +++++++++++++-----------
 client/me/security-2fa-enable/style.scss | 33 ++++------
 2 files changed, 55 insertions(+), 59 deletions(-)

diff --git a/client/me/security-2fa-enable/index.jsx b/client/me/security-2fa-enable/index.jsx
index b12721ad89be1..28e6a420ef3b7 100644
--- a/client/me/security-2fa-enable/index.jsx
+++ b/client/me/security-2fa-enable/index.jsx
@@ -178,22 +178,54 @@ module.exports = React.createClass( {
 		}
 	},
 
+	getToggleLink: function() {
+		return (
+			<a
+				className="security-2fa-enable__toggle"
+				onClick={ function( event ) {
+					analytics.ga.recordEvent( 'Me', 'Clicked On Barcode Toggle Link', 'current-method', this.state.method );
+					this.toggleMethod( event );
+				}.bind( this ) }
+			/>
+		);
+	},
+
 	renderQRCode: function() {
 		return (
-			<div>
-				<p>
-					{ this.translate( 'Scan this QR code with your mobile app:' ) }
+			<div className="security-2fa-enable__qr-code-block">
+				<p className="security-2fa-enable__qr-instruction">
+					{
+						this.translate(
+							"Scan this QR code with your mobile app. {{toggleMethodLink}}Can't scan the barcode?{{/toggleMethodLink}}", {
+								components: {
+									toggleMethodLink: this.getToggleLink()
+								}
+							}
+						)
+					}
 				</p>
-				{ this.state.otpAuthUri ? <QRCode value={ this.state.otpAuthUri } size={ 150 } /> : null }
+				<div className="security-2fa-enable__qr-code">
+					{ this.state.otpAuthUri &&
+						<QRCode value={ this.state.otpAuthUri } size={ 150 } />
+					}
+				</div>
 			</div>
 		);
 	},
 
 	renderTimeCode: function() {
 		return (
-			<div>
-				<p>
-					{ this.translate( 'Enter this time code into your mobile app:' ) }
+			<div className="security-2fa-enable__time-code-block">
+				<p className="security-2fa-enable__time-instruction">
+					{
+						this.translate(
+							'Enter this time code into your mobile app. {{toggleMethodLink}}Prefer to scan the barcode?{{/toggleMethodLink}}', {
+								components: {
+									toggleMethodLink: this.getToggleLink()
+								}
+							}
+						)
+					}
 				</p>
 				<p className="security-2fa-enable__time-code">
 					{ this.state.timeCode }
@@ -208,11 +240,8 @@ module.exports = React.createClass( {
 		}
 
 		return (
-			<div className="security-2fa-enable__first">
-				<p className="security-2fa-enable__first-label">
-					{ this.translate( 'First', { context: 'The first thing we want the user to do for Two-Step setup.' } ) }
-				</p>
-				{ ( 'scan' === this.state.method ) ? this.renderQRCode() : this.renderTimeCode() }
+			<div className="security-2fa-enable__code-block">
+				{ 'scan' === this.state.method ? this.renderQRCode() : this.renderTimeCode() }
 			</div>
 		);
 	},
@@ -226,11 +255,7 @@ module.exports = React.createClass( {
 
 		return (
 			<p>
-				{
-					'scan' === this.state.method
-					? this.translate( 'Enter the code your app gives you after scanning:' )
-					: this.translate( 'Enter the code your app gives you after entering the time code:' )
-				}
+				{ this.translate( 'Then enter the six digit code provided by the app:' ) }
 			</p>
 		);
 	},
@@ -275,17 +300,6 @@ module.exports = React.createClass( {
 						)
 					}
 				</p>
-				<p>
-					<a
-						className="security-2fa-enable__toggle"
-						onClick={ function( event ) {
-							analytics.ga.recordEvent( 'Me', 'Clicked On Barcode Toggle Link', 'current-method', this.state.method );
-							this.toggleMethod( event );
-						}.bind( this ) }
-					>
-						{ 'scan' === this.state.method ? this.translate( "Can't scan the barcode?" ) : this.translate( 'Prefer to scan the barcode?' ) }
-					</a>
-				</p>
 			</div>
 		);
 	},
@@ -312,15 +326,6 @@ module.exports = React.createClass( {
 	renderInputBlock: function() {
 		return (
 			<div className="security-2fa-enable__next">
-				{
-					'sms' !== this.state.method
-					? (
-						<p className="security-2fa-enable__next-label">
-							{ this.translate( 'Next', { context: 'The next thing we want the user to do for Two-Step setup.' } ) }
-						</p>
-					)
-					: null
-				}
 				{ this.renderInputHelp() }
 				<FormTextInput
 					autoComplete="off"
@@ -355,7 +360,7 @@ module.exports = React.createClass( {
 
 	renderButtons: function() {
 		return (
-			<div>
+			<div className="security-2fa-enable__buttons-bar">
 				<FormButton
 					className="security-2fa-enable__verify"
 					disabled={ this.getFormDisabled() }
diff --git a/client/me/security-2fa-enable/style.scss b/client/me/security-2fa-enable/style.scss
index dc9da474088c0..72ce39a6d10a0 100644
--- a/client/me/security-2fa-enable/style.scss
+++ b/client/me/security-2fa-enable/style.scss
@@ -1,31 +1,16 @@
-.security-2fa-enable__inner {
-	@include clear-fix;
-	display: flex;
-	margin-bottom: 20px;
-}
-
 .security-2fa-enable .security-2fa-enable__cancel {
 	float: left;
 	margin-left: 0;
 }
 
-.security-2fa-enable__first {
-	flex: 1;
-	margin-right: 20px;
-}
-
-.security-2fa-enable__first-label {
-	font-weight: bold;
-	margin-bottom: 0;
-}
-
-.security-2fa-enable__next {
-	flex: 2;
+.security-2fa-enable__code-block {
+	margin-bottom: 16px;
 }
 
-.security-2fa-enable__next-label {
-	font-weight: bold;
-	margin-bottom: 0;
+.security-2fa-enable__qr-code {
+	height: 150px;
+	width: 150px;
+	margin: 0 auto;
 }
 
 .security-2fa-enable__app-options {
@@ -42,8 +27,14 @@
 
 .security-2fa-enable__toggle {
 	cursor: pointer;
+	display: block;
 }
 
 .security-2fa-enable .notice {
 	margin: 5px 0 0 0;
 }
+
+.security-2fa-enable__buttons-bar {
+	@include clear-fix;
+	margin-top: 16px;
+}

From 7f9064d29747027b4931a05bf7814205d603bf17 Mon Sep 17 00:00:00 2001
From: Eric Binnion <ericbinnion@gmail.com>
Date: Wed, 9 Dec 2015 15:01:27 -0600
Subject: [PATCH 2/3] Me: Adds placeholder styles while waiting for QR code

---
 client/me/security-2fa-enable/index.jsx  | 9 +++++++--
 client/me/security-2fa-enable/style.scss | 4 ++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/client/me/security-2fa-enable/index.jsx b/client/me/security-2fa-enable/index.jsx
index 28e6a420ef3b7..05b350a48dee0 100644
--- a/client/me/security-2fa-enable/index.jsx
+++ b/client/me/security-2fa-enable/index.jsx
@@ -3,7 +3,8 @@
  */
 var React = require( 'react' ),
 	debug = require( 'debug' )( 'calypso:me:security:2fa-enable' ),
-	QRCode = require( 'qrcode.react' );
+	QRCode = require( 'qrcode.react' ),
+	classNames = require( 'classnames' );
 
 /**
  * Internal dependencies
@@ -191,6 +192,10 @@ module.exports = React.createClass( {
 	},
 
 	renderQRCode: function() {
+		var qrClasses = classNames( 'security-2fa-enable__qr-code', {
+			'is-placeholder': ! this.state.otpAuthUri
+		} );
+
 		return (
 			<div className="security-2fa-enable__qr-code-block">
 				<p className="security-2fa-enable__qr-instruction">
@@ -204,7 +209,7 @@ module.exports = React.createClass( {
 						)
 					}
 				</p>
-				<div className="security-2fa-enable__qr-code">
+				<div className={ qrClasses }>
 					{ this.state.otpAuthUri &&
 						<QRCode value={ this.state.otpAuthUri } size={ 150 } />
 					}
diff --git a/client/me/security-2fa-enable/style.scss b/client/me/security-2fa-enable/style.scss
index 72ce39a6d10a0..59566cf0a54a5 100644
--- a/client/me/security-2fa-enable/style.scss
+++ b/client/me/security-2fa-enable/style.scss
@@ -11,6 +11,10 @@
 	height: 150px;
 	width: 150px;
 	margin: 0 auto;
+
+	&.is-placeholder {
+		@include placeholder( 23% );
+	}
 }
 
 .security-2fa-enable__app-options {

From 9d94e0551f08decd563ddcda8514e0b6a21d1830 Mon Sep 17 00:00:00 2001
From: Eric Binnion <ericbinnion@gmail.com>
Date: Wed, 9 Dec 2015 15:02:07 -0600
Subject: [PATCH 3/3] Me: In 2fa via app flow, toggle method before analytics

---
 client/me/security-2fa-enable/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/me/security-2fa-enable/index.jsx b/client/me/security-2fa-enable/index.jsx
index 05b350a48dee0..285995f17fefd 100644
--- a/client/me/security-2fa-enable/index.jsx
+++ b/client/me/security-2fa-enable/index.jsx
@@ -184,8 +184,8 @@ module.exports = React.createClass( {
 			<a
 				className="security-2fa-enable__toggle"
 				onClick={ function( event ) {
-					analytics.ga.recordEvent( 'Me', 'Clicked On Barcode Toggle Link', 'current-method', this.state.method );
 					this.toggleMethod( event );
+					analytics.ga.recordEvent( 'Me', 'Clicked On Barcode Toggle Link', 'current-method', this.state.method );
 				}.bind( this ) }
 			/>
 		);