Mobile apps: Clear noise on OAuth2 login page

[xavier-lc]

Proposed Changes

• Remove the header and footer links, and the Back button on the mobile apps login page.

Why are these changes being made?

• As explained on issue, we want to remove potential distractions so the users focus on logging in.

Testing Instructions

• Open the live preview
• Go to /log-in?client_id=2697&redirect_to=https%3A%2F%2Fpublic-api.wordpress.com%2Foauth2%2Fauthorize%3Fclient_id%3D2697%26redirect_uri%3Dwordpress%253A%252F%252Fwpcom-authorize%26response_type%3Dcode%26scope%3Dglobal%26from-calypso%3D1 (the link you would get if trying to log in on the wordpress mobile app)
• Check that the header and footer links, and the Back button have been removed.

Pre-merge Checklist

• [ ] 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)?
• [ ] Have you checked for TypeScript, React or other console errors?
• [ ] Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
• [ ] 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 UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• [ ] 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-148388

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

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

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

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/oauth2-login-page on your sandbox.

[matticbot]

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

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

name                   parsed_size           gzip_size
entry-login                 +119 B  (+0.0%)      +93 B  (+0.0%)
entry-reauth-required       +117 B  (+0.0%)      +46 B  (+0.0%)
entry-main                  +117 B  (+0.0%)      +46 B  (+0.0%)
entry-subscriptions          +52 B  (+0.0%)      +21 B  (+0.0%)
entry-stepper                +52 B  (+0.0%)      +21 B  (+0.0%)

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

Sections (~21 bytes added 📈 [gzipped])

name             parsed_size           gzip_size
jetpack-connect        +32 B  (+0.0%)      +21 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 (~21 bytes added 📈 [gzipped])

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

[xavier-lc]

I tried to test with the other client id but I end up on an error page

Thanks for the catch, there was a js error that I've fixed now. I've also added the iOs link on the PR description.

[chriskmnds]

Hiya. I think this affects all the client OAuth screens, including the unified ones, which have a different / less destructive view e.g. for Studio client, it should look like:

I think this also raises legal concerns with removing the TOS on the page. I think we should probably revert here, but I'll tag @jasmussen or @matt-west first, who have worked on the redesign of the client Login screens. Basically, for iOS and Android, we now remove the TOS and "create an account" link in the header.

[jasmussen]

A general question, did this receive any feedback from legal? I echo Christos concerns. Much of the unification work we are doing is exactly so that important decisions around presence of T&S or Privacy links, including where they are in the page, are not regressed randomly. I can see from the linked context that there was a broader discussion, but the point is: this still appears to be a one-off decision in favor of a single product, and for the reasons mentioned before it would be useful to think in terms of code reusability and simplicity. Otherwise, the matrix of decisions to maintain gets multiplied with each exception.

[matt-west]

+1. I don't think we can remove the T&S and privacy links from this screen.