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.

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

[WooCommerce] Fix inconsistent social login screen when email matches an existing account #87073

Merged
merged 7 commits into from
Feb 8, 2024

Conversation

chihsuan
Copy link
Member

@chihsuan chihsuan commented Feb 1, 2024

Closes #86885

Proposed Changes

  • Fix button loading style
  • Fix reset password link
  • Do not display Gutenboarding Logo for Woo
  • Update Woo login screen style

Testing Instructions

  1. Set up local Woo Start environment https://github.com/woocommerce/woocommerce-start-dev-env/tree/trunk to test social login.
  2. Create a WP.com account with Gmail or disconnect Google from your existing WP.com account Please use non-a8c account.
  3. Log out WP.com
  4. Go to https://woo.com/sso?next=%2F
  5. Continue with Google
  6. Observe that it shows You already have a WordPress.com account with this email address. Add your password to log in or create a new account.
  7. Observe that it shows the "Check your email" screen.
  8. Click on the reset password link
  9. Confirm it shows the Woo lost password screen

Screenshot 2024-02-01 at 13 53 09

Screenshot 2024-02-01 at 13 48 32

Pre-merge Checklist

  • Has the general commit checklist been followed? (PCYsg-hS-p2)
  • https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md for your changes?
  • Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
  • Have you checked for TypeScript, React or other console errors?
  • Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
  • Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

Copy link

github-actions bot commented Feb 1, 2024

@matticbot
Copy link
Contributor

matticbot commented Feb 1, 2024

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~14867 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-login               +16467 B  (+1.2%)    +4897 B  (+1.2%)
entry-stepper              -1627 B  (-0.1%)     -297 B  (-0.0%)
entry-subscriptions        -1495 B  (-0.1%)     +916 B  (+0.2%)
entry-main                 -1086 B  (-0.1%)      -73 B  (-0.0%)
entry-domains-landing        -96 B  (-0.0%)     -114 B  (-0.1%)
entry-browsehappy            -96 B  (-0.1%)     -114 B  (-0.3%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~43191 bytes removed 📉 [gzipped])

