Wp-calypso: [Gutenboarding] Build signup form UI component

[ramonjd]

Subtask of EPIC #38701

During the Gutenboarding flow, we'll need users to create an account so that they can use the full suite of FSE features.

We could reuse our work from passwordless signup (paWIov-6C-p2) and ask for an email only

For the first iteration we might like to build WordPress.com signup only, and leave social signup for another task

Tasks:

• [x] Investigate using signup step component from Calypso #38801
• [ ] ~Move passwordless signup form to a shared package #38822~ _edit: decided against this approach for now_
• [ ] We need to work out how we're going to implement the signup component (import Calypso component, via iframe, a new, Gutenboarding-dedicated component etc). Some preliminary discussion: pbAok1-c#comment-34
• [ ] Get design input and sign off
• [ ] Build a new Gutenboarding signup UI component/modal, including error handling.

⚠️ The signup nudge be as unobtrusive and painless for the user as possible. We should inform the user why we need their email address (so we can save your work).

Related links

For more background on why we're asking users to create an account, see pbxlJb-6b-p2

[ramonjd]

We'll kick this off while we work out how to deal with accountless FSE.

We can resurrect passwordless as @andrewserong mentions in pMz3w-aWr-p2#comment-76169

Although it didn’t improve revenue, the test makes me confident that we can re-use passwordless signup again when we want to here. The main UX issue that was flagged in the process was just the random user name generation, which we might want to take another look at for Gutenboarding, too. I have some other thoughts on how we could improve the passwordless UX

[ramonjd]

Probably relevant to the architectural decision:

We have a precedent in Gutenboarding to avoid pulling in dependencies directly from Calypso source code, as this tends to lead to a dependency graph that we don’t understand and can’t control the bounds of, affectionately referred to as “Calypso soup.”

https://github.com/Automattic/wp-calypso/issues/38703#issuecomment-572450367

cc @jameslnewell

[roo2]

I've started spiking a passwordless signup form using gutenberg components

In summary, because users would see the signup form as a popup on top of gutenberg core components, it makes sense to keep the guttenberg look and feel.

p1579034972120800-slack-CRWCHQGUB

[roo2]

Also I'm trying to build on top of the work that @jameslnewell has done in extracting logic for the passwordless sign up form into an authentication package.

https://github.com/Automattic/wp-calypso/compare/feat/authentication-package#diff-b7edacf8416c573865d69f5fb921c9d9