Gravatar: Address Gravatar OAuth flow scenario

[wellyshen]

Related to 108728-gh-Automattic/gravatar

Proposed Changes

• Disable the email input from the magic code login view
• Hide the "Switch email" from the magic code verification view
• Hide the "Switch email" from the secondary email options
• Password login page:
  • Adjust the subtitle
  • Disable the email input
  • Hide the social login buttons
  • Hide the "Create one" option from the footer

Why are these changes being made?

• Please refer to 108728-gh-Automattic/gravatar

Testing Instructions

Test Gravatar OAuth Flow

• Setup Calypso
• Check out this PR, and run yarn start
• Test with this URL by replacing your secondary email address:

calypso.localhost:3000/log-in/link?client_id=103904&redirect_to=https%3A%2F%2Fpublic-api.wordpress.com%2Foauth2%2Fauthorize%3Fclient_id%3D103904%26redirect_uri%3Dhttps%253A%252F%252Fgravatar.com%252F%26response_type%3Dtoken%26scope%3Dauth%26from-calypso%3D1&gravatar_flow=1&email_address=<YOUR_2ND_EMAIL>

• You will see the differences between the normal flow and the OAuth flow:

Email form:

Normal	OAuth

Secondary email options:

Normal	OAuth

Code verification:

Normal	OAuth

Password login:

Normal	OAuth

Other Flows / Products Should Still Work The Same

• Gravatar (Magic)

  • Dev
  • Prod

• Gravatar (Password)

  • Dev
  • Prod

• WP Job Manager (Magic)

  • Dev
  • Prod

• WP Job Manager (Password)

  • Dev
  • Prod

• WP.com (Magic)

  • Dev
  • Prod

• WP.com (Password)

  • Dev
  • Prod

• Woo (Magic)

  • Dev
  • Prod

• Woo (Password)

  • Dev
  • Prod

• Jetpack (Magic)

  • Dev
  • Prod

• Jetpack (Password)

  • Dev
  • Prod

Pre-merge Checklist

• [x] Has the general commit checklist been followed? (PCYsg-hS-p2)
• [ ] Have you written new tests 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)?
• [x] 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-aUh-p2)?

[github-actions[bot]]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-118041

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-118041&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-118041&env=a8c-for-agencies

[matticbot]

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

App Entrypoints (~111 bytes added 📈 [gzipped])

name         parsed_size           gzip_size
entry-login       +289 B  (+0.0%)     +111 B  (+0.0%)

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

Sections (~32 bytes added 📈 [gzipped])

name             parsed_size           gzip_size
jetpack-connect        +86 B  (+0.0%)      +32 B  (+0.0%)

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 (~32 bytes added 📈 [gzipped])

name                      parsed_size           gzip_size
async-load-design-blocks        +86 B  (+0.0%)      +32 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.

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• blaze-dashboard
• command-palette-wp-admin
• help-center
• notifications
• odyssey-stats
• whats-new

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/gravatar-disallow-change-email-for-gravatar-powered-clients on your sandbox.