[Zelda] User Onboarding

[ErisDS]

The user setup and signup processes are two key flows in Ghost that have never had as much love as we would like. They're functional, but it's time to give them that little bit of extra which is what Ghost is all about :)

The current setup process is a single screen where you fill out the title of your blog, and some details about yourself. Once the form is submitted you're presented with the content screen and off you go. For a lot of people this is great - it gets you straight to the action - but for others we're not taking the opportunity to properly introduce them to our software.

The new setup process features 3 steps. The first screen is a welcome message, the second screen is very similar to the existing setup screen, and the final screen gives you an opportunity to invite people to your blog.

Screen 1: Welcome

The first screen is a simple welcome screen, it has steps that show your progress navigating through the process, a screenshot (which may be a video later on) and a button to take you to the next step.

The major piece of functionality on this screen is the live download counter, defaults to 'many, many' and then polls ghost.org/count to discover how many blogs have been created with Ghost.

Screen 2: Setup form

The second screen contains the same setup form that appears on the existing setup screen, but with a number of additions and improvements. Each of these items is a discrete piece of work, and will be described in an issue of its own:

• User profile image User Onboarding - Upload Profile Image Component #5334
• Inline validation & fun validation messages [Zelda] Inline Validation  #5336 Inline validation errors for valid fields aren't cleared if other fields are invalid #5520
• Password strength indicator [Zelda] Password Strength Component #5309

Screen 3: User Invite

The final screen contains a textarea where the user can enter email addresses, one per line, to be invited to their blog. Users will get the 'author' role by default.

This step can be skipped if desired.

The button on this page reads "I'll do this later, take me to my blog", until an email address is added, and then it reads "Invite {{num}} user(s)".

Once this button is clicked, the user is taken to the admin screen.

Issues:

• Invite users User Onboarding - Invite users #5338
• Re-add multi-line placeholder Re-add multi-line placeholder for user invite in onboarding flow #5459

Wiring & navigation behaviour

The wiring between the 3 screens is intended to behave as follows:

The setup process is considered 'complete' once the second screen has been correctly filled out and submitted. The third page is displayed as a convenience, whilst you are in the flow.

If the user leaves the process, or the process goes wrong after the second screen, the remainder of the process should be skipped, and the user should be either sent to the admin screen (if they are logged in) or taken to the login screen.

The 1-2-3 icons at the top of the screen should act as navigation as far as is possible - screen 3 is not accessible from screen 1, but all other combinations should be workable.

With 'back' navigation possible between screens, there may be a need to make the 2nd screen become an 'edit' screen, for the values that were populated... or make it uneditable. Alternatively we could keep the values back and not submit them until after the 3rd screen, but this would mean that all 3 screens have to be proceeded through in order to complete the signup process, which isn't really desirable.

Issues:

• First pass at new onboarding First pass at user onboarding screens #5316
• Flow navigation component User Onboarding - Flow navigation component #5317
• API: New 'PUT' version of /authentication/setup/ API: New 'PUT' version of /authentication/setup/ #5342
• Wiring up the signin User Onboarding - wiring up setup & signup correctly #5339
• Allow editing of user/blog settings during setup User Onboarding - allow editing of user/blog settings during setup  #5526

[ErisDS]

I believe this is largely complete now. A few things that need reviewing:

• Inline validation message wording, and the behaviour for the message that appears below the button
• Behaviour of the gravatar, the change to doing it after focus is lost doesn't give the same immediate effect we had before, perhaps would be better to do it as soon as a valid email is detected and throttle from there?
• I think pressing enter should submit the form on setup/two?
• Blue first run alert doesn't show up until after the admin UI has been refreshed
• User invite behaviour needs a little cleanup, see below

User invite behaviour strangeness:

If you invite a single user with the same email address as your one created during setup (that is, a user which is uninvitable), you get an error alert and the form doesn't submit which is fine, however when you do submit the form, the uninvitable user appears still on the team page.

If you invite one univitable user along with valid users, you'll get both an error and a success alert, and the form will submit. You also incorrectly also see the uninvitable user listed in invitees on the team page, without an error message next to it, and revoke doesn't work. Refreshing the admin will fix the problem.

I believe we need to handle the error when a user cannot be invited at all, and remove them from the ember store.

[cobbspur]

I am looking at the enter button on setup/two page

[acburdine]

I can take care of the user invite behavior, and potentially the blue first run alert

[cobbspur]

Looking at the inline validation and error messaging.

Is there a particular behaviour we should expect? Currently the error messages make sense and change according the relevant error. e.g for email the error message will change from 'Please enter an email' when there is no value to 'Invalid email' accordingly

[ErisDS]

This work is effectively complete, it's been kept open whilst we finished up working on the validation - all of that is now in a working state.