Account creation user experience/Engineering

This page is for engineering issues of productizing (moving into MediaWiki core and enabling on multiple wikis) the experiment to improve Account creation. See /Experiment for details of the Experimental change to Account creation implemented on English Wikipedia in Extension:E3Experiments.

The general approach is to add new versions of the "Log in" and "Create account" forms, with reduced clutter and Agora styling. Users can try these forms by adding useNew=1 to the query string in the browser URL. The new forms can run alongside the current form until each wiki elects to change over, and eventually the old versions will be retired. The current form is completely unchanged, with the following exceptions:

'userlogin-resetlink' text is changed in old and new forms.

Form changes

The login form invites users to join the project with 'userlogin joinproject'.
The create account form does not link to Log in, as this is in the top right corner of every page.
The create account form has a benefits section (not shown in narrow screens) extolling the benefits of creating an account.
The forms have separate titles instead of sharing "Log in / create account"

Reduced clutter

The new forms don't show the loginstart, loginend, loginend-https, signupstart, signupend messages.

enwiki crams a massive amount of text in fancycaptcha-createaccount message. The new form hides this in JavaScript. Each wiki should reduce or eliminate this message.

Instead:

Login provides a "Help with logging in" link ('helplogin-url')
Create account provides a "Help me choose" username policy link ('usercreate-helpusername-url')next to Username.

Other message changes

The new forms position labels vertically, and hence they use a new set of messages for labels that do not end in ':'.

'userlogin-helplink' provides a centered "Help with logging in"

How the forms affect existing CSS and HTML

The new forms apply styles prefixed with "mw-ui-" to present the "Agora" appearance, for more details see Agora/Engineering. They keep most styles and element IDs from the old forms. This means that wikis that customize the CSS of the old forms, such as fr and commons adding styles to Common.css and Vector.css respectively, may apply unwanted styles to the new forms. To avoid this, the selectors in per-wiki CSS can be made more selective:

insert td in selectors, since the new "vertical stack" forms use divs rather than tds, for example change
```
.mw-special-Userlogin input[type="submit"]
```
to
```
.mw-special-Userlogin td input[type="submit"]
```
include #userlogin to target only the old create account form
use #mw-content-text > #userloginForm to target only the old login form (both exist in the new login form, but there's not a direct child relationship).

The new forms put any CAPTCHA HTML inside inside a <section> tag so that its labels and divs won't get restyled by the form.

Campaign support

The Account creation UX experiment implemented campaign support. We propose a general mechanism to log campaigns.