Social Auth: Update TOS message to remove mention of creating an account on social login

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 {
 					</div>
 
 					<div className="login__form-footer">
+						<p className="login__social-tos">{ socialToS }</p>
 						<div className="login__form-action">
 							<Button
 								primary
@@ -485,16 +486,44 @@ export class LoginForm extends Component {
 			? window.location.origin + pathWithLeadingSlash( this.props.signupUrl )
 			: getSignupUrl( currentQuery, currentRoute, oauth2Client, locale, pathname, isGutenboarding );
 
+		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, ' +
+				'you agree to our {{tosLink}}Terms of Service{{/tosLink}} and' +
+				' have read our {{privacyLink}}Privacy Policy{{/privacyLink}}.',
+			{
+				components: {
+					tosLink: (
+						<a
+							href={ localizeUrl( 'https://wordpress.com/tos/' ) }
+							target="_blank"
+							rel="noopener noreferrer"
+						/>
+					),
+					privacyLink: (
+						<a
+							href={ localizeUrl( 'https://automattic.com/privacy/' ) }
+							target="_blank"
+							rel="noopener noreferrer"
+						/>
+					),
+				},
+			}
+		);
+
 		if ( isJetpackWooCommerceFlow ) {
-			return this.renderWooCommerce();
+			return this.renderWooCommerce( { socialToS } );
 		}
 
 		if ( isJetpackWooDnaFlow ) {
-			return this.renderWooCommerce( !! accountType ); // Only show the social buttons after the user entered an email.
+			return this.renderWooCommerce( {
+				showSocialLogin: !! accountType, // Only show the social buttons after the user entered an email.
+				socialToS,
+			} );
 		}
 
 		if ( isWooOAuth2Client( oauth2Client ) && wccomFrom ) {
-			return this.renderWooCommerce();
+			return this.renderWooCommerce( { socialToS } );
 		}
 
 		return (
@@ -595,32 +624,7 @@ export class LoginForm extends Component {
 						</div>
 					</div>
 
-					<p className="login__form-terms">
-						{ 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: (
-										<a
-											href={ localizeUrl( 'https://wordpress.com/tos/' ) }
-											target="_blank"
-											rel="noopener noreferrer"
-										/>
-									),
-									privacyLink: (
-										<a
-											href={ localizeUrl( 'https://automattic.com/privacy/' ) }
-											target="_blank"
-											rel="noopener noreferrer"
-										/>
-									),
-								},
-							}
-						) }
-					</p>
+					<p className="login__form-terms">{ socialToS }</p>
 
 					<div className="login__form-action">
 						<FormsButton primary disabled={ isFormDisabled }>

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,16 +22,17 @@ 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,
 		socialService: PropTypes.string,
 		socialServiceResponse: PropTypes.object,
+		shouldRenderToS: PropTypes.bool,
 	};
 
 	static defaultProps = {
 		linkingSocialService: '',
+		shouldRenderToS: true,
 	};
 
 	reportSocialLoginFailure = ( { service, socialInfo, error } ) => {
@@ -138,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 = (
-			<a
-				href={ localizeUrl( 'https://wordpress.com/tos/' ) }
-				target="_blank"
-				rel="noopener noreferrer"
-			/>
-		);
-		const privacyLink = (
-			<a
-				href={ localizeUrl( 'https://automattic.com/privacy/' ) }
-				target="_blank"
-				rel="noopener noreferrer"
-			/>
-		);
-
-		if ( isJetpackMagicLinkSignUpFlow ) {
-			return (
-				<>
-					<p className="login__social-tos">
-						{ 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,
-								},
-							}
-						) }
-					</p>
-					<p className="login__social-tos">
-						{ translate(
-							'If you continue with Google, Apple, or an email that isn’t registered yet,' +
-								' you are creating a new WordPress.com account.'
-						) }
-					</p>
-				</>
-			);
-		}
-		return (
-			<p className="login__social-tos">
-				{ 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' +
-						' read our {{privacyLink}}Privacy Policy{{/privacyLink}}.',
-					{
-						components: {
-							tosLink,
-							privacyLink,
-						},
-					}
-				) }
-			</p>
-		);
-	};
-
 	render() {
 		const { redirectTo, uxMode } = this.props;
 		const uxModeApple = config.isEnabled( 'sign-in-with-apple/redirect' ) ? 'redirect' : uxMode;
@@ -235,8 +168,6 @@ class SocialLoginForm extends Component {
 							}
 						/>
 					</div>
-
-					{ this.renderSocialTos() }
 				</div>
 
 				{ this.props.bearerToken && (
@@ -262,4 +193,4 @@ export default connect(
 		createSocialUserFailed,
 		recordTracksEvent,
 	}
-)( localize( SocialLoginForm ) );
+)( SocialLoginForm );

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( --color-accent );
+			text-decoration: underline;
+		}
 	}
 
 	.jetpack-header__partner-logo-plus svg {
@@ -327,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 );

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: (

client/blocks/signup-form/social-signup-tos.jsx

@@ -5,9 +5,8 @@ function SocialSignupToS( props ) {
 	return (
 		<p className="signup-form__social-buttons-tos">
 			{ 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: {

client/blocks/signup-form/style.scss

@@ -62,7 +62,6 @@
 }
 
 .signup-form__social-buttons-tos a {
-	color: var( --color-text-inverted );
 	text-decoration: underline;
 }
 

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;
@@ -997,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 {
@@ -1093,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 {

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 );
 	}
 

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;
 		}
 	}

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;
 	}