fix: register and auth form tweaks (#1935)

* style: tweak mobile styles for registration and login forms * fix: improved messaging and front-end form validation * style: add margin-top to WC buttons; restore auth modal padding
Automattic · Aug 26, 2022 · 3b76d3f · 3b76d3f
1 parent 11e6917
commit 3b76d3f
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 15 deletions.
diff --git a/assets/blocks/reader-registration/style.scss b/assets/blocks/reader-registration/style.scss
@@ -70,7 +70,14 @@
 		}
 		[type='submit'] {
 			background-color: #d33;
-			margin-left: 0.4rem;
+			margin-top: 0.5rem;
+			width: 100%;
+
+			@media ( min-width: 782px ) {
+				margin-left: 0.4rem;
+				margin-top: 0;
+				width: auto;
+			}
 		}
 	}
 

diff --git a/assets/blocks/reader-registration/view.js b/assets/blocks/reader-registration/view.js
@@ -93,28 +93,35 @@ function domReady( callback ) {
 
 			form.addEventListener( 'submit', ev => {
 				ev.preventDefault();
+				form.startLoginFlow();
+
+				if ( ! form.npe?.value ) {
+					return form.endLoginFlow( 'Please enter a vaild email address.', 400 );
+				}
 
 				readerActivation
 					.getCaptchaToken()
 					.then( captchaToken => {
 						if ( ! captchaToken ) {
 							return;
 						}
-						const tokenField = document.createElement( 'input' );
-						tokenField.setAttribute( 'type', 'hidden' );
-						tokenField.setAttribute( 'name', 'captcha_token' );
+						let tokenField = form.captcha_token;
+						if ( ! tokenField ) {
+							tokenField = document.createElement( 'input' );
+							tokenField.setAttribute( 'type', 'hidden' );
+							tokenField.setAttribute( 'name', 'captcha_token' );
+							form.appendChild( tokenField );
+						}
 						tokenField.value = captchaToken;
-						form.appendChild( tokenField );
 					} )
 					.catch( e => {
 						form.endLoginFlow( e, 400 );
 					} )
 					.finally( () => {
 						const body = new FormData( form );
 						if ( ! body.has( 'npe' ) || ! body.get( 'npe' ) ) {
-							return;
+							return form.endFlow( 'Please enter a vaild email address.', 400 );
 						}
-						form.startLoginFlow();
 						fetch( form.getAttribute( 'action' ) || window.location.pathname, {
 							method: 'POST',
 							headers: {

diff --git a/assets/reader-activation/auth.js b/assets/reader-activation/auth.js
@@ -308,29 +308,40 @@ const convertFormDataToObject = ( formData, includedFields = [] ) =>
 			 */
 			form.addEventListener( 'submit', ev => {
 				ev.preventDefault();
+				form.startLoginFlow();
+
+				if ( ! form.npe?.value ) {
+					return form.endLoginFlow( 'Please enter a vaild email address.', 400 );
+				}
+
+				if ( 'pwd' === actionInput?.value && ! form.password?.value ) {
+					return form.endLoginFlow( 'Please enter a password.', 400 );
+				}
 
 				readerActivation
 					.getCaptchaToken()
 					.then( captchaToken => {
 						if ( ! captchaToken ) {
 							return;
 						}
-						const tokenField = document.createElement( 'input' );
-						tokenField.setAttribute( 'type', 'hidden' );
-						tokenField.setAttribute( 'name', 'captcha_token' );
+						let tokenField = form.captcha_token;
+						if ( ! tokenField ) {
+							tokenField = document.createElement( 'input' );
+							tokenField.setAttribute( 'type', 'hidden' );
+							tokenField.setAttribute( 'name', 'captcha_token' );
+							form.appendChild( tokenField );
+						}
 						tokenField.value = captchaToken;
-						form.appendChild( tokenField );
 					} )
 					.catch( e => {
 						form.endLoginFlow( e, 400 );
 					} )
 					.finally( () => {
 						const body = new FormData( ev.target );
 						if ( ! body.has( 'npe' ) || ! body.get( 'npe' ) ) {
-							return;
+							return form.endFlow( 'Please enter a vaild email address.', 400 );
 						}
 						readerActivation.setReaderEmail( body.get( 'npe' ) );
-						form.startLoginFlow();
 						fetch( form.getAttribute( 'action' ) || window.location.pathname, {
 							method: 'POST',
 							headers: {

diff --git a/assets/reader-activation/auth.scss b/assets/reader-activation/auth.scss
@@ -203,6 +203,10 @@
 			margin: 0 0 1em;
 			padding-right: 40px;
 
+			.newspack-reader__auth-form__inline & {
+				padding-right: 0;
+			}
+
 			@media screen and ( min-width: 600px ) {
 				padding-right: 0;
 			}

diff --git a/includes/class-reader-activation.php b/includes/class-reader-activation.php
@@ -1032,7 +1032,7 @@ public static function process_auth_form() {
 
 		$user = \get_user_by( 'email', $email );
 		if ( ( ! $user && 'register' !== $action ) || ( $user && ! self::is_user_reader( $user ) ) ) {
-			return self::send_auth_form_response( new \WP_Error( 'unauthorized', __( 'Invalid account.', 'newspack' ) ) );
+			return self::send_auth_form_response( new \WP_Error( 'unauthorized', __( "We couldn't find an account registered to this email address. Please confirm that you entered the correct email, or sign up for a new account.", 'newspack' ) ) );
 		}
 
 		$payload = [
@@ -1055,7 +1055,7 @@ public static function process_auth_form() {
 			case 'link':
 				$sent = Magic_Link::send_email( $user );
 				if ( true !== $sent ) {
-					return self::send_auth_form_response( new \WP_Error( 'unauthorized', __( 'Invalid account.', 'newspack' ) ) );
+					return self::send_auth_form_response( new \WP_Error( 'unauthorized', __( 'We encountered an error sending an authentication link. Please try again.', 'newspack' ) ) );
 				}
 				return self::send_auth_form_response( $payload, __( 'Please check your inbox for an authentication link.', 'newspack' ), $redirect );
 			case 'register':

diff --git a/includes/reader-revenue/my-account/style.scss b/includes/reader-revenue/my-account/style.scss
@@ -31,6 +31,10 @@
 		}
 	}
 
+	.woocommerce-Button {
+		margin-top: 8px;
+	}
+
 	.woocommerce-message {
 		padding: 28px;
 	}