name                               parsed_size           gzip_size
site-purchases                         +1649 B  (+0.1%)    +2431 B  (+0.6%)
purchases                              +1391 B  (+0.1%)    +2209 B  (+0.4%)
security                                +770 B  (+0.1%)     +163 B  (+0.1%)
help                                    +593 B  (+0.1%)     +207 B  (+0.1%)
plugins                                 +568 B  (+0.0%)    +2360 B  (+0.4%)
signup                                  +564 B  (+0.2%)      -95 B  (-0.1%)
settings-podcast                        -560 B  (-0.1%)    -2085 B  (-1.4%)
jetpack-cloud-plugin-management         +516 B  (+0.0%)    +1722 B  (+0.4%)
settings-security                       +507 B  (+0.1%)     -778 B  (-0.6%)
site-blocks                             +500 B  (+0.1%)     -431 B  (-0.2%)
link-in-bio-tld-flow                    +462 B  (+0.0%)     -606 B  (-0.2%)
update-design-flow                      +450 B  (+0.0%)    -1062 B  (-0.3%)
settings-discussion                     +439 B  (+0.1%)     +495 B  (+0.4%)
jetpack-cloud-settings                  +429 B  (+0.1%)    +1046 B  (+0.6%)
stats                                   +409 B  (+0.0%)    +1042 B  (+0.4%)
woocommerce                             +405 B  (+0.2%)     -178 B  (-0.2%)
subscribers                             +404 B  (+0.1%)     +421 B  (+0.2%)
privacy                                 +397 B  (+0.1%)     -573 B  (-0.3%)
me                                      +397 B  (+0.1%)     -546 B  (-0.3%)
developer                               +397 B  (+0.1%)     -536 B  (-0.3%)
account-close                           +397 B  (+0.1%)     -601 B  (-0.3%)
domains                                 +386 B  (+0.0%)    +2754 B  (+0.5%)
plans                                   +353 B  (+0.0%)     +403 B  (+0.1%)
jetpack-cloud                           +345 B  (+0.1%)     +268 B  (+0.2%)
marketing                               +330 B  (+0.0%)     +502 B  (+0.3%)
devdocs                                 -302 B  (-0.2%)     -731 B  (-1.2%)
jetpack-connect                         +290 B  (+0.0%)    -1065 B  (-0.3%)
home                                    -288 B  (-0.0%)    -1288 B  (-0.3%)
settings-writing                        -281 B  (-0.1%)    -2866 B  (-1.8%)
jetpack-cloud-agency-signup             +280 B  (+0.3%)     +311 B  (+1.0%)
site-monitoring                         +277 B  (+0.1%)     +431 B  (+0.3%)
google-my-business                      +277 B  (+0.1%)     +215 B  (+0.2%)
backup                                  +275 B  (+0.0%)     +469 B  (+0.1%)
scan                                    +268 B  (+0.0%)     -203 B  (-0.1%)
settings-reading                        +263 B  (+0.1%)     -344 B  (-0.3%)
settings-jetpack                        +261 B  (+0.0%)      +53 B  (+0.0%)
email                                   +259 B  (+0.0%)     +416 B  (+0.2%)
settings                                -254 B  (-0.0%)    -1027 B  (-0.5%)
jetpack-cloud-agency-dashboard          +253 B  (+0.0%)    +1248 B  (+0.4%)
jetpack-cloud-pricing                   +233 B  (+0.0%)     -191 B  (-0.1%)
jetpack-cloud-overview                  +233 B  (+0.1%)     -202 B  (-0.2%)
jetpack-cloud-features-comparison       +233 B  (+0.0%)     -191 B  (-0.1%)
import                                  +233 B  (+0.1%)     -182 B  (-0.1%)
concierge                               +233 B  (+0.1%)     -174 B  (-0.1%)
hosting                                 +213 B  (+0.0%)     +479 B  (+0.2%)
import-flow                             -212 B  (-0.0%)     +686 B  (+0.1%)
pages                                   +199 B  (+0.0%)     +687 B  (+0.5%)
jetpack-app                             +196 B  (+0.0%)     -243 B  (-0.2%)
jetpack-social                          +179 B  (+0.0%)     -225 B  (-0.2%)
videopress-flow                         -169 B  (-0.0%)     -539 B  (-0.3%)
sensei-flow                             -169 B  (-0.0%)     -545 B  (-0.3%)
podcasts-flow                           -169 B  (-0.0%)     -539 B  (-0.4%)
copy-site-flow                          -169 B  (-0.0%)     -543 B  (-0.3%)
comments                                +165 B  (+0.0%)     -257 B  (-0.1%)
hundred-year-plan                       -162 B  (-0.5%)      -33 B  (-0.3%)
settings-performance                    +154 B  (+0.0%)     +769 B  (+0.5%)
themes                                  +152 B  (+0.0%)     +666 B  (+0.2%)
settings-newsletter                     -150 B  (-0.0%)    -1543 B  (-1.2%)
woocommerce-installation                +149 B  (+0.1%)     -223 B  (-0.2%)
migrate                                 +149 B  (+0.1%)     -192 B  (-0.2%)
jetpack-search                          +149 B  (+0.0%)     -227 B  (-0.1%)
github-deployments                      +149 B  (+0.1%)     -223 B  (-0.2%)
export                                  +149 B  (+0.1%)     -223 B  (-0.3%)
customize                               +149 B  (+0.1%)     -223 B  (-0.3%)
add-ons                                 +149 B  (+0.1%)     -223 B  (-0.2%)
checkout                                +143 B  (+0.0%)     +803 B  (+0.2%)
people                                  +139 B  (+0.0%)    -1624 B  (-0.9%)
media                                   -132 B  (-0.0%)     +339 B  (+0.1%)
sites-dashboard                         +130 B  (+0.0%)      +71 B  (+0.0%)
earn                                    +128 B  (+0.0%)    +1745 B  (+0.8%)
jetpack-cloud-manage-pricing            -112 B  (-0.0%)    -1085 B  (-0.9%)
promote-post-i2                         +111 B  (+0.0%)     -576 B  (-0.5%)
activity                                 +99 B  (+0.0%)     -157 B  (-0.1%)
gutenberg-editor                         +94 B  (+0.0%)     -226 B  (-0.1%)
reader                                   +91 B  (+0.0%)     +232 B  (+0.1%)
accept-invite                            +84 B  (+0.0%)      +44 B  (+0.1%)
tailored-ecommerce-flow                  -81 B  (-0.8%)      -26 B  (-0.8%)
start-writing-flow                       -81 B  (-0.4%)      -23 B  (-0.5%)
reblogging-flow                          -81 B  (-1.0%)      -22 B  (-0.8%)
newsletter-flow                          -81 B  (-0.5%)      -20 B  (-0.4%)
link-in-bio-flow                         -81 B  (-0.5%)      -21 B  (-0.5%)
design-first-flow                        -81 B  (-0.4%)      -21 B  (-0.4%)
theme                                    -74 B  (-0.0%)     -906 B  (-0.4%)
purchase-product                         +66 B  (+0.0%)      +32 B  (+0.1%)
with-theme-assembler-flow                +55 B  (+0.1%)      +15 B  (+0.2%)
update-options-flow                      +55 B  (+0.2%)      +14 B  (+0.3%)
site-setup-flow                          +55 B  (+0.1%)       +7 B  (+0.1%)
free-post-setup-flow                     +55 B  (+0.2%)      +13 B  (+0.3%)
free-flow                                +55 B  (+0.1%)      +13 B  (+0.2%)
assembler-first-flow                     +55 B  (+0.1%)      +27 B  (+0.2%)
ai-assembler-flow                        +55 B  (+0.1%)       +9 B  (+0.1%)
marketplace                              -53 B  (-0.0%)    -1917 B  (-0.6%)
notification-settings                    +52 B  (+0.0%)     -397 B  (-0.2%)
preview                                  +41 B  (+0.0%)     -266 B  (-0.3%)
jetpack-cloud-partner-portal             -41 B  (-0.0%)    -1035 B  (-0.4%)
posts-custom                             +30 B  (+0.0%)     +624 B  (+0.3%)
posts                                    +30 B  (+0.0%)     +624 B  (+0.3%)
account                                  +17 B  (+0.0%)     +520 B  (+0.2%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~50411 bytes removed 📉 [gzipped])

name                                                                              parsed_size            gzip_size
async-load-calypso-blocks-login-lost-password-form                                   -15601 B  (-86.5%)    -5558 B  (-81.9%)
async-load-design-blocks                                                               -451 B   (-0.0%)    -2343 B   (-0.4%)
async-load-calypso-blocks-editor-checkout-modal                                        +373 B   (+0.0%)    +1702 B   (+0.5%)
async-load-calypso-components-web-preview-component                                    -313 B   (-0.1%)     -237 B   (-0.2%)
async-load-store-app-store-stats                                                       +294 B   (+0.1%)    +1855 B   (+1.6%)
async-load-calypso-my-sites-checkout-modal                                             -273 B   (-0.0%)    +1731 B   (+0.5%)
async-load-calypso-post-editor-editor-media-modal                                      -271 B   (-0.0%)     -804 B   (-0.2%)
async-load-store-app-store-stats-listview                                              +196 B   (+0.1%)     +896 B   (+1.1%)
async-load-purchase-modal-wrapper                                                      -196 B   (-0.0%)     -799 B   (-0.6%)
async-load-calypso-blocks-jitm-templates-modal                                         -196 B   (-1.1%)     -284 B   (-4.0%)
async-load-signup-steps-design-picker                                                  +180 B   (+0.3%)      +67 B   (+0.4%)
async-load-calypso-reader-sidebar                                                      -134 B   (-0.1%)      -17 B   (-0.1%)
async-load-calypso-my-sites-stats-summary                                              -134 B   (-0.2%)      -18 B   (-0.1%)
async-load-calypso-my-sites-current-site-notice                                        -134 B   (-0.2%)      -18 B   (-0.1%)
async-load-calypso-blocks-jitm-templates-sidebar-banner                                -134 B   (-0.3%)      -18 B   (-0.1%)
async-load-calypso-blocks-jitm-templates-notice                                        -134 B   (-0.3%)      -17 B   (-0.1%)
async-load-calypso-blocks-jitm-templates-default                                       -134 B   (-0.3%)      -18 B   (-0.1%)
async-load-design-wordpress-components-gallery                                         +129 B   (+0.0%)     -295 B   (-0.1%)
async-load-calypso-components-jetpack-portal-nav                                       +128 B   (+0.2%)     +773 B   (+4.4%)
async-load-signup-steps-domains                                                        +111 B   (+0.0%)      -88 B   (-0.1%)
async-load-calypso-my-sites-stats-stats-post-detail                                    -108 B   (-0.3%)      -40 B   (-0.4%)
async-load-calypso-my-sites-site-settings-seo-settings-form                            -108 B   (-0.0%)      -40 B   (-0.1%)
async-load-calypso-blocks-jitm                                                         -108 B   (-0.8%)      -24 B   (-0.5%)
async-load-calypso-lib-account-settings-helper                                         +101 B   (+0.1%)     +407 B   (+0.8%)
async-load-design-playground                                                           -100 B   (-0.0%)     +253 B   (+0.1%)
async-load-signup-steps-theme-selection                                                 -98 B   (-0.0%)     -632 B   (-0.5%)
async-load-signup-steps-woocommerce-install-step-business-info                          +93 B   (+0.1%)     +266 B   (+1.0%)
async-load-signup-steps-plans-theme-preselected                                         +93 B   (+0.0%)     -225 B   (-0.2%)
async-load-signup-steps-plans                                                           +93 B   (+0.0%)     -225 B   (-0.2%)
async-load-signup-steps-social-profiles                                                 +84 B   (+0.4%)      +40 B   (+0.6%)
async-load-signup-steps-site-options                                                    +84 B   (+0.2%)      +36 B   (+0.4%)
async-load-signup-steps-site                                                            +84 B   (+0.2%)      +34 B   (+0.3%)
async-load-signup-steps-p2-site                                                         +84 B   (+0.2%)      +39 B   (+0.3%)
async-load-calypso-layout-community-translator                                          +84 B   (+0.3%)      +41 B   (+0.5%)
async-load-automattic-help-center                                                       -76 B   (-0.0%)     -220 B   (-0.1%)
async-load-signup-steps-user                                                            +71 B   (+0.1%)      +27 B   (+0.1%)
async-load-calypso-layout-masterbar-checkout-tsx                                        +71 B   (+0.1%)     +160 B   (+0.4%)
async-load-calypso-layout-masterbar-checkout                                            +71 B   (+0.1%)     +228 B   (+0.9%)
async-load-publish                                                                      -67 B   (-0.1%)      -16 B   (-0.1%)
async-load-signup-steps-rewind-form-creds                                               +64 B   (+0.1%)      +40 B   (+0.2%)
async-load-signup-steps-clone-credentials                                               +64 B   (+0.1%)      +28 B   (+0.1%)
async-load-calypso-post-editor-media-modal                                              -55 B   (-0.0%)      +92 B   (+0.0%)
async-load-design                                                                       -53 B   (-0.0%)     +505 B   (+0.1%)
async-load-signup-steps-woocommerce-install-step-store-address                          +46 B   (+0.1%)     -124 B   (-0.5%)
async-load-signup-steps-site-picker                                                     +41 B   (+0.0%)     -250 B   (-0.5%)
async-load-signup-steps-difm-site-picker                                                +41 B   (+0.0%)     -237 B   (-0.5%)
async-load-calypso-components-sites-popover                                             +41 B   (+0.0%)      -22 B   (-0.1%)
async-load-signup-steps-page-picker                                                     -26 B   (-0.0%)     -139 B   (-0.1%)
async-load-my-sites-checkout-purchase-modal-is-eligible-for-one-click-checkou...        -26 B   (-0.0%)     -191 B   (-0.2%)
async-load-calypso-jetpack-cloud-sections-sidebar-navigation-manage-selected-...        +19 B   (+0.0%)       -1 B   (-0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

@chihsuan chihsuan requested review from a team, adrianduffell and rjchow February 1, 2024 06:29
@chihsuan chihsuan self-assigned this Feb 1, 2024
@matticbot matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Feb 1, 2024
@chihsuan chihsuan force-pushed the fix/woo-social-login-exist-user branch from 8897fcd to cc14226 Compare February 1, 2024 07:04
Copy link
Contributor

@rjchow rjchow left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried following the testing instructions but at step 6 instead of observing the notification about having an existing account, it just sent me to the woo dashboard with the account created for me.

This is with a google account that has never been used for wpcom nor wccom.

While this is unexpected from the testing instructions, I don't actually see something wrong with this outcome?

@chihsuan chihsuan force-pushed the fix/woo-social-signup-exist-user-error branch from b1ade37 to d56b81e Compare February 5, 2024 07:19
Base automatically changed from fix/woo-social-signup-exist-user-error to trunk February 5, 2024 07:28
@chihsuan chihsuan changed the title [WooCommerce] Fix inconsistent social login screen when email matches an existing account gg [WooCommerce] Fix inconsistent social login screen when email matches an existing account Feb 5, 2024
@chihsuan chihsuan force-pushed the fix/woo-social-login-exist-user branch from cc14226 to 334041b Compare February 5, 2024 07:30
@chihsuan
Copy link
Member Author

chihsuan commented Feb 5, 2024

This is with a google account that has never been used for wpcom nor wccom.

While this is unexpected from the testing instructions, I don't actually see something wrong with this outcome?

@rjchow So there are no existing wpcom accounts matching this Google account's email? If that's the case, then there's no problem.

If you create a wpcom account using the email signup and then try to log in with the Google account associated with that email, you should see an existing account notice. 🤔

@rjchow
Copy link
Contributor

rjchow commented Feb 5, 2024

This is with a google account that has never been used for wpcom nor wccom.
While this is unexpected from the testing instructions, I don't actually see something wrong with this outcome?

@rjchow So there are no existing wpcom accounts matching this Google account's email? If that's the case, then there's no problem.

If you create a wpcom account using the email signup and then try to log in with the Google account associated with that email, you should see an existing account notice. 🤔

Oh cool! i misunderstood the instructions 😅 I’ll try it again shortly with the new understanding!

Copy link
Contributor

@rjchow rjchow left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep can confirm I get the woo lost password screen after seeing the existing account dialog. It seems that the target audience for this fix will certainly see this screen if they signed up via passwordless, which is the default wpcom sign up now.

The send me a login link is not working correctly it seems, there's no href in the :

image

Would it be possible to fix this in this PR too?

@ilyasfoo
Copy link
Contributor

ilyasfoo commented Feb 6, 2024

  1. Continue with Google
  2. Observe that it shows You already have a WordPress.com account with this email address. Add your password to log in or create a new account.
  3. Observe that it shows the "Check your email" screen.

@chihsuan I don't get the step #7 here, when does "Check your email" screen supposed to appear? I tried forgot password and entered my email which is disconnected from Google account, it doesn't show the screen either:

image

@chihsuan
Copy link
Member Author

chihsuan commented Feb 6, 2024

The send me a login link is not working correctly it seems, there's no href in the :
Would it be possible to fix this in this PR too?

Absolutely! @rjchow Fixed in 2df44e3

@chihsuan
Copy link
Member Author

chihsuan commented Feb 6, 2024

I don't get the step #7 here, when does "Check your email" screen supposed to appear? I tried forgot password and entered my email which is disconnected from Google account, it doesn't show the screen either:

Hey @ilyasfoo, Sorry, it seems that actually only passwordless accounts (sign up through wp.com) will enter the magic link flow and the "Check your email" screen will appear automatically. Could you try again with a passwordless account?

You could check if an account is passwordless or not by running wp user meta get <email> passwordless_user on your sandbox.

if ( ! prevProps.accountType && isPasswordlessAccount( this.props.accountType ) ) {
this.props.sendEmailLogin();
}

Copy link
Contributor

@ilyasfoo ilyasfoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @ilyasfoo, Sorry, it seems that actually only passwordless accounts (sign up through wp.com) will enter the magic link flow and the "Check your email" screen will appear automatically. Could you try again with a passwordless account?

Got it, thanks! I've confirmed this to work with a new passwordless account.

I'm not sure this is related, but putting it here: It seems the padding/margin before the prompt is missing when I try to login using new Google account:

image

Otherwise, this is testing well, pre-approving!

@chihsuan
Copy link
Member Author

chihsuan commented Feb 6, 2024

I'm not sure this is related, but putting it here: It seems the padding/margin before the prompt is missing when I try to login using new Google account:

@ilyasfoo It's unrelated to this PR, but just fixed it in this PR too in 82ea6b1 😄

Screenshot 2024-02-06 at 17 05 05

Copy link
Contributor

@ilyasfoo ilyasfoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@chihsuan Awesome, fix tests well too, thanks! 👍

@chihsuan chihsuan requested a review from rjchow February 7, 2024 10:50
Copy link
Contributor

@rjchow rjchow left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you very much! LGTM 💯

@chihsuan chihsuan merged commit 7e5fb63 into trunk Feb 8, 2024
12 checks passed
@chihsuan chihsuan deleted the fix/woo-social-login-exist-user branch February 8, 2024 01:48
@github-actions github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Feb 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

UI Inconsistency on Google and Apple Logins with Matching Emails
4 participants