From 73a304e3546c7d07dad80fd7fe69adbf0e1cc46d Mon Sep 17 00:00:00 2001 From: Luis Felipe Zaguini Date: Fri, 26 Aug 2022 16:09:25 -0300 Subject: [PATCH 1/8] Share ToS message between login methods --- client/blocks/login/login-form.jsx | 53 +++++++++++++++--------------- client/blocks/login/social.jsx | 7 +++- 2 files changed, 33 insertions(+), 27 deletions(-) diff --git a/client/blocks/login/login-form.jsx b/client/blocks/login/login-form.jsx index 54c4b7f9c4b0c..2529e98efddb5 100644 --- a/client/blocks/login/login-form.jsx +++ b/client/blocks/login/login-form.jsx @@ -497,6 +497,31 @@ export class LoginForm extends Component { return this.renderWooCommerce(); } + const socialToS = this.props.translate( + // To make any changes to this copy please speak to the legal team + 'By continuing, ' + + 'you agree to our {{tosLink}}Terms of Service{{/tosLink}} and' + + ' acknowledge that you have read our {{privacyLink}}Privacy Policy{{/privacyLink}}.', + { + components: { + tosLink: ( + + ), + privacyLink: ( + + ), + }, + } + ); + return (
{ isCrowdsignalOAuth2Client( oauth2Client ) && ( @@ -595,32 +620,7 @@ export class LoginForm extends Component { -

- { this.props.translate( - // To make any changes to this copy please speak to the legal team - 'By continuing, ' + - 'you agree to our {{tosLink}}Terms of Service{{/tosLink}} and' + - ' acknowledge that you have read our {{privacyLink}}Privacy Policy{{/privacyLink}}.', - { - components: { - tosLink: ( - - ), - privacyLink: ( - - ), - }, - } - ) } -

+

{ socialToS }

@@ -655,6 +655,7 @@ export class LoginForm extends Component { socialService={ this.props.socialService } socialServiceResponse={ this.props.socialServiceResponse } uxMode={ this.shouldUseRedirectLoginFlow() ? 'redirect' : 'popup' } + socialToS={ socialToS } /> ) } diff --git a/client/blocks/login/social.jsx b/client/blocks/login/social.jsx index b22f0b26d8d12..265296de123c9 100644 --- a/client/blocks/login/social.jsx +++ b/client/blocks/login/social.jsx @@ -30,6 +30,7 @@ class SocialLoginForm extends Component { linkingSocialService: PropTypes.string, socialService: PropTypes.string, socialServiceResponse: PropTypes.object, + socialToS: PropTypes.element, }; static defaultProps = { @@ -139,7 +140,11 @@ class SocialLoginForm extends Component { }; renderSocialTos = () => { - const { redirectTo, translate } = this.props; + const { redirectTo, translate, socialToS } = this.props; + + if ( socialToS ) { + return

{ socialToS }

; + } const isJetpackMagicLinkSignUpFlow = redirectTo && From b0b617d11c7b58b55d38038e00087dedec4fb8a0 Mon Sep 17 00:00:00 2001 From: Luis Felipe Zaguini Date: Mon, 29 Aug 2022 11:00:13 -0300 Subject: [PATCH 2/8] Update ToS on log-in --- client/blocks/login/login-form.jsx | 6 +++--- client/blocks/login/social.jsx | 11 ++++------- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/client/blocks/login/login-form.jsx b/client/blocks/login/login-form.jsx index 2529e98efddb5..5f64d3270e075 100644 --- a/client/blocks/login/login-form.jsx +++ b/client/blocks/login/login-form.jsx @@ -499,9 +499,9 @@ export class LoginForm extends Component { const socialToS = this.props.translate( // To make any changes to this copy please speak to the legal team - 'By continuing, ' + + 'By continuing with any of the options below, ' + 'you agree to our {{tosLink}}Terms of Service{{/tosLink}} and' + - ' acknowledge that you have read our {{privacyLink}}Privacy Policy{{/privacyLink}}.', + ' have read our {{privacyLink}}Privacy Policy{{/privacyLink}}.', { components: { tosLink: ( @@ -655,7 +655,7 @@ export class LoginForm extends Component { socialService={ this.props.socialService } socialServiceResponse={ this.props.socialServiceResponse } uxMode={ this.shouldUseRedirectLoginFlow() ? 'redirect' : 'popup' } - socialToS={ socialToS } + shouldRenderToS={ false } /> ) } diff --git a/client/blocks/login/social.jsx b/client/blocks/login/social.jsx index 265296de123c9..0bd95015c893a 100644 --- a/client/blocks/login/social.jsx +++ b/client/blocks/login/social.jsx @@ -30,11 +30,12 @@ class SocialLoginForm extends Component { linkingSocialService: PropTypes.string, socialService: PropTypes.string, socialServiceResponse: PropTypes.object, - socialToS: PropTypes.element, + shouldRenderToS: PropTypes.bool, }; static defaultProps = { linkingSocialService: '', + shouldRenderToS: true, }; reportSocialLoginFailure = ( { service, socialInfo, error } ) => { @@ -140,11 +141,7 @@ class SocialLoginForm extends Component { }; renderSocialTos = () => { - const { redirectTo, translate, socialToS } = this.props; - - if ( socialToS ) { - return

{ socialToS }

; - } + const { redirectTo, translate } = this.props; const isJetpackMagicLinkSignUpFlow = redirectTo && @@ -241,7 +238,7 @@ class SocialLoginForm extends Component { />
- { this.renderSocialTos() } + { this.props.shouldRenderToS && this.renderSocialTos() } { this.props.bearerToken && ( From 03c4cd2564c468f47ed227654d3abd18ddd467ca Mon Sep 17 00:00:00 2001 From: Luis Felipe Zaguini Date: Mon, 29 Aug 2022 11:16:19 -0300 Subject: [PATCH 3/8] Update ToS on sign up --- client/blocks/login/social.jsx | 6 +++--- client/blocks/signup-form/index.jsx | 2 +- client/blocks/signup-form/social-signup-tos.jsx | 5 ++--- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/client/blocks/login/social.jsx b/client/blocks/login/social.jsx index 0bd95015c893a..f94c44aa2c820 100644 --- a/client/blocks/login/social.jsx +++ b/client/blocks/login/social.jsx @@ -191,9 +191,9 @@ class SocialLoginForm extends Component { return (

{ translate( - "If you continue with Google or Apple and don't already have a WordPress.com account, you" + - ' are creating an account, you agree to our' + - ' {{tosLink}}Terms of Service{{/tosLink}}, and acknowledge that you have' + + 'If you continue with Google or Apple,' + + ' you agree to our' + + ' {{tosLink}}Terms of Service{{/tosLink}}, and have' + ' read our {{privacyLink}}Privacy Policy{{/privacyLink}}.', { components: { diff --git a/client/blocks/signup-form/index.jsx b/client/blocks/signup-form/index.jsx index 9c93b80e4f180..916efdae8c790 100644 --- a/client/blocks/signup-form/index.jsx +++ b/client/blocks/signup-form/index.jsx @@ -790,7 +790,7 @@ class SignupForm extends Component { termsOfServiceLink = () => { const tosText = this.props.translate( 'By creating an account you agree to our {{tosLink}}Terms of Service{{/tosLink}} and' + - ' acknowledge that you have read our {{privacyLink}}Privacy Policy{{/privacyLink}}.', + ' have read our {{privacyLink}}Privacy Policy{{/privacyLink}}.', { components: { tosLink: ( diff --git a/client/blocks/signup-form/social-signup-tos.jsx b/client/blocks/signup-form/social-signup-tos.jsx index 19936b62b8738..91a0434d21d45 100644 --- a/client/blocks/signup-form/social-signup-tos.jsx +++ b/client/blocks/signup-form/social-signup-tos.jsx @@ -5,9 +5,8 @@ function SocialSignupToS( props ) { return (

{ props.translate( - "If you continue with Google or Apple and don't already have a WordPress.com account, you" + - ' are creating an account, you agree to our' + - ' {{tosLink}}Terms of Service{{/tosLink}}, and acknowledge that you have' + + 'If you continue with Google or Apple, you agree to our' + + ' {{tosLink}}Terms of Service{{/tosLink}}, and have' + ' read our {{privacyLink}}Privacy Policy{{/privacyLink}}.', { components: { From 7f1675fb1912d6422e944ca91fb33286d2afd9c8 Mon Sep 17 00:00:00 2001 From: Luis Felipe Zaguini Date: Mon, 29 Aug 2022 11:31:06 -0300 Subject: [PATCH 4/8] Update Woo ToS on log in --- client/blocks/login/login-form.jsx | 31 +++++++++++++++++------------- client/blocks/login/style.scss | 11 ++++++++--- 2 files changed, 26 insertions(+), 16 deletions(-) diff --git a/client/blocks/login/login-form.jsx b/client/blocks/login/login-form.jsx index 5f64d3270e075..35ad8c49bf250 100644 --- a/client/blocks/login/login-form.jsx +++ b/client/blocks/login/login-form.jsx @@ -315,7 +315,7 @@ export class LoginForm extends Component { this.loginUser(); }; - renderWooCommerce( showSocialLogin = true ) { + renderWooCommerce( { showSocialLogin = true, socialToS } = {} ) { const isFormDisabled = this.state.isFormDisabledWhileLoading || this.props.isFormDisabled; const { requestError, socialAccountIsLinking: linkingSocialUser } = this.props; @@ -404,6 +404,7 @@ export class LoginForm extends Component {

+

{ socialToS }

) } @@ -485,18 +487,6 @@ export class LoginForm extends Component { ? window.location.origin + pathWithLeadingSlash( this.props.signupUrl ) : getSignupUrl( currentQuery, currentRoute, oauth2Client, locale, pathname, isGutenboarding ); - if ( isJetpackWooCommerceFlow ) { - return this.renderWooCommerce(); - } - - if ( isJetpackWooDnaFlow ) { - return this.renderWooCommerce( !! accountType ); // Only show the social buttons after the user entered an email. - } - - if ( isWooOAuth2Client( oauth2Client ) && wccomFrom ) { - return this.renderWooCommerce(); - } - const socialToS = this.props.translate( // To make any changes to this copy please speak to the legal team 'By continuing with any of the options below, ' + @@ -522,6 +512,21 @@ export class LoginForm extends Component { } ); + if ( isJetpackWooCommerceFlow ) { + return this.renderWooCommerce( { socialToS } ); + } + + if ( isJetpackWooDnaFlow ) { + return this.renderWooCommerce( { + showSocialLogin: !! accountType, // Only show the social buttons after the user entered an email. + socialToS, + } ); + } + + if ( isWooOAuth2Client( oauth2Client ) && wccomFrom ) { + return this.renderWooCommerce( { socialToS } ); + } + return ( { isCrowdsignalOAuth2Client( oauth2Client ) && ( diff --git a/client/blocks/login/style.scss b/client/blocks/login/style.scss index cc27eaaab6950..703cc4ee03385 100644 --- a/client/blocks/login/style.scss +++ b/client/blocks/login/style.scss @@ -100,9 +100,14 @@ box-shadow: none; } - .login__social-tos a { - color: var( --studio-gray-60 ); - text-decoration: underline; + .login__social-tos { + margin: 1.5em auto; + max-width: 330px; + + a { + color: var( --studio-gray-60 ); + text-decoration: underline; + } } .jetpack-header__partner-logo-plus svg { From 6708dd5f38f175509d4db1b697beef7b10b4229d Mon Sep 17 00:00:00 2001 From: Luis Felipe Zaguini Date: Wed, 31 Aug 2022 15:45:11 -0300 Subject: [PATCH 5/8] Update ToS link colors --- client/blocks/login/style.scss | 2 +- client/blocks/signup-form/style.scss | 1 - client/layout/masterbar/oauth-client.scss | 5 ----- client/login/wp-login/style.scss | 15 +++++++-------- client/signup/steps/user/style.scss | 3 --- client/signup/style.scss | 1 - 6 files changed, 8 insertions(+), 19 deletions(-) diff --git a/client/blocks/login/style.scss b/client/blocks/login/style.scss index 703cc4ee03385..efd2ae934ed20 100644 --- a/client/blocks/login/style.scss +++ b/client/blocks/login/style.scss @@ -105,7 +105,7 @@ max-width: 330px; a { - color: var( --studio-gray-60 ); + color: var( --color-accent ); text-decoration: underline; } } diff --git a/client/blocks/signup-form/style.scss b/client/blocks/signup-form/style.scss index 47be7798d8ec9..954d8d1f136c1 100644 --- a/client/blocks/signup-form/style.scss +++ b/client/blocks/signup-form/style.scss @@ -62,7 +62,6 @@ } .signup-form__social-buttons-tos a { - color: var( --color-text-inverted ); text-decoration: underline; } diff --git a/client/layout/masterbar/oauth-client.scss b/client/layout/masterbar/oauth-client.scss index adb0055804ec8..a013187a9eea5 100644 --- a/client/layout/masterbar/oauth-client.scss +++ b/client/layout/masterbar/oauth-client.scss @@ -95,11 +95,6 @@ background: var( --studio-gray-0 ); } - a, - a:visited { - color: inherit; - } - .button { background-color: var( --studio-gray-0 ); border-radius: 2px; diff --git a/client/login/wp-login/style.scss b/client/login/wp-login/style.scss index ce681484b1c88..65a46009cf2b2 100644 --- a/client/login/wp-login/style.scss +++ b/client/login/wp-login/style.scss @@ -241,10 +241,15 @@ $image-height: 47px; } .login__form-terms, + .login__form-terms { + text-align: left; + color: var( --color-neutral-60 ); + font-size: $font-body-extra-small; + } + .login__form-terms a, .login__form-terms a:hover { text-align: left; - color: var( --color-neutral-60 ); font-size: $font-body-extra-small; } @@ -264,10 +269,6 @@ $image-height: 47px; } } - .login__social-tos a { - color: var( --studio-gray-60 ); - } - .wp-login__site-return-link::after { background: none; } @@ -520,9 +521,7 @@ $image-height: 47px; .two-factor-authentication__verification-code-form > p, .login__form-terms, - .login__social-tos, - .login__form-terms a, - .login__social-tos a { + .login__social-tos { color: var( --studio-gray-50 ); } diff --git a/client/signup/steps/user/style.scss b/client/signup/steps/user/style.scss index 13a311cc4feee..53cdf37b0621e 100644 --- a/client/signup/steps/user/style.scss +++ b/client/signup/steps/user/style.scss @@ -1,9 +1,7 @@ body.is-section-signup.is-white-signup .signup { .signup-form.is-horizontal { .signup-form__terms-of-service-link, - .signup-form__terms-of-service-link a, .signup-form__social-buttons-tos, - .signup-form__social-buttons-tos a, .signup-form__social p, .signup-form__recaptcha-tos, .logged-out-form__links .logged-out-form__link-item { @@ -22,7 +20,6 @@ body.is-section-signup.is-white-signup .signup { .signup-form__terms-of-service-link a, .signup-form__social-buttons-tos a, .signup-form__recaptcha-tos a { - color: inherit; text-decoration: underline; } } diff --git a/client/signup/style.scss b/client/signup/style.scss index 253e36c4c94c6..4492380042f3a 100644 --- a/client/signup/style.scss +++ b/client/signup/style.scss @@ -339,7 +339,6 @@ body.is-section-signup .layout.gravatar .formatted-header { .signup-form__terms-of-service-link a, .signup-form__social-buttons-tos a { - color: var( --studio-gray-50 ); text-decoration: underline; } From daf4c279088501bba447e1b74affef7a1b2112a5 Mon Sep 17 00:00:00 2001 From: Luis Felipe Zaguini Date: Wed, 31 Aug 2022 17:34:53 -0300 Subject: [PATCH 6/8] Fix ToS on external OAuth client ids --- client/layout/masterbar/oauth-client.scss | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/client/layout/masterbar/oauth-client.scss b/client/layout/masterbar/oauth-client.scss index a013187a9eea5..95914e6b8dbbf 100644 --- a/client/layout/masterbar/oauth-client.scss +++ b/client/layout/masterbar/oauth-client.scss @@ -992,15 +992,13 @@ } .login__form-terms { - font-size: $font-body-small; - line-height: 24px; - margin-top: 8px; + font-size: $font-body-extra-small; + margin-bottom: 1em; } .login__form-signup-link { font-size: $font-body; line-height: 24px; - padding-top: 0; } .login__divider { @@ -1088,10 +1086,10 @@ .login__form-userdata { order: 1; } - .login__form-action { + .login__form-terms { order: 2; } - .login__form-terms { + .login__form-action { order: 3; } .login__form-signup-link { From 11d62da4da840ed3ef31a729c9a24d7617b0bc6f Mon Sep 17 00:00:00 2001 From: Luis Felipe Zaguini Date: Wed, 31 Aug 2022 18:12:07 -0300 Subject: [PATCH 7/8] Remove ToS from SocialLoginForm --- client/blocks/login/login-form.jsx | 2 - client/blocks/login/social.jsx | 73 +----------------------------- 2 files changed, 1 insertion(+), 74 deletions(-) diff --git a/client/blocks/login/login-form.jsx b/client/blocks/login/login-form.jsx index 35ad8c49bf250..fb5152ff61c70 100644 --- a/client/blocks/login/login-form.jsx +++ b/client/blocks/login/login-form.jsx @@ -431,7 +431,6 @@ export class LoginForm extends Component { socialService={ this.props.socialService } socialServiceResponse={ this.props.socialServiceResponse } uxMode={ this.shouldUseRedirectLoginFlow() ? 'redirect' : 'popup' } - shouldRenderToS={ false } />
) } @@ -660,7 +659,6 @@ export class LoginForm extends Component { socialService={ this.props.socialService } socialServiceResponse={ this.props.socialServiceResponse } uxMode={ this.shouldUseRedirectLoginFlow() ? 'redirect' : 'popup' } - shouldRenderToS={ false } /> ) } diff --git a/client/blocks/login/social.jsx b/client/blocks/login/social.jsx index f94c44aa2c820..ab4dad34c2e61 100644 --- a/client/blocks/login/social.jsx +++ b/client/blocks/login/social.jsx @@ -1,7 +1,5 @@ import config from '@automattic/calypso-config'; import { Card } from '@automattic/components'; -import { localizeUrl } from '@automattic/i18n-utils'; -import { localize } from 'i18n-calypso'; import PropTypes from 'prop-types'; import { Component } from 'react'; import { connect } from 'react-redux'; @@ -24,7 +22,6 @@ class SocialLoginForm extends Component { recordTracksEvent: PropTypes.func.isRequired, redirectTo: PropTypes.string, onSuccess: PropTypes.func.isRequired, - translate: PropTypes.func.isRequired, loginSocialUser: PropTypes.func.isRequired, uxMode: PropTypes.string.isRequired, linkingSocialService: PropTypes.string, @@ -140,72 +137,6 @@ class SocialLoginForm extends Component { return `https://${ host + login( { socialService: service } ) }`; }; - renderSocialTos = () => { - const { redirectTo, translate } = this.props; - - const isJetpackMagicLinkSignUpFlow = - redirectTo && - redirectTo.includes( 'jetpack/connect' ) && - config.isEnabled( 'jetpack/magic-link-signup' ); - - const tosLink = ( - - ); - const privacyLink = ( - - ); - - if ( isJetpackMagicLinkSignUpFlow ) { - return ( - <> -

- { translate( - 'By continuing, you agree to our {{tosLink}}Terms of' + - ' Service{{/tosLink}} and acknowledge that you have read our' + - ' {{privacyLink}}Privacy Policy{{/privacyLink}}.', - { - components: { - tosLink, - privacyLink, - }, - } - ) } -

-

- { translate( - 'If you continue with Google, Apple, or an email that isn’t registered yet,' + - ' you are creating a new WordPress.com account.' - ) } -

- - ); - } - return ( -

- { translate( - 'If you continue with Google or Apple,' + - ' you agree to our' + - ' {{tosLink}}Terms of Service{{/tosLink}}, and have' + - ' read our {{privacyLink}}Privacy Policy{{/privacyLink}}.', - { - components: { - tosLink, - privacyLink, - }, - } - ) } -

- ); - }; - render() { const { redirectTo, uxMode } = this.props; const uxModeApple = config.isEnabled( 'sign-in-with-apple/redirect' ) ? 'redirect' : uxMode; @@ -237,8 +168,6 @@ class SocialLoginForm extends Component { } /> - - { this.props.shouldRenderToS && this.renderSocialTos() } { this.props.bearerToken && ( @@ -264,4 +193,4 @@ export default connect( createSocialUserFailed, recordTracksEvent, } -)( localize( SocialLoginForm ) ); +)( SocialLoginForm ); From 73f2a1c427b4a2a518f36dbc1ed21b7d5cceaa49 Mon Sep 17 00:00:00 2001 From: Luis Felipe Zaguini Date: Wed, 31 Aug 2022 18:36:29 -0300 Subject: [PATCH 8/8] Remove excessive margin between input and ToS copy on P2 log-in flow --- client/blocks/login/style.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/client/blocks/login/style.scss b/client/blocks/login/style.scss index efd2ae934ed20..0fa79897a46fb 100644 --- a/client/blocks/login/style.scss +++ b/client/blocks/login/style.scss @@ -332,10 +332,6 @@ box-shadow: none; } - .login__form-userdata { - margin-bottom: 2em; - } - .login__form label { font-size: var( --p2-font-size-form-xxs ); color: var( --p2-color-text );