Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: register and auth form tweaks #1935

Merged
merged 3 commits into from
Aug 26, 2022
Merged

fix: register and auth form tweaks #1935

merged 3 commits into from
Aug 26, 2022

Conversation

dkoo
Copy link
Contributor

@dkoo dkoo commented Aug 25, 2022 •
edited
Loading

All Submissions:

Changes proposed in this Pull Request:

Tweaks some mobile form styles and front-end behavior for the Register and Login forms. There's a corresponding Newsletters PR with similar fixes, too. The Blocks repo doesn't need these fixes despite also using reCAPTCHA because it uses a different mechanism to capture the captcha token and send it to the server for verification, and because the Donate block's styles are already mobile-friendly.

How to test the changes in this Pull Request:

Register block mobile styles

  1. View a Register block in a mobile viewport. Confirm that the "Sign Up" button appears below the email address field, and that both email address field and Sign Up button appear at full-width:

Screen Shot 2022-08-25 at 5 14 15 PM

  1. View at a desktop viewport and confirm that the styles still look appropriate here too:

Screen Shot 2022-08-25 at 5 14 51 PM

Inline auth form mobile styles

  1. Go to the My Account page while not logged in. View at a mobile viewport and confirm that the "I don't have an account" link aligns flush-right with the edge of the content:

Screen Shot 2022-08-25 at 5 16 14 PM

  1. Open the auth modal by clicking on "Sign In" button from the nav header, or by clicking the "Already have an account? Sign in" link from a Register block. Confirm that the "I don't have an account" link is offset slightly, allowing it to be fully visible alongside the X close button:

Screen Shot 2022-08-25 at 5 17 02 PM

Front-end form validation

This helps us avoid hitting the server at all if we're missing the required fields, and gives more helpful reader-facing feedback if they submit without filling out the form.

  1. For both the Register and auth forms, try to submit the form without entering an email address and confirm that you get an error message stating "Please enter a vaild email address" no matter how many times you try to submit the empty field.
  2. For the auth form, request the magic link with a valid email address and confirm that it still works.
  3. For the auth form, try to submit a password form with an email address but no password and confirm that you get an error message stating "Please enter a password".

reCAPTCHA token field fix

Currently, we generate a reCAPTCHA token and append it to the form as a hidden field each time the form is submitted. This means if the form submission fails for whatever reason, a new field will be added for each submission attempt. This PR fixes things so that a maximum of one reCAPTCHA token field will be created, and its value simply updated for each submission attempt.

  1. On master, for both the Register and auth forms, try to submit the form without any fields filled out. Inspect the form in the DOM and observe that for each failed form submission, a new hidden input with name captcha_token is appended to the form.
  2. Check out this branch and repeat. This time confirm that only one input is created on the first submission attempt, and its value is updated for each attempt thereafter.

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?

@dkoo dkoo added [Status] Needs Review The issue or pull request needs to be reviewed enhancement bug labels Aug 25, 2022
@dkoo dkoo requested a review from a team as a code owner August 25, 2022 23:23
@dkoo dkoo self-assigned this Aug 25, 2022
@dkoo dkoo changed the title Fix/auth register form tweaks fix: register and auth form tweaks Aug 25, 2022
@github-actions github-actions bot added [Status] Approved The pull request has been reviewed and is ready to merge and removed [Status] Needs Review The issue or pull request needs to be reviewed labels Aug 26, 2022
@dkoo dkoo merged commit 3b76d3f into master Aug 26, 2022
@dkoo dkoo deleted the fix/auth-register-form-tweaks branch August 26, 2022 15:25
matticbot pushed a commit that referenced this pull request Aug 26, 2022
@semantic-release-bot
chore(release): 1.90.0-alpha.1 [skip ci]
d8664a4 
# [1.90.0-alpha.1](v1.89.1...v1.90.0-alpha.1) (2022-08-26)

### Bug Fixes

* **google-oauth:** missing email message ([#1925](#1925)) ([93260a3](93260a3))
* horizontal scrollbar on auth modal ([#1919](#1919)) ([08a7bb6](08a7bb6))
* if logging in from an overlay prompt, dismiss the prompt after login ([#1927](#1927)) ([999437d](999437d))
* post-logout messaging ([#1934](#1934)) ([11e6917](11e6917))
* register and auth form tweaks ([#1935](#1935)) ([3b76d3f](3b76d3f))
* **registration-block:** column layout in editor ([#1920](#1920)) ([f1ae0c5](f1ae0c5))
* show My Account messages using custom messaging instead of WC messaging ([#1932](#1932)) ([c9802fe](c9802fe))
* **stripe:** handle WC-originating Stripe transactions ([674b278](674b278))

### Features

* disable mailchimp-for-woocommerce plugin campaign tracking cookie ([#618](#618)) ([99310cb](99310cb))
* for donations via a prompt, add prompt ID to event label ([#1928](#1928)) ([4704cfd](4704cfd))
* honeypot trap for auth and registration forms ([#1896](#1896)) ([d5d713c](d5d713c))
* move have account text below SSO and adjust font-size ([#1917](#1917)) ([869913d](869913d))
* new option for minimum donation amount ([#1895](#1895)) ([0b9618b](0b9618b))
* reader account deletion and ESP sync options ([#1884](#1884)) ([b9fd209](b9fd209))
* **reader-activation:** check lists in auth modal by default ([#1933](#1933)) ([77bce1d](77bce1d))
* set from details for password reset emails ([#1926](#1926)) ([8b8607a](8b8607a))
* **stripe:** lookup stripe customer ID on registration ([#1860](#1860)) ([490cd97](490cd97)), closes [#1853](#1853)
* subscription metadata for ESP; Stripe webhook creation tweak ([#1859](#1859)) ([e094b15](e094b15))
* title and description for registration block ([#1924](#1924)) ([1c9fba6](1c9fba6))
* use reCAPTCHA to secure all Reader Activation-related forms ([#1910](#1910)) ([cc8ef79](cc8ef79))
@matticbot
Copy link
Contributor

🎉 This PR is included in version 1.90.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

matticbot pushed a commit that referenced this pull request Sep 14, 2022
@semantic-release-bot
chore(release): 1.90.0 [skip ci]
57c7066 
# [1.90.0](v1.89.1...v1.90.0) (2022-09-14)

### Bug Fixes

* **ac-master-list:** handle empty lists ([cfabb5a](cfabb5a))
* add check to only change theme if not empty ([#1978](#1978)) ([b9835f1](b9835f1))
* allow Register block to be edited even if RAS is not enabled ([#1962](#1962)) ([649f47b](649f47b))
* **emails:** don't create post if pluggable functions are not available ([#1979](#1979)) ([d8aac4f](d8aac4f))
* **emails:** editor message ([62dec52](62dec52))
* **google-oauth:** missing email message ([#1925](#1925)) ([93260a3](93260a3))
* horizontal scrollbar on auth modal ([#1919](#1919)) ([08a7bb6](08a7bb6))
* if logging in from an overlay prompt, dismiss the prompt after login ([#1927](#1927)) ([999437d](999437d))
* localized reader auth error messages ([#1948](#1948)) ([fb58a7f](fb58a7f))
* post-logout messaging ([#1934](#1934)) ([11e6917](11e6917))
* prefix WC My Account actions so we can decide which hooks to support ([#1963](#1963)) ([0fa8c0a](0fa8c0a))
* **reader-activation:** send payment contact metadata only if RA is enabled ([#1957](#1957)) ([3e14777](3e14777))
* register and auth form tweaks ([#1935](#1935)) ([3b76d3f](3b76d3f))
* **registration-block:** allow any markup in the success state ([977e77a](977e77a))
* **registration-block:** column layout in editor ([#1920](#1920)) ([f1ae0c5](f1ae0c5))
* **registration-block:** fix empty success state ([272aee5](272aee5))
* show My Account messages using custom messaging instead of WC messaging ([#1932](#1932)) ([c9802fe](c9802fe))
* **stripe:** handle WC-originating Stripe transactions ([674b278](674b278))
* **WooCommerce:** error notice text color ([#1954](#1954)) ([2e4b95f](2e4b95f))

### Features

* **ac-metadata:** send SSO provider name as "NP_Connected Account" field ([56b6597](56b6597))
* **ac-metadata:** send Stripe customer LTV as "NP_Total Paid" field ([5f6da59](5f6da59))
* after account deletion message ([2547b76](2547b76))
* **analytics:** prevent sending NTG newsletter event if subscribing to master list ([#1946](#1946)) ([806a8b0](806a8b0))
* custom messaging for reader without password ([#1965](#1965)) ([a584b59](a584b59))
* disable mailchimp-for-woocommerce plugin campaign tracking cookie ([#618](#618)) ([99310cb](99310cb))
* for donations via a prompt, add prompt ID to event label ([#1928](#1928)) ([4704cfd](4704cfd))
* give each registration form a unique ID ([#1953](#1953)) ([29fb515](29fb515))
* **google-sitekit:** prevent excluding logged-in users from GA if RA is enabled ([#1960](#1960)) ([3b18bcc](3b18bcc))
* honeypot trap for auth and registration forms ([#1896](#1896)) ([d5d713c](d5d713c))
* move have account text below SSO and adjust font-size ([#1917](#1917)) ([869913d](869913d))
* new option for minimum donation amount ([#1895](#1895)) ([0b9618b](0b9618b))
* reader account deletion and ESP sync options ([#1884](#1884)) ([b9fd209](b9fd209))
* **reader-activation:** check lists in auth modal by default ([#1933](#1933)) ([77bce1d](77bce1d))
* **reader-activation:** customizable account deletion, password reset emails ([#1938](#1938)) ([c121e5c](c121e5c))
* **reader-activation:** customizable verification email ([#1929](#1929)) ([d293701](d293701))
* **reader-activation:** handle global auth success in registration block ([debf5d2](debf5d2))
* **reader-activation:** improve password reset flow ([a05a9b6](a05a9b6))
* **registration-block:** hidden input for subscription ([#1949](#1949)) ([fc4f4d5](fc4f4d5))
* reorganise reader registration header section ([#1967](#1967)) ([f3f54e1](f3f54e1))
* set from details for password reset emails ([#1926](#1926)) ([8b8607a](8b8607a))
* **stripe:** lookup stripe customer ID on registration ([#1860](#1860)) ([490cd97](490cd97)), closes [#1853](#1853)
* subscription metadata for ESP; Stripe webhook creation tweak ([#1859](#1859)) ([e094b15](e094b15))
* title and description for registration block ([#1924](#1924)) ([1c9fba6](1c9fba6))
* update billing portal copy ([8040b80](8040b80))
* update reader-facing language on auth fail ([#1974](#1974)) ([a05ca37](a05ca37))
* update woocommerce account message/notice ([#1956](#1956)) ([db18b95](db18b95))
* use reCAPTCHA to secure all Reader Activation-related forms ([#1910](#1910)) ([cc8ef79](cc8ef79))
* use universal "from" email, customizable magic link email ([#1937](#1937)) ([3b269aa](3b269aa))
* Woo sync to ActiveCampaign ([#1968](#1968)) ([630b24e](630b24e))
@matticbot
Copy link
Contributor

🎉 This PR is included in version 1.90.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@adekbadek adekbadek adekbadek approved these changes

Assignees

@dkoo dkoo

Labels
bug enhancement released on @alpha released [Status] Approved The pull request has been reviewed and is ready to merge
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@dkoo @matticbot @adekbadek