feat(reader-activation): disable 3rd party login buttons initially (#…

…1806)
Automattic · Aug 10, 2022 · 1701b0c · 1701b0c
1 parent 42e53ce
commit 1701b0c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 deletions.
diff --git a/assets/reader-activation/auth.js b/assets/reader-activation/auth.js
@@ -28,14 +28,14 @@ function domReady( callback ) {
 /**
  * Converts FormData into an object.
  *
- * @param {FormData} formData    The form data to convert.
- * @param {Array}    ignoredKeys Keys to ignore.
+ * @param {FormData} formData       The form data to convert.
+ * @param {Array}    includedFields Form fields to include.
  *
  * @return {Object} The converted form data.
  */
-const convertFormDataToObject = ( formData, ignoredKeys = [] ) =>
+const convertFormDataToObject = ( formData, includedFields = [] ) =>
 	Array.from( formData.entries() ).reduce( ( acc, [ key, val ] ) => {
-		if ( ignoredKeys.includes( key ) ) {
+		if ( ! includedFields.includes( key ) ) {
 			return acc;
 		}
 		if ( key.indexOf( '[]' ) > -1 ) {
@@ -249,6 +249,10 @@ const convertFormDataToObject = ( formData, ignoredKeys = [] ) =>
 		/**
 		 * Third party auth.
 		 */
+		const loginsElements = document.querySelectorAll( '.newspack-reader__logins' );
+		[ ...loginsElements ].forEach( element => {
+			element.classList.remove( 'newspack-reader__logins--disabled' );
+		} );
 		const googleLoginElements = document.querySelectorAll( '.newspack-reader__logins__google' );
 		googleLoginElements.forEach( googleLoginElement => {
 			const googleLoginForm = googleLoginElement.closest( 'form' );
@@ -271,12 +275,7 @@ const convertFormDataToObject = ( formData, ignoredKeys = [] ) =>
 				}
 
 				const metadata = googleLoginForm
-					? convertFormDataToObject( new FormData( googleLoginForm ), [
-							'email',
-							'password',
-							'_wp_http_referer',
-							'newspack_reader_registration',
-					  ] )
+					? convertFormDataToObject( new FormData( googleLoginForm ), [ 'lists[]' ] )
 					: {};
 				metadata.current_page_url = window.location.href;
 				fetch( '/wp-json/newspack/v1/login/google' )

diff --git a/assets/reader-activation/auth.scss b/assets/reader-activation/auth.scss
@@ -311,13 +311,20 @@
 				}
 			}
 		}
+		&--disabled {
+			button {
+				opacity: 0.5;
+				pointer-events: none;
+			}
+		}
 		button {
 			display: flex;
 			justify-content: center;
 			align-items: center;
 			width: 100%;
 			background-color: wp-colors.$gray-100;
 			color: black;
+			transition: all 300ms;
 			span {
 				padding-left: 10px;
 			}

diff --git a/includes/class-reader-activation.php b/includes/class-reader-activation.php
@@ -787,12 +787,13 @@ public static function render_third_party_auth() {
 		if ( ! Google_OAuth::is_oauth_configured() ) {
 			return;
 		}
-		$class = function( ...$parts ) {
+		$class      = function( ...$parts ) {
 			array_unshift( $parts, 'logins' );
 			return self::get_element_class_name( $parts );
 		};
+		$classnames = implode( ' ', [ $class(), $class() . '--disabled' ] );
 		?>
-		<div class="<?php echo \esc_attr( $class() ); ?>">
+		<div class="<?php echo \esc_attr( $classnames ); ?>">
 			<div class="<?php echo \esc_attr( $class( 'separator' ) ); ?>">
 				<div></div>
 				<div>