diff --git a/src/reader-activation-auth/auth-form.js b/src/reader-activation-auth/auth-form.js index b00d8d75d6..5807124da6 100644 --- a/src/reader-activation-auth/auth-form.js +++ b/src/reader-activation-auth/auth-form.js @@ -67,6 +67,7 @@ window.newspackRAS.push( function ( readerActivation ) { if ( isError ) { messageContentElement.classList.remove( 'newspack-ui__helper-text' ); messageContentElement.classList.add( 'newspack-ui__inline-error' ); + form.style.opacity = 1; } else { messageContentElement.classList.remove( 'newspack-ui__inline-error' ); messageContentElement.classList.add( 'newspack-ui__helper-text' ); @@ -272,7 +273,10 @@ window.newspackRAS.push( function ( readerActivation ) { form.endLoginFlow = ( message = null, status = 500, data = null ) => { container.setAttribute( 'data-form-status', status ); - form.style.opacity = 1; + // Only reset opacity if modal should close on success. + if ( container.config?.closeOnSuccess ) { + form.style.opacity = 1; + } submitButtons.forEach( button => { button.disabled = false; } ); @@ -383,6 +387,7 @@ window.newspackRAS.push( function ( readerActivation ) { url.searchParams.set( 'checkout', 1 ); body.set( 'redirect_url', url.toString() ); } + if ( 'otp' === action ) { readerActivation .authenticateOTP( body.get( 'otp_code' ) ) @@ -418,6 +423,9 @@ window.newspackRAS.push( function ( readerActivation ) { readerActivation.setOTPTimer(); handleOTPTimer(); } + if ( data.action === 'otp' || data.action === 'pwd' ) { + form.style.opacity = 1; + } } else { form.endLoginFlow( message, status, data ); } @@ -426,7 +434,14 @@ window.newspackRAS.push( function ( readerActivation ) { form.endLoginFlow(); } ) .finally( () => { - form.style.opacity = 1; + const status = res.status; + // Check if modal should close on success. If no, reset opacity to 1. + // If yes, only reset opacity to 1 if the status is not successful. + if ( container.config?.closeOnSuccess ) { + form.style.opacity = 1; + } else if ( status !== 200 && ! container.config?.closeOnSuccess ) { + form.style.opacity = 1; + } submitButtons.forEach( button => { button.disabled = false; } ); diff --git a/src/reader-activation-auth/auth-modal.js b/src/reader-activation-auth/auth-modal.js index a4c253ddb5..44b4626cad 100644 --- a/src/reader-activation-auth/auth-modal.js +++ b/src/reader-activation-auth/auth-modal.js @@ -96,7 +96,9 @@ export function openAuthModal( config = {} ) { container.config = config; container.authCallback = ( message, data ) => { - close( false ); + if ( config?.closeOnSuccess ) { + close( false ); + } if ( config.onSuccess && typeof config.onSuccess === 'function' ) { config.onSuccess( message, data ); } diff --git a/src/reader-activation-auth/index.js b/src/reader-activation-auth/index.js index 12a9f65c61..27ef9f1d00 100644 --- a/src/reader-activation-auth/index.js +++ b/src/reader-activation-auth/index.js @@ -72,6 +72,7 @@ window.newspackRAS.push( readerActivation => { onSuccess: callback, onError: callback, trigger: modalTrigger, + closeOnSuccess: true, } ); } diff --git a/src/reader-activation/index.js b/src/reader-activation/index.js index a1552a3481..9bb8f2831e 100644 --- a/src/reader-activation/index.js +++ b/src/reader-activation/index.js @@ -162,6 +162,7 @@ export function openAuthModal( config = {} ) { }, content: null, trigger: null, + closeOnSuccess: true, }, ...config, };