feat(newspack-ui): integrate with sign in/sign up

[miguelpeixe]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR implements the Newspack UI to the Sign in/Sign up modal and introduces changes to allow the modal integration with other components from this project.

The modal logic has been decoupled from the authentication form logic, allowing the modal management to be more easily extended to support callbacks and other customizations.

The new modal logic exposes an openAuthModal( config ) to the reader activation library, which can be called by other components that can run a callback (another modal).

The configuration allows for the following customizations:

• callback(message, data): function called after successful login
• initialState: whether to open auth modal as register or signin
• skipSuccess: whether to skip the final "success" state after login, close the modal and execute the callback immediately
• labels: object containing custom labels for the auth form (modal title and button labels)
• content: custom HTML to appear in the auth modal before the form

Asana tasks:

• 1205234045751551-as-1205668937699522/f
• 1205234045751551-as-1206405274735562/f
• 1205234045751551-as-1205668937699526/f

Sign In

Password

OTP

Create an account

Successful sign in

Successful registration

Example of the openAuthModal( config ) for the modal checkout

The example below is drafted in Automattic/newspack-blocks#1647

How to test the changes in this Pull Request:

1. Check out this branch and feat(modal-checkout): pre-modal authentication newspack-blocks#1647
2. Confirm you have RAS enabled
3. On a fresh session, click on "Sign in" and confirm the modal renders as in the image above
4. Sign in with an existing reader account that has a configured password
5. Confirm you are prompted to enter the password and can successfully login
6. Click "Continue" and confirm you are redirected to the "My Account" page
7. On another fresh session click to Sign In and attempt to login with a new email
8. Confirm you get an error and clicking the "Create an account" link in the error message changes the form state
9. Register with the new email, confirm you're signed in and get the "Successful registration" as represented in the image above
10. Click to "Set a password" and confirm the email is sent and you are redirected to the My Account page with a notification
11. Before setting a password, start another fresh session and sign in with the newly registered email
12. Confirm you're prompted the enter the OTP
13. Enter the OTP and confirm you sign in
14. Set a password for the account, start a fresh session and sign in
15. Confirm you're now prompted to set the password instead of an OTP

`openAuthModal( config )``

1. Make sure you have feat(modal-checkout): pre-modal authentication newspack-blocks#1647
2. On a fresh session, click to Donate using the donate block
3. Confirm you are prompted to authenticate
4. Authenticate and confirm the modal checkout appears
5. Close the modal and click to donate again
6. Confirm you're no longer prompted to authenticate and the modal checkout renders
7. Repeat the same steps using the "Checkout Button" block and confirm it behaves the same

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[adekbadek]

Approving despite pushing my own changes since these are only small CSS fixes, refactoring, and removing some vestiges of AMP support.

[matticbot]

🎉 This PR is included in version 3.0.0-epic-ras-acc.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 3.1.0-epic-ras-acc.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 3.2.0-epic-ras-acc.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 3.6.0-epic-ras-acc.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 3.9.0-epic-ras-acc.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 4.1.0-epic-ras-acc.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 4.2.0-epic-ras-acc.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 4.4.0-epic-ras-acc.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