Merge pull request #35592 from Automattic/add/siwa-to-signup

Signup: Add Sign In With Apple button

client/blocks/login/social.jsx

@@ -183,6 +183,7 @@ class SocialLoginForm extends Component {
 						redirectUri={ this.getRedirectUrl( uxMode, 'google' ) }
 						onClick={ this.trackLogin.bind( null, 'google' ) }
 					/>
+
 					<AppleLoginButton
 						responseHandler={ this.handleAppleResponse }
 						onClick={ this.trackLogin.bind( null, 'apple' ) }

client/blocks/signup-form/crowdsignal.scss

@@ -173,7 +173,7 @@ body.is-section-signup .layout .signup.is-crowdsignal .step-wrapper {
 .signup-form__crowdsignal-card-subheader {
 	display: none;
 	margin: 0 auto;
-	padding: 35px 0 75px;
+	padding: 20px 0 50px;
 	text-align: center;
 
 	@include breakpoint( '>660px' ) {

client/blocks/signup-form/social.jsx

@@ -3,17 +3,17 @@
 /**
  * External dependencies
  */
-
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import GoogleLoginButton from 'components/social-buttons/google';
 import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
 
 /**
  * Internal dependencies
  */
+import AppleLoginButton from 'components/social-buttons/apple';
 import config from 'config';
+import GoogleLoginButton from 'components/social-buttons/google';
 import { preventWidows } from 'lib/formatting';
 import { recordTracksEvent } from 'state/analytics/actions';
 
@@ -30,6 +30,19 @@ class SocialSignupForm extends Component {
 		compact: false,
 	};
 
+	handleAppleResponse = response => {
+		if ( ! response.id_token ) {
+			return;
+		}
+
+		const extraUserData = response.user && {
+			user_name: response.user.name,
+			user_email: response.user.email,
+		};
+
+		this.props.handleResponse( 'apple', null, response.id_token, extraUserData );
+	};
+
 	handleGoogleResponse = ( response, triggeredByUser = true ) => {
 		if ( ! response.Zi || ! response.Zi.access_token || ! response.Zi.id_token ) {
 			return;
@@ -42,16 +55,17 @@ class SocialSignupForm extends Component {
 		this.props.handleResponse( 'google', response.Zi.access_token, response.Zi.id_token );
 	};
 
-	trackGoogleLogin = () => {
+	trackSocialLogin = service => {
 		this.props.recordTracksEvent( 'calypso_login_social_button_click', {
-			social_account_type: 'google',
+			social_account_type: service,
 		} );
 	};
 
 	shouldUseRedirectFlow() {
 		// If calypso is loaded in a popup, we don't want to open a second popup for social signup
 		// let's use the redirect flow instead in that case
 		const isPopup = typeof window !== 'undefined' && window.opener && window.opener !== window;
+
 		return isPopup;
 	}
 
@@ -62,11 +76,7 @@ class SocialSignupForm extends Component {
 		return (
 			<div className="signup-form__social">
 				{ ! this.props.compact && (
-					<p>
-						{ preventWidows(
-							this.props.translate( 'Or create an account with your Google profile.' )
-						) }
-					</p>
+					<p>{ preventWidows( this.props.translate( 'Or create an account using:' ) ) }</p>
 				) }
 
 				<div className="signup-form__social-buttons">
@@ -75,7 +85,12 @@ class SocialSignupForm extends Component {
 						responseHandler={ this.handleGoogleResponse }
 						redirectUri={ redirectUri }
 						uxMode={ uxMode }
-						onClick={ this.trackGoogleLogin }
+						onClick={ () => this.trackSocialLogin( 'google' ) }
+					/>
+
+					<AppleLoginButton
+						responseHandler={ this.handleAppleResponse }
+						onClick={ () => this.trackSocialLogin( 'apple' ) }
 					/>
 				</div>
 			</div>

client/blocks/signup-form/style.scss

@@ -29,7 +29,7 @@
 
 .signup-form__social {
 	max-width: 400px;
-	margin: 0 auto 16px;
+	margin: 0 auto;
 	padding: 16px;
 	box-sizing: border-box;
 
@@ -48,7 +48,7 @@
 .signup-form__social-buttons {
 	button {
 		display: block;
-		margin: 0 auto;
+		margin: 0 auto 15px;
 		box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.14 ), 0 2px 1px -1px rgba( 0, 0, 0, 0.12 ),
 			0 1px 3px 0 rgba( 0, 0, 0, 0.2 );
 	}

client/lib/signup/step-actions.js

@@ -381,6 +381,7 @@ export function createAccount(
 				access_token,
 				id_token,
 				signup_flow_name: flowName,
+				...userData,
 			},
 			( error, response ) => {
 				const errors =

client/signup/steps/user/index.jsx

@@ -218,12 +218,14 @@ export class UserStep extends Component {
 	 * @param {String} access_token An OAuth2 acccess token
 	 * @param {String} id_token     (Optional) a JWT id_token which contains the signed user info
 	 *                              So our server doesn't have to request the user profile on its end.
+	 * @param {Object} userData     (Optional) extra user information that can be used to create a new account
 	 */
-	handleSocialResponse = ( service, access_token, id_token = null ) => {
+	handleSocialResponse = ( service, access_token, id_token = null, userData = null ) => {
 		this.submit( {
 			service,
 			access_token,
 			id_token,
+			userData,
 			queryArgs: ( this.props.initialContext && this.props.initialContext.query ) || {},
 		} );
 	};