From a7ae224b261317d88426e937666ad6467e31b04c Mon Sep 17 00:00:00 2001 From: Gary Pendergast Date: Fri, 12 May 2017 16:08:06 +1000 Subject: [PATCH 01/14] Show a message when 3rd party cookies are disabled --- client/components/signup-form/style.scss | 6 +++ client/components/social-buttons/google.js | 63 +++++++++++++++------- 2 files changed, 50 insertions(+), 19 deletions(-) diff --git a/client/components/signup-form/style.scss b/client/components/signup-form/style.scss index ec01a9b01ea2f..c8d0f6754eb48 100644 --- a/client/components/signup-form/style.scss +++ b/client/components/signup-form/style.scss @@ -50,3 +50,9 @@ .signup-form__notice.notice { margin-bottom: 10px; } + +.social-buttons__service-error { + color: red; + font-size: 11px; + margin: 0 10px 10px 10px; +} diff --git a/client/components/social-buttons/google.js b/client/components/social-buttons/google.js index 21966a449bcef..6e8078fe81fc5 100644 --- a/client/components/social-buttons/google.js +++ b/client/components/social-buttons/google.js @@ -19,6 +19,8 @@ class GoogleLoginButton extends Component { fetchBasicProfile: true, }; + state = { error: false }; + constructor( props ) { super( props ); @@ -45,6 +47,10 @@ class GoogleLoginButton extends Component { return this.initialized; } + this.setState( { error: '' } ); + + const { translate } = this.props; + this.initialized = this.loadDependency() .then( gapi => new Promise( resolve => gapi.load( 'client:auth2', resolve ) ).then( () => gapi ) ) .then( gapi => gapi.client.init( { @@ -56,6 +62,14 @@ class GoogleLoginButton extends Component { ).catch( error => { this.initialized = null; + if ( 'idpiframe_initialization_failed' === error.error ) { + // This error is caused by 3rd party cookies being blocked. + this.setState( { error: translate( 'Your privacy settings are blocking us from connecting to your Google account. ' + + 'Please enable "third-party cookies" in your browser or operating system, or log in with an email address instead.' + ) } ); + return null; + } + return Promise.reject( error ); } ); @@ -65,6 +79,10 @@ class GoogleLoginButton extends Component { handleClick( event ) { event.preventDefault(); + if ( this.state.error ) { + return; + } + const { responseHandler } = this.props; // Handle click async if the library is not loaded yet @@ -75,26 +93,33 @@ class GoogleLoginButton extends Component { } render() { + let buttonDisabled = false; + if ( this.state.error ) { + buttonDisabled = true; + } return ( - +
+ +
{ this.state.error }
+
); } } From 6cdca3ba0805d5ab6c9311d33e962f58461e728e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabiana=20Sim=C3=B5es?= Date: Fri, 12 May 2017 12:51:29 +0200 Subject: [PATCH 02/14] Social Signup: update copy when third-party cookies are blocked --- client/components/social-buttons/google.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/social-buttons/google.js b/client/components/social-buttons/google.js index 6e8078fe81fc5..f04740ae4bdd4 100644 --- a/client/components/social-buttons/google.js +++ b/client/components/social-buttons/google.js @@ -65,7 +65,7 @@ class GoogleLoginButton extends Component { if ( 'idpiframe_initialization_failed' === error.error ) { // This error is caused by 3rd party cookies being blocked. this.setState( { error: translate( 'Your privacy settings are blocking us from connecting to your Google account. ' + - 'Please enable "third-party cookies" in your browser or operating system, or log in with an email address instead.' + 'Please enable "third-party cookies" in your browser or operating system, or sign up with an email address instead.' ) } ); return null; } From 17916490a9ffbd1164a667a87c9073b2fbe89d5e Mon Sep 17 00:00:00 2001 From: Gary Pendergast Date: Mon, 15 May 2017 12:07:06 +1000 Subject: [PATCH 03/14] Clean up the code a little bit. --- client/components/social-buttons/google.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/client/components/social-buttons/google.js b/client/components/social-buttons/google.js index f04740ae4bdd4..f4d50003e659a 100644 --- a/client/components/social-buttons/google.js +++ b/client/components/social-buttons/google.js @@ -19,7 +19,7 @@ class GoogleLoginButton extends Component { fetchBasicProfile: true, }; - state = { error: false }; + state = { error: '' }; constructor( props ) { super( props ); @@ -93,10 +93,8 @@ class GoogleLoginButton extends Component { } render() { - let buttonDisabled = false; - if ( this.state.error ) { - buttonDisabled = true; - } + const buttonDisabled = Boolean( this.state.error ); + return (
-
{ this.state.error }
+ { this.state.error &&
{ this.state.error }
}
); } From e258338a3dab656f6b5eac632d701c05f1490fd8 Mon Sep 17 00:00:00 2001 From: Gary Pendergast Date: Tue, 16 May 2017 12:12:30 +1000 Subject: [PATCH 08/14] Updated info text for social buttons. --- client/components/signup-form/social.jsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/client/components/signup-form/social.jsx b/client/components/signup-form/social.jsx index f1980b3966dfe..d3815d3c9f14a 100644 --- a/client/components/signup-form/social.jsx +++ b/client/components/signup-form/social.jsx @@ -43,7 +43,9 @@ class SocialSignupForm extends Component { return (

- { this.props.translate( "Or create account using social profile. We'll never post without your permission." ) } + { this.props.translate( + "Or create an account using your existing social profile. We'll never post without your permission." + ) }

@@ -55,10 +57,6 @@ class SocialSignupForm extends Component { appId={ config( 'facebook_app_id' ) } responseHandler={ this.handleFacebookResponse } />
- -

- { this.props.translate( 'Connect to your existing social profile to get started faster.' ) } -

); } From b8c40490ee2919074f5c2bff8ce63e63392118c1 Mon Sep 17 00:00:00 2001 From: Gary Pendergast Date: Thu, 18 May 2017 16:12:59 +1000 Subject: [PATCH 09/14] Change the error message to a popover The popover will only show when the button is hovered or clicked. --- client/components/button/style.scss | 3 +- client/components/signup-form/style.scss | 24 --------- client/components/social-buttons/google.js | 55 +++++++++++++++++++-- client/components/social-buttons/style.scss | 27 ++++++++++ 4 files changed, 80 insertions(+), 29 deletions(-) diff --git a/client/components/button/style.scss b/client/components/button/style.scss index 91131a153364d..4163344bde70a 100644 --- a/client/components/button/style.scss +++ b/client/components/button/style.scss @@ -48,7 +48,8 @@ button { color: $gray-dark; } &[disabled], - &:disabled { + &:disabled, + &.disabled { color: lighten( $gray, 30% ); background: $white; border-color: lighten( $gray, 30% ); diff --git a/client/components/signup-form/style.scss b/client/components/signup-form/style.scss index 68bb7b2f24749..14f2afac18cdf 100644 --- a/client/components/signup-form/style.scss +++ b/client/components/signup-form/style.scss @@ -41,32 +41,8 @@ margin: 0 0 10px; width: 100%; } - - svg { - margin-top: -2px; - - &.disabled { - display: none; - } - } -} - -.social-buttons__button:disabled { - svg.enabled { - display: none; - } - - svg.disabled { - display: inline; - } } .signup-form__notice.notice { margin-bottom: 10px; } - -.social-buttons__service-error { - color: $alert-red; - font-size: 11px; - margin: 0 10px 10px; -} diff --git a/client/components/social-buttons/google.js b/client/components/social-buttons/google.js index 5298cbd51d477..94a540ea3e456 100644 --- a/client/components/social-buttons/google.js +++ b/client/components/social-buttons/google.js @@ -5,6 +5,12 @@ import React, { Component, PropTypes } from 'react'; import { loadScript } from 'lib/load-script'; import { localize } from 'i18n-calypso'; +/** + * Internal dependencies + */ +import Popover from 'components/popover'; +import { preventWidows } from 'lib/formatting'; + class GoogleLoginButton extends Component { static propTypes = { clientId: PropTypes.string.isRequired, @@ -19,13 +25,20 @@ class GoogleLoginButton extends Component { fetchBasicProfile: true, }; - state = { error: '' }; + state = { + error: '', + showError: false, + errorRef: null, + }; constructor( props ) { super( props ); this.initialized = null; + this.handleClick = this.handleClick.bind( this ); + this.showError = this.showError.bind( this ); + this.hideError = this.hideError.bind( this ); } componentDidMount() { @@ -77,6 +90,11 @@ class GoogleLoginButton extends Component { event.preventDefault(); if ( this.state.error ) { + this.setState( { + showError: ! this.state.showError, + errorRef: event.target, + } ); + return; } @@ -89,12 +107,31 @@ class GoogleLoginButton extends Component { this.initialize().then( gapi => gapi.auth2.getAuthInstance().signIn( { prompt: 'select_account' } ).then( responseHandler ) ); } + showError( event ) { + if ( ! this.state.error ) { + return; + } + + this.setState( { + showError: true, + errorRef: event.target, + } ); + } + + hideError() { + this.setState( { showError: false } ); + } + render() { - const buttonDisabled = Boolean( this.state.error ); + let classes = 'social-buttons__button button'; + if ( this.state.error ) { + classes += ' disabled'; + } return (
- - { this.state.error &&
{ this.state.error }
} + + + { preventWidows( this.state.error ) } +
); } diff --git a/client/components/social-buttons/style.scss b/client/components/social-buttons/style.scss index 1474d95f49b96..2fe0960096e7b 100644 --- a/client/components/social-buttons/style.scss +++ b/client/components/social-buttons/style.scss @@ -1,5 +1,25 @@ /*rtl:ignore*/ +.social-buttons__button { + svg { + margin-top: -2px; + + &.disabled { + display: none; + } + } +} + +.social-buttons__button.disabled { + svg.enabled { + display: none; + } + + svg.disabled { + display: inline; + } +} + .social-buttons__logo { vertical-align: middle; } @@ -7,3 +27,10 @@ .social-buttons__service-name { margin-left: 9px; } + +.social-buttons__error { + .popover__inner { + padding: 10px; + max-width: 200px; + } +} \ No newline at end of file From e34bad4756f69a3c2f97e56b0de640c308e77dae Mon Sep 17 00:00:00 2001 From: Gary Pendergast Date: Thu, 18 May 2017 16:16:12 +1000 Subject: [PATCH 10/14] Remove an unnecessary newline --- client/components/social-buttons/google.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/client/components/social-buttons/google.js b/client/components/social-buttons/google.js index 94a540ea3e456..25148315de219 100644 --- a/client/components/social-buttons/google.js +++ b/client/components/social-buttons/google.js @@ -130,8 +130,7 @@ class GoogleLoginButton extends Component { return (
-