Social Signup: Handle the case where users block third-party cookies/…

…data (#13983) When third party cookies are disabled, the Google signup button is disable with a Popover showing why. Fixes #13553.
Automattic · May 29, 2017 · 9fcffd2 · 9fcffd2
1 parent 2ae1c6a
commit 9fcffd2
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 27 deletions.
diff --git 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/social.jsx b/client/components/signup-form/social.jsx
@@ -43,7 +43,7 @@ class SocialSignupForm extends Component {
  return (
  <div className="signup-form__social">
  <p>
- { this.props.translate( 'Or create account using social profile:' ) }
+ { this.props.translate( 'Or create an account using your existing social profile:' ) }
  </p>
 
  <div className="signup-form__social-buttons">
@@ -56,10 +56,10 @@ class SocialSignupForm extends Component {
  responseHandler={ this.handleFacebookResponse } />
  </div>
 
- <p>
+ <p>
  { this.props.translate(
- "Connect to your existing social profile to get started faster. We'll never post without your permission."
- ) }
+ "Connect to your existing social profile to get started faster. We'll never post without your permission."
+ ) }
  </p>
  </div>
  );

diff --git a/client/components/signup-form/style.scss b/client/components/signup-form/style.scss
@@ -41,10 +41,6 @@
  margin: 0 0 10px;
  width: 100%;
  }
-
- svg {
- margin-top: -2px;
- }
 }
 
 .signup-form__notice.notice {

diff --git 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,11 +25,20 @@ class GoogleLoginButton extends Component {
  fetchBasicProfile: true,
  };
 
+ 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() {
@@ -45,6 +60,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 +75,11 @@ 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( 'Please enable "third-party cookies" to connect your Google account.' ) } );
+ }
+
  return Promise.reject( error );
  } );
 
@@ -65,6 +89,15 @@ class GoogleLoginButton extends Component {
  handleClick( event ) {
  event.preventDefault();
 
+ if ( this.state.error ) {
+ this.setState( {
+ showError: ! this.state.showError,
+ errorRef: event.currentTarget,
+ } );
+
+ return;
+ }
+
  const { responseHandler } = this.props;
 
  // Handle click async if the library is not loaded yet
@@ -74,27 +107,69 @@ 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.currentTarget,
+ } );
+ }
+
+ hideError() {
+ this.setState( { showError: false } );
+ }
+
  render() {
+ let classes = 'social-buttons__button button';
+ if ( this.state.error ) {
+ classes += ' disabled';
+ }
+
  return (
- <button className="button" onClick={ this.handleClick }>
- <svg className="social-buttons__logo" width="20" height="20" viewBox="0 0 20 20" xmlns="http:https://www.w3.org/2000/svg">
+ <div>
+ <button className={ classes } onMouseOver={ this.showError } onMouseOut={ this.hideError } onClick={ this.handleClick }>
  { /* eslint-disable max-len */ }
- <g fill="none" fillRule="evenodd">
- <path d="M19.6 10.227c0-.709-.064-1.39-.182-2.045H10v3.868h5.382a4.6 4.6 0 0 1-1.996 3.018v2.51h3.232c1.891-1.742 2.982-4.305 2.982-7.35z" fill="#4285F4" />
- <path d="M10 20c2.7 0 4.964-.895 6.618-2.423l-3.232-2.509c-.895.6-2.04.955-3.386.955-2.605 0-4.81-1.76-5.595-4.123H1.064v2.59A9.996 9.996 0 0 0 10 20z" fill="#34A853" />
- <path d="M4.405 11.9c-.2-.6-.314-1.24-.314-1.9 0-.66.114-1.3.314-1.9V5.51H1.064A9.996 9.996 0 0 0 0 10c0 1.614.386 3.14 1.064 4.49l3.34-2.59z" fill="#FBBC05" />
- <path d="M10 3.977c1.468 0 2.786.505 3.823 1.496l2.868-2.868C14.959.99 12.695 0 10 0 6.09 0 2.71 2.24 1.064 5.51l3.34 2.59C5.192 5.736 7.396 3.977 10 3.977z" fill="#EA4335" />
+ <svg className="social-buttons__logo enabled" width="20" height="20" viewBox="0 0 20 20"xmlns="http:https://www.w3.org/2000/svg">
+ <g fill="none" fillRule="evenodd">
+ <path d="M19.6 10.227c0-.709-.064-1.39-.182-2.045H10v3.868h5.382a4.6 4.6 0 0 1-1.996 3.018v2.51h3.232c1.891-1.742 2.982-4.305 2.982-7.35z" fill="#4285F4" />
+ <path d="M10 20c2.7 0 4.964-.895 6.618-2.423l-3.232-2.509c-.895.6-2.04.955-3.386.955-2.605 0-4.81-1.76-5.595-4.123H1.064v2.59A9.996 9.996 0 0 0 10 20z" fill="#34A853" />
+ <path d="M4.405 11.9c-.2-.6-.314-1.24-.314-1.9 0-.66.114-1.3.314-1.9V5.51H1.064A9.996 9.996 0 0 0 0 10c0 1.614.386 3.14 1.064 4.49l3.34-2.59z" fill="#FBBC05" />
+ <path d="M10 3.977c1.468 0 2.786.505 3.823 1.496l2.868-2.868C14.959.99 12.695 0 10 0 6.09 0 2.71 2.24 1.064 5.51l3.34 2.59C5.192 5.736 7.396 3.977 10 3.977z" fill="#EA4335" />
+ </g>
+ </svg>
+
+ <svg className="social-buttons__logo disabled" width="20" height="20" viewBox="0 0 20 20" xmlns="http:https://www.w3.org/2000/svg">
+ <g fill="none" fillRule="evenodd">
+ <path d="M19.6 10.227c0-.709-.064-1.39-.182-2.045H10v3.868h5.382a4.6 4.6 0 0 1-1.996 3.018v2.51h3.232c1.891-1.742 2.982-4.305 2.982-7.35z" fill="#e9eff3" />
+ <path d="M10 20c2.7 0 4.964-.895 6.618-2.423l-3.232-2.509c-.895.6-2.04.955-3.386.955-2.605 0-4.81-1.76-5.595-4.123H1.064v2.59A9.996 9.996 0 0 0 10 20z" fill="#e9eff3" />
+ <path d="M4.405 11.9c-.2-.6-.314-1.24-.314-1.9 0-.66.114-1.3.314-1.9V5.51H1.064A9.996 9.996 0 0 0 0 10c0 1.614.386 3.14 1.064 4.49l3.34-2.59z" fill="#e9eff3" />
+ <path d="M10 3.977c1.468 0 2.786.505 3.823 1.496l2.868-2.868C14.959.99 12.695 0 10 0 6.09 0 2.71 2.24 1.064 5.51l3.34 2.59C5.192 5.736 7.396 3.977 10 3.977z" fill="#e9eff3" />
+ </g>
+ </svg>
  { /* eslint-enable max-len */ }
- </g>
- </svg>
-
- <span className="social-buttons__service-name">
- { this.props.translate( 'Continue with %(service)s', {
- args: { service: 'Google' },
- comment: '%(service)s is the name of a Social Network, e.g. "Google", "Facebook", "Twitter" ...'
- } ) }
- </span>
- </button>
+
+ <span className="social-buttons__service-name">
+ { this.props.translate( 'Continue with %(service)s', {
+ args: { service: 'Google' },
+ comment: '%(service)s is the name of a Social Network, e.g. "Google", "Facebook", "Twitter" ...'
+ } ) }
+ </span>
+ </button>
+
+ <Popover
+ id="social-buttons__error"
+ className="social-buttons__error"
+ isVisible={ this.state.showError }
+ onClose={ this.hideError }
+ position="top"
+ context={ this.state.errorRef }
+ >
+ { preventWidows( this.state.error ) }
+ </Popover>
+ </div>
  );
  }
 }

diff --git a/client/components/social-buttons/style.scss b/client/components/social-buttons/style.scss
@@ -1,9 +1,36 @@
 /*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;
 }
 
 .social-buttons__service-name {
  margin-left: 9px;
 }
+
+.social-buttons__error {
+ .popover__inner {
+ padding: 10px;
+ max-width: 200px;
+ }
+}
diff --git a/client/login/wp-login/test/test.jsx b/client/login/wp-login/test/test.jsx
@@ -9,12 +9,17 @@ import { identity } from 'lodash';
 /**
  * Internal Dependencies
  */
-import { Login } from '../index.jsx';
 import useFakeDom from 'test/helpers/use-fake-dom';
 
 describe( 'Login', () => {
+ let Login;
+
  useFakeDom();
 
+ before( () => {
+ Login = require( '../index.jsx' ).Login;
+ } );
+
  describe( 'footerLinks', () => {
  context( 'when state is not loaded', () => {
  it( 'should not have a return button', () => {