Update Sign Up page for logged in users

[timur987]

Related to A8C-DSP repo's issue 1880.

Previously similar changes were applied in #91095.

Related design in Figma.

Proposed Changes

• Customize Sign Up flow's step for users that are already logged in

Why are these changes being made?

We can open a Sign Up link while being logged in. Even though logically, it should be the same screen as Sign In for logged in users but it is not. Since that I have to customize this edge case as well.

Testing Instructions

• Make sure you are logged in WPCOM,
• As it was mentioned in Customize Auth flow for Blaze Pro #91095, we need a Sign Up link,
• Create a file called generate-links.js with following content:

function generateState() {
  const crypto = require('crypto');
  const hmac = crypto.createHmac('sha256', 'secret' );
  const data = hmac.update(new Date().getTime().toString());
  const state = data.digest('hex');
  return state;
}

const redirectUri = 'http://blaze.pro:3005/auth/connected&blog_id=0&wpcom_connect=1&calypso_env=development&scope=global&from-calypso=1';
const getLoginLink = () =>
	`https://public-api.wordpress.com/oauth2/authorize?response_type=code&client_id=92099&state=${generateState()}&redirect_uri=${encodeURIComponent(redirectUri)}`;

const signInLink = `http://calypso.localhost:3000/log-in?client_id=92099&redirect_to=${encodeURIComponent(getLoginLink())}`;

const signUpLink = `http://calypso.localhost:3000/start/wpcc/oauth2-user?oauth2_client_id=92099&oauth2_redirect=${encodeURIComponent(getLoginLink())}`;

console.log('Login URL:');
console.log(signInLink);
console.log('');
console.log('Sign Up URL:');
console.log(signUpLink);

• Run the script using something like node generate-links.js
• Copy Sign Up link and open it in your browser,
• It should look similar to what I have:

• Optionally, you can open Sign Up and Sign In links from what the script generated and make sure the rest of customizations work fine

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 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]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-111514&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 (~207 bytes added 📈 [gzipped])

name           parsed_size           gzip_size
entry-stepper       +938 B  (+0.0%)     +183 B  (+0.0%)
entry-main          +938 B  (+0.0%)     +183 B  (+0.0%)
entry-login         +798 B  (+0.1%)     +142 B  (+0.0%)

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

Sections (~68 bytes added 📈 [gzipped])

name             parsed_size           gzip_size
jetpack-connect       +125 B  (+0.0%)      +24 B  (+0.0%)
accept-invite         +124 B  (+0.1%)      +44 B  (+0.1%)

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

name                          parsed_size           gzip_size
async-load-signup-steps-user       +241 B  (+0.1%)      +68 B  (+0.1%)
async-load-design-blocks           +125 B  (+0.0%)      +24 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.

[therocket-gr]

tested locally.. works as described.
code changes LGTM

[sbarbosa]

LGTM👍, worked as described.