Merge pull request #1436 from Automattic/fix/me-2fa-layout

Me: Fixes 2fa via app layout
Automattic · Dec 9, 2015 · 30c89b1 · 30c89b1
2 parents 77e9d65 + 9d94e05
commit 30c89b1
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 59 deletions.
diff --git 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
@@ -178,22 +179,58 @@ module.exports = React.createClass( {
 		}
 	},
 
+	getToggleLink: function() {
+		return (
+			<a
+				className="security-2fa-enable__toggle"
+				onClick={ function( event ) {
+					this.toggleMethod( event );
+					analytics.ga.recordEvent( 'Me', 'Clicked On Barcode Toggle Link', 'current-method', this.state.method );
+				}.bind( this ) }
+			/>
+		);
+	},
+
 	renderQRCode: function() {
+		var qrClasses = classNames( 'security-2fa-enable__qr-code', {
+			'is-placeholder': ! this.state.otpAuthUri
+		} );
+
 		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={ qrClasses }>
+					{ 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 +245,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 +260,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 +305,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 +331,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 +365,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
@@ -1,31 +1,20 @@
-.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__code-block {
+	margin-bottom: 16px;
 }
 
-.security-2fa-enable__first-label {
-	font-weight: bold;
-	margin-bottom: 0;
-}
+.security-2fa-enable__qr-code {
+	height: 150px;
+	width: 150px;
+	margin: 0 auto;
 
-.security-2fa-enable__next {
-	flex: 2;
-}
-
-.security-2fa-enable__next-label {
-	font-weight: bold;
-	margin-bottom: 0;
+	&.is-placeholder {
+		@include placeholder( 23% );
+	}
 }
 
 .security-2fa-enable__app-options {
@@ -42,8 +31,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;
+}