Skip to content

Commit

Permalink
feat(ras-acc): add reader account creation and login improvements (#…
Browse files Browse the repository at this point in the history 
…1716)

This PR adds features and styles for the new reader activation and account creation flow.

Co-authored-by: Laurel <laurel.fulford@automattic.com>
Co-authored-by: Derrick Koo <dkoo@users.noreply.github.com>
  • Loading branch information
@chickenn00dle @laurelfulford @dkoo
3 people authored Nov 28, 2024
1 parent 85746b8 commit 4640cae
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 60 deletions.
13 changes: 10 additions & 3 deletions includes/class-newspack-newsletters-renderer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -852,17 +852,18 @@ function ( $block ) {
$social_wrapper_attrs = array(
'icon-size' => '24px',
'mode' => 'horizontal',
'padding' => '0',
'border-radius' => '999px',
'icon-padding' => '7px',
'icon-padding' => isset( $attrs['className'] ) && 'is-style-filled-primary-text' === $attrs['className'] ? '0px' : '7px',
'padding' => '0',
);
if ( isset( $attrs['align'] ) ) {
$social_wrapper_attrs['align'] = $attrs['align'];
} else {
$social_wrapper_attrs['align'] = 'left';
}

$markup = '<mj-social ' . self::array_to_attributes( $social_wrapper_attrs ) . '>';
foreach ( $inner_blocks as $link_block ) {
foreach ( $inner_blocks as $index => $link_block ) {
if ( isset( $link_block['attrs']['url'] ) ) {
$url = $link_block['attrs']['url'];
// Handle older version of the block, where innner blocks we named `core/social-link-<service>`.
Expand All @@ -875,8 +876,14 @@ function ( $block ) {
'src' => plugins_url( 'assets/' . $social_icon['icon'], __DIR__ ),
'background-color' => $social_icon['color'],
'css-class' => 'social-element',
'padding' => '8px',
);

if ( $index === 0 || $index === count( $inner_blocks ) - 1 ) {
$img_attrs['padding-left'] = $index === 0 ? '0' : '8px';
$img_attrs['padding-right'] = $index === 0 ? '8px' : '0';
}

$markup .= '<mj-social-element ' . self::array_to_attributes( $img_attrs ) . '/>';
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/blocks/subscribe/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ class="wp-block-newspack-newsletters-subscribe newspack-newsletters-subscribe <?
<?php echo $subscribed ? 'data-status="200"' : ''; ?>
>
<?php if ( ! $subscribed ) : ?>
<form id="<?php echo esc_attr( get_form_id() ); ?>">
<form id="<?php echo esc_attr( get_form_id() ); ?>" data-newspack-recaptcha="newspack_newsletter_signup">
<input type="hidden" name="<?php echo esc_attr( FORM_ACTION ); ?>" value="1" />
<?php
/**
Expand Down
86 changes: 31 additions & 55 deletions src/blocks/subscribe/view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ function domReady( callback ) {
}

domReady( function () {
const successEvent = new Event( 'newspack-newsletters-subscribe-success' );
document.querySelectorAll( '.newspack-newsletters-subscribe' ).forEach( container => {
const form = container.querySelector( 'form' );
if ( ! form ) {
Expand Down Expand Up @@ -57,6 +58,7 @@ domReady( function () {
messageNode.className = `message status-${ status }`;
if ( status === 200 ) {
container.replaceChild( responseContainer, form );
form.dispatchEvent( successEvent );
}
};
form.addEventListener( 'submit', ev => {
Expand All @@ -70,62 +72,36 @@ domReady( function () {
return form.endFlow( newspack_newsletters_subscribe_block.invalid_email, 400 );
}

const newspack_grecaptcha = window.newspack_grecaptcha || null;
const getCaptchaV3Token = newspack_grecaptcha
? newspack_grecaptcha?.getCaptchaV3Token
: () => new Promise( res => res( '' ) ); // Empty promise.

getCaptchaV3Token() // Get a token for reCAPTCHA v3, if needed.
.then( captchaToken => {
// If there's no token, we don't need to do anything.
if ( ! captchaToken ) {
return;
}
let tokenField = form[ 'g-recaptcha-response' ];
if ( ! tokenField ) {
tokenField = document.createElement( 'input' );
tokenField.setAttribute( 'type', 'hidden' );
tokenField.setAttribute( 'name', 'g-recaptcha-response' );
tokenField.setAttribute( 'autocomplete', 'off' );
form.appendChild( tokenField );
}
tokenField.value = captchaToken;
} )
.catch( e => {
form.endFlow( e, 400 );
} )
.finally( () => {
const body = new FormData( form );
if ( ! body.has( 'npe' ) || ! body.get( 'npe' ) ) {
return form.endFlow( newspack_newsletters_subscribe_block.invalid_email, 400 );
}
if ( nonce ) {
body.set( 'newspack_newsletters_subscribe', nonce );
}
emailInput.setAttribute( 'disabled', 'true' );
submit.setAttribute( 'disabled', 'true' );
const body = new FormData( form );
if ( ! body.has( 'npe' ) || ! body.get( 'npe' ) ) {
return form.endFlow( newspack_newsletters_subscribe_block.invalid_email, 400 );
}
if ( nonce ) {
body.set( 'newspack_newsletters_subscribe', nonce );
}
emailInput.setAttribute( 'disabled', 'true' );
submit.setAttribute( 'disabled', 'true' );

fetch( form.getAttribute( 'action' ) || window.location.pathname, {
method: 'POST',
headers: {
Accept: 'application/json',
},
body,
} ).then( res => {
res
.json()
.then(
( {
message,
newspack_newsletters_subscribed: wasSubscribed,
newspack_newsletters_subscribe,
} ) => {
nonce = newspack_newsletters_subscribe;
form.endFlow( message, res.status, wasSubscribed );
}
);
} );
} );
fetch( form.getAttribute( 'action' ) || window.location.pathname, {
method: 'POST',
headers: {
Accept: 'application/json',
},
body,
} ).then( res => {
res
.json()
.then(
( {
message,
newspack_newsletters_subscribed: wasSubscribed,
newspack_newsletters_subscribe,
} ) => {
nonce = newspack_newsletters_subscribe;
form.endFlow( message, res.status, wasSubscribed );
}
);
} );
} );
} );
} );
2 changes: 1 addition & 1 deletion tests/test-renderer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -345,7 +345,7 @@ public function test_render_social_icons() {
'innerHTML' => '<div></div>',
]
),
'<mj-section padding="0"><mj-column padding="12px" width="100%"><mj-social icon-size="24px" mode="horizontal" padding="0" border-radius="999px" icon-padding="7px" align="left"><mj-social-element href="https://x.com/hi" src="' . $plugin_path . 'assets/white-x.png" background-color="#000000" css-class="social-element"/></mj-social></mj-column></mj-section>',
'<mj-section padding="0"><mj-column padding="12px" width="100%"><mj-social icon-size="24px" mode="horizontal" border-radius="999px" icon-padding="7px" padding="0" align="left"><mj-social-element href="https://x.com/hi" src="' . $plugin_path . 'assets/white-x.png" background-color="#000000" css-class="social-element" padding="8px" padding-left="0" padding-right="8px"/></mj-social></mj-column></mj-section>',
'Renders social icons'
);
}
Expand Down

0 comments on commit 4640cae

Please sign in to comment.