Prepare the store and send sendEmailLogin for magic codes

Author: gmjuhasz

client/blocks/login/index.jsx

@@ -57,6 +57,7 @@ import ContinueAsUser from './continue-as-user';
 import ErrorNotice from './error-notice';
 import LoginForm from './login-form';
 import { LoginHeader } from './login-header';
+import { shouldUseMagicCode } from './utils/should-use-magic-code';
 
 import './style.scss';
 
@@ -740,6 +741,7 @@ export default connect(
 				redirectTo: stateProps.redirectTo,
 				loginFormFlow: true,
 				showGlobalNotices: false,
+				...( shouldUseMagicCode( { isJetpack: ownProps.isJetpack } ) && { tokenType: 'code' } ),
 				source: stateProps.isWooJPC ? 'woo-passwordless-jpc' + '-' + get( stateProps, 'from' ) : '',
 				flow:
 					( ownProps.isJetpack && 'jetpack' ) ||

client/blocks/login/login-form.jsx

@@ -69,6 +69,7 @@ import isWooJPCFlow from 'calypso/state/selectors/is-woo-jpc-flow';
 import ErrorNotice from './error-notice';
 import SocialLoginForm from './social';
 import { isA4AReferralClient } from './utils/is-a4a-referral-for-client';
+import { shouldUseMagicCode } from './utils/should-use-magic-code';
 
 import './login-form.scss';
 
@@ -335,6 +336,7 @@ export class LoginForm extends Component {
 				redirectTo: this.props.redirectTo,
 				requestLoginEmailFormFlow: true,
 				createAccount: true,
+				...( shouldUseMagicCode( { isJetpack: this.props.isJetpack } ) && { tokenType: 'code' } ),
 				flow: 'jetpack',
 			} );
 		}

client/state/auth/actions.js

@@ -15,6 +15,7 @@ import 'calypso/state/data-layer/wpcom/auth/send-login-email';
  * @param {boolean} options.showGlobalNotices - if true, displays global notices to user about the email
  * @param {string} options.flow - name of the login flow
  * @param {boolean} options.createAccount - if true, instructs the API to create a WPCOM account associated with email
+ * @param {'link'|'code'} options.tokenType - type of token to send in the email
  * @param {boolean} options.source - source of the login request (optional)
  * @returns {Object} action object
  */
@@ -29,6 +30,7 @@ export const sendEmailLogin = (
 		isMobileAppLogin = false,
 		flow = null,
 		createAccount = false,
+		tokenType = 'link',
 		source = '',
 	}
 ) => {
@@ -48,6 +50,7 @@ export const sendEmailLogin = (
 		requestLoginEmailFormFlow,
 		flow,
 		createAccount,
+		tokenType,
 		source,
 	};
 };

client/state/data-layer/wpcom/auth/send-login-email/index.js

@@ -33,6 +33,7 @@ export const sendLoginEmail = ( action ) => {
 		flow,
 		createAccount,
 		source,
+		tokenType,
 	} = action;
 	const noticeAction = showGlobalNotices
 		? infoNotice( translate( 'Sending email' ), { duration: 4000 } )
@@ -73,6 +74,7 @@ export const sendLoginEmail = ( action ) => {
 					...( flow && { flow } ),
 					create_account: createAccount,
 					tos: getToSAcceptancePayload(),
+					...( tokenType && { token_type: tokenType } ),
 					source,
 					calypso_env:
 						window?.location?.host === 'wordpress.com' ? 'production' : config( 'env_id' ),
@@ -83,16 +85,13 @@ export const sendLoginEmail = ( action ) => {
 	];
 };
 
-export const onSuccess = ( {
-	email,
-	showGlobalNotices,
-	infoNoticeId = null,
-	loginFormFlow,
-	requestLoginEmailFormFlow,
-} ) => [
+export const onSuccess = (
+	{ email, showGlobalNotices, infoNoticeId = null, loginFormFlow, requestLoginEmailFormFlow },
+	response
+) => [
 	...( loginFormFlow || requestLoginEmailFormFlow
 		? [
-				{ type: MAGIC_LOGIN_REQUEST_LOGIN_EMAIL_SUCCESS },
+				{ type: MAGIC_LOGIN_REQUEST_LOGIN_EMAIL_SUCCESS, response },
 				{ type: MAGIC_LOGIN_SHOW_CHECK_YOUR_EMAIL_PAGE, email },
 		  ]
 		: [] ),

client/state/login/magic-login/actions.js

@@ -86,6 +86,7 @@ export const fetchMagicLoginAuthenticate =
 
 				dispatch( {
 					type: MAGIC_LOGIN_REQUEST_AUTH_SUCCESS,
+					data: json.data,
 				} );
 			} )
 			.catch( ( error ) => {

client/state/login/magic-login/reducer.js

@@ -133,6 +133,30 @@ export const requestEmailSuccess = ( state = false, action ) => {
 	return state;
 };
 
+export const publicToken = ( state = null, action ) => {
+	switch ( action.type ) {
+		case MAGIC_LOGIN_REQUEST_LOGIN_EMAIL_SUCCESS:
+			return action.response?.public_token || null;
+		case MAGIC_LOGIN_RESET_REQUEST_FORM:
+			return null;
+	}
+
+	return state;
+};
+
+export const authSuccessData = ( state = null, action ) => {
+	switch ( action.type ) {
+		case MAGIC_LOGIN_REQUEST_AUTH_SUCCESS:
+			return action.data || null;
+		case MAGIC_LOGIN_REQUEST_AUTH_ERROR:
+		case MAGIC_LOGIN_REQUEST_AUTH_FETCH:
+		case MAGIC_LOGIN_RESET_REQUEST_FORM:
+			return null;
+	}
+
+	return state;
+};
+
 export default combineReducers( {
 	isFetchingAuth,
 	isFetchingEmail,
@@ -141,4 +165,6 @@ export default combineReducers( {
 	requestEmailError,
 	requestEmailSuccess,
 	currentView,
+	publicToken,
+	authSuccessData,
 } );

client/state/selectors/get-magic-login-auth-success-data.js

@@ -0,0 +1,8 @@
+/**
+ * Returns the magic login authentication success data if it exists
+ * @param  {Object}  state Global state tree
+ * @returns {Object | null}  The auth success data if it exists, null otherwise
+ */
+export default function getMagicLoginAuthSuccessData( state ) {
+	return state.login.magicLogin.authSuccessData;
+}

client/state/selectors/get-magic-login-public-token.js

@@ -0,0 +1,8 @@
+/**
+ * Returns the public token for magic login if it exists
+ * @param  {Object}  state Global state tree
+ * @returns {string|null}  The public token if it exists, null otherwise
+ */
+export default function getMagicLoginPublicToken( state ) {
+	return state.login.magicLogin.publicToken;
+}