feat(reader-registration-block): password, OTP, and verification flows (#4452)

Author: miguelpeixe

includes/class-magic-link.php

@@ -861,8 +861,12 @@ public static function process_otp_request() {
 		if ( ! Reader_Activation::is_enabled() ) {
 			return;
 		}
+		// Allow logged-in unverified readers to verify via OTP.
 		if ( \is_user_logged_in() ) {
-			return;
+			$current_user = \wp_get_current_user();
+			if ( ! Reader_Activation::is_user_reader( $current_user ) || Reader_Activation::is_reader_verified( $current_user ) ) {
+				return;
+			}
 		}
 
 		// phpcs:disable WordPress.Security.NonceVerification.Missing
@@ -923,6 +927,7 @@ public static function process_otp_request() {
 			'email'         => $email,
 			'existing_user' => true,
 			'metadata'      => $metadata,
+			'verified'      => Reader_Activation::is_reader_verified( $user ),
 		];
 
 		return self::send_otp_request_response( __( 'Login successful!', 'newspack-plugin' ), true, $data );

includes/class-newspack-ui-icons.php

@@ -150,6 +150,10 @@ public static function sanitize_svgs() {
 			'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false" class="newspack-ui__svg-icon--key">
 				<path d="M10.4984 9.5C10.4984 7.29063 12.289 5.5 14.4984 5.5C16.7078 5.5 18.4984 7.29063 18.4984 9.5C18.4984 11.7094 16.7078 13.5 14.4984 13.5C14.1734 13.5 13.8578 13.4625 13.5578 13.3875C13.3047 13.325 13.0359 13.4 12.8515 13.5875L11.939 14.5H10.2484C9.83279 14.5 9.49841 14.8344 9.49841 15.25V16.5H8.24841C7.83279 16.5 7.49841 16.8344 7.49841 17.25V18.5H5.49841V16.0594L10.4109 11.1469C10.5953 10.9625 10.6703 10.6938 10.6109 10.4406C10.539 10.1406 10.4984 9.825 10.4984 9.5ZM14.4984 4C11.4609 4 8.99841 6.4625 8.99841 9.5C8.99841 9.79688 9.02029 10.0875 9.06716 10.3719L4.21716 15.2188C4.07654 15.3594 3.99841 15.55 3.99841 15.75V19.25C3.99841 19.6656 4.33279 20 4.74841 20H8.24841C8.66404 20 8.99841 19.6656 8.99841 19.25V18H10.2484C10.664 18 10.9984 17.6656 10.9984 17.25V16H12.2484C12.4484 16 12.639 15.9219 12.7797 15.7812L13.6297 14.9312C13.914 14.975 14.2047 15 14.5015 15C17.539 15 20.0015 12.5375 20.0015 9.5C20.0015 6.4625 17.5359 4 14.4984 4ZM15.4984 9.5C15.7636 9.5 16.018 9.39464 16.2055 9.20711C16.3931 9.01957 16.4984 8.76522 16.4984 8.5C16.4984 8.23478 16.3931 7.98043 16.2055 7.79289C16.018 7.60536 15.7636 7.5 15.4984 7.5C15.2332 7.5 14.9788 7.60536 14.7913 7.79289C14.6038 7.98043 14.4984 8.23478 14.4984 8.5C14.4984 8.76522 14.6038 9.01957 14.7913 9.20711C14.9788 9.39464 15.2332 9.5 15.4984 9.5Z" />
 			</svg>',
+		'login'       =>
+			'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false" class="newspack-ui__svg-icon--login">
+				<path d="M11 14.5l1.1 1.1 3-3 .5-.5-.6-.6-3-3-1 1 1.7 1.7H5v1.5h7.7L11 14.5zM16.8 5h-7c-1.1 0-2 .9-2 2v1.5h1.5V7c0-.3.2-.5.5-.5h7c.3 0 .5.2.5.5v10c0 .3-.2.5-.5.5h-7c-.3 0-.5-.2-.5-.5v-1.5H7.8V17c0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2z" />
+			</svg>',
 		'logout'      =>
 			'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false" class="newspack-ui__svg-icon--logout">
 				<path d="M19.03 8.47L22.56 12L19.03 15.53L17.97 14.47L19.69 12.75H8.5V11.25H19.69L17.97 9.53L19.03 8.47ZM13.5 17C13.5 17.1326 13.4473 17.2598 13.3536 17.3536C13.2598 17.4473 13.1326 17.5 13 17.5H6C5.86739 17.5 5.74021 17.4473 5.64645 17.3536C5.55268 17.2598 5.5 17.1326 5.5 17V7C5.5 6.86739 5.55268 6.74021 5.64645 6.64645C5.74021 6.55268 5.86739 6.5 6 6.5H13C13.1326 6.5 13.2598 6.55268 13.3536 6.64645C13.4473 6.74021 13.5 6.86739 13.5 7V8.5H15V7C15 6.46957 14.7893 5.96086 14.4142 5.58579C14.0391 5.21071 13.5304 5 13 5H6C5.46957 5 4.96086 5.21071 4.58579 5.58579C4.21071 5.96086 4 6.46957 4 7V17C4 17.5304 4.21071 18.0391 4.58579 18.4142C4.96086 18.7893 5.46957 19 6 19H13C13.5304 19 14.0391 18.7893 14.4142 18.4142C14.7893 18.0391 15 17.5304 15 17V15.5H13.5V17Z" />

includes/content-gate/class-content-gate.php

@@ -719,22 +719,6 @@ public static function handle_edit_gate_layout() {
 		}
 	}
 
-	/**
-	 * Get the inline gate content.
-	 */
-	public static function get_inline_gate_content() {
-		return self::get_inline_gate_content_for_post( self::get_gate_layout_id() );
-	}
-
-	/**
-	 * Get the inline gate HTML for rendering.
-	 *
-	 * @return string
-	 */
-	public static function get_inline_gate_html() {
-		return apply_filters( 'newspack_gate_content', self::get_inline_gate_content() );
-	}
-
 	/**
 	 * Get the post excerpt to be displayed in the gate.
 	 *
@@ -859,6 +843,9 @@ public static function get_registration_settings( $gate_id ) {
 	public static function requires_account_verification( $gate_id = null ) {
 		if ( ! $gate_id ) {
 			$gate_id = self::get_gate_post_id();
+			if ( ! $gate_id ) {
+				return false;
+			}
 		}
 		$registration = self::get_registration_settings( $gate_id );
 		return $registration['require_verification'];

includes/content-gate/trait-content-gate-layout.php

@@ -280,6 +280,22 @@ public static function get_restricted_post_excerpt_for_gate( $post, $gate_layout
 		return $content;
 	}
 
+	/**
+	 * Get the inline gate content.
+	 */
+	public static function get_inline_gate_content() {
+		return self::get_inline_gate_content_for_post( self::get_gate_layout_id() );
+	}
+
+	/**
+	 * Get the inline gate HTML for rendering.
+	 *
+	 * @return string
+	 */
+	public static function get_inline_gate_html() {
+		return apply_filters( 'newspack_gate_content', self::get_inline_gate_content() );
+	}
+
 	/**
 	 * Render the overlay gate HTML.
 	 *

includes/oauth/class-google-login.php

@@ -315,7 +315,9 @@ public static function api_google_login_register( $request ) {
 				return $result;
 			}
 
+			$current_user = \wp_get_current_user();
 			$data['metadata'] = $metadata;
+			$data['verified'] = $current_user ? Reader_Activation::is_reader_verified( $current_user ) : false;
 			return \rest_ensure_response(
 				[
 					'data'    => $data,

includes/reader-activation/class-reader-activation.php

@@ -286,7 +286,7 @@ private static function get_reader_activation_labels( $key = null ) {
 					'continue'        => __( 'Continue', 'newspack-plugin' ),
 					'resend_code'     => __( 'Resend code', 'newspack-plugin' ),
 					'otp'             => __( 'Email me a one-time code instead', 'newspack-plugin' ),
-					'otp_title'       => __( 'Enter the code sent to your email.', 'newspack-plugin' ),
+					'otp_title'       => __( 'Enter the code sent to your email', 'newspack-plugin' ),
 					'forgot_password' => __( 'Forgot password', 'newspack-plugin' ),
 					'create_account'  => __( 'Create an account', 'newspack-plugin' ),
 					'register'        => __( 'Sign in to an existing account', 'newspack-plugin' ),
@@ -1954,7 +1954,7 @@ public static function render_third_party_auth() {
 		<div class="newspack-ui">
 			<button type="button" class="newspack-ui__button newspack-ui__button--wide newspack-ui__button--secondary newspack-ui__button--google-oauth">
 				<?php Newspack_UI_Icons::print_svg( 'google' ); ?>
-				<?php echo \esc_html__( 'Sign in with Google', 'newspack-plugin' ); ?>
+				<?php echo \esc_html__( 'Continue with Google', 'newspack-plugin' ); ?>
 			</button>
 			<div class="newspack-ui__word-divider">
 				<?php echo \esc_html__( 'Or', 'newspack-plugin' ); ?>
@@ -2092,6 +2092,9 @@ public static function process_auth_form() {
 				$authenticated = self::set_current_reader( $user->ID );
 				$payload['authenticated'] = \is_wp_error( $authenticated ) ? 0 : 1;
 				$payload['existing_user'] = \is_wp_error( $authenticated ) ? 0 : 1;
+				if ( ! \is_wp_error( $authenticated ) ) {
+					$payload['verified'] = self::is_reader_verified( $user );
+				}
 				$metadata['login_method'] = 'auth-form-password';
 				break;
 			case 'link':

src/blocks/reader-registration/block.json

@@ -19,7 +19,7 @@
 		},
 		"label": {
 			"type": "string",
-			"default": "Sign up",
+			"default": "Continue",
 			"required": true
 		},
 		"privacyLabel": {
@@ -52,14 +52,6 @@
 		"listsCheckboxes": {
 			"type": "object",
 			"default": {}
-		},
-		"signInLabel": {
-			"type": "string",
-			"default": "Sign in to an existing account"
-		},
-		"signedInLabel": {
-			"type": "string",
-			"default": "An account was already registered with this email. Please check your inbox for an authentication link."
 		}
 	},
 	"supports": {

src/blocks/reader-registration/edit.js

@@ -19,7 +19,6 @@ import { Icon, check } from '@wordpress/icons';
  * Internal dependencies
  */
 import './editor.scss';
-import { emailSend } from '../../../packages/icons';
 
 const getListCheckboxId = listId => {
 	return 'newspack-reader-registration-list-checkbox-' + listId;
@@ -28,7 +27,6 @@ const getListCheckboxId = listId => {
 const editedStateOptions = [
 	{ label: __( 'Initial', 'newspack-plugin' ), value: 'initial' },
 	{ label: __( 'Registration Success', 'newspack-plugin' ), value: 'registration' },
-	{ label: __( 'Login Success', 'newspack-plugin' ), value: 'login' },
 ];
 export default function ReaderRegistrationEdit( {
 	setAttributes,
@@ -42,8 +40,6 @@ export default function ReaderRegistrationEdit( {
 		displayListDescription,
 		hideSubscriptionInput,
 		newsletterLabel,
-		signInLabel,
-		signedInLabel,
 		lists,
 		listsCheckboxes,
 	},
@@ -292,7 +288,7 @@ export default function ReaderRegistrationEdit( {
 														__html: newspack_blocks.google_logo_svg,
 													} }
 												/>
-												{ __( 'Sign in with Google', 'newspack-plugin' ) }
+												{ __( 'Continue with Google', 'newspack-plugin' ) }
 											</button>
 											<div className="newspack-ui__word-divider">{ __( 'Or', 'newspack-plugin' ) }</div>
 										</div>
@@ -303,7 +299,7 @@ export default function ReaderRegistrationEdit( {
 											<button type="submit" className="newspack-ui__button newspack-ui__button--primary">
 												<RichText
 													onChange={ value => setAttributes( { label: value } ) }
-													placeholder={ __( 'Sign up', 'newspack-plugin' ) }
+													placeholder={ __( 'Continue', 'newspack-plugin' ) }
 													value={ label }
 													allowedFormats={ [] }
 													tagName="span"
@@ -314,21 +310,6 @@ export default function ReaderRegistrationEdit( {
 									</div>
 								</div>
 							</div>
-							<div className="newspack-registration__have-account">
-								<a
-									href="/my-account"
-									onClick={ ev => ev.preventDefault() }
-									className="newspack-ui__button newspack-ui__button--ghost"
-								>
-									<RichText
-										onChange={ value => setAttributes( { signInLabel: value } ) }
-										placeholder={ __( 'Sign in to an existing account', 'newspack-plugin' ) }
-										value={ signInLabel }
-										allowedFormats={ [] }
-										tagName="span"
-									/>
-								</a>
-							</div>
 							<div className="newspack-registration__help-text">
 								<RichText
 									onChange={ value => setAttributes( { privacyLabel: value } ) }
@@ -343,31 +324,14 @@ export default function ReaderRegistrationEdit( {
 				) }
 				{ editedState === 'registration' && (
 					<div className="newspack-registration newspack-ui">
-						<div className="newspack-ui__box newspack-ui__box--success newspack-ui__box--text-center">
+						<div className="newspack-ui__box newspack-ui__box--success newspack-ui__box--x-large newspack-ui__box--text-center">
 							<span className="newspack-ui__icon newspack-ui__icon--success">
 								<Icon icon={ check } />
 							</span>
 							<div { ...innerBlocksProps } />
 						</div>
 					</div>
 				) }
-				{ editedState === 'login' && (
-					<div className="newspack-registration newspack-ui">
-						<div className="newspack-ui__box newspack-ui__box--success newspack-ui__box--text-center">
-							<span className="newspack-ui__icon newspack-ui__icon--success">
-								<Icon icon={ emailSend } />
-							</span>
-							<RichText
-								align="center"
-								onChange={ value => setAttributes( { signedInLabel: value } ) }
-								placeholder={ __( 'Logged in message…', 'newspack-plugin' ) }
-								value={ signedInLabel }
-								allowedFormats={ [] }
-								tagName="p"
-							/>
-						</div>
-					</div>
-				) }
 			</div>
 		</>
 	);