Design/Archive/Wikimedia Foundation Design/Login/Engineering

Notes towards implementing the new design.

https://gerrit.wikimedia.org/r/#/c/30637/ replaces form HTML with static. But we need to preserve the form if we're going to productize

CSS styling

 * userlogin, #userloginForm
 * these both float: left and draw a border similar to what's on other special forms. The float: left makes the fancy green "Create account" button appear to the side unless it's moved into the form. I think you may have to !important disable these.

I had to move the cta "create account" div inside the userloginForm div to avoid problems.


 * td.mwlabel
 * styles the table cell. Unneeded and unused in new design,


 * td.mw-submit
 * styles the cell for the Login button, making it white-space: nowrap; and text-align: left; I don't think we need these in the new design.

HTML stuff
old "Don't have an account" was at the top in html('link') ?> but this is not styled.

new design has a special  that is heavily styled containing new messages and a button: msg( 'donthaveaccount' ) ?>msg( 'joinwikipedia' ) ?> TODO: do we need both?

relevant messages

 * loginstart
 * empty message in the messages table and on enwiki


 * languagelinks
 * templates/Userlogin.php can optionally (if haveData( 'languages' ) ) show a languagelinks div. testwiki has this, I don't see it on enwiki.


 * loginprompt
 * this defaults to 'You must have cookies enabled to log in to .' Enwiki replaces it with a comment to blank out the message.


 * link
 * HTML for creating an account?


 * loginend
 * has lots of text on enwiki, see en:MediaWiki:Loginend.

'Create account' button trouble
The code outputs a special html link.

The reason for this is the actual contents of "Don't have an account are programmatically generated and quite complicated!! In mainLoginForm in includes/specials/SpecialUserlogin.php:       # Don't show a "create account" link if the user can't        if( $this->showCreateOrLoginLink( $user ) ) {           ... code figures out what to do the link _has_ to be styled into a button

extra fields
Before "remember my password", the old form would output a usedomain select list, extrafields and cansecurelogin.

I kept the ordering, but if a wiki triggered these fields, I don't know if the "remember my password"'s special class="pull-up" would get messed up.

Can't combine two things in label
The new design combines "Remember my password" and a right-aligned "Forgot username or password?" in one label.

This doesn't work because "Remember my password" and "Forgot username" may be separately or together disabled on the wiki. Also
 * "Forgot username or password" can't be in a label that's "for" a checkbox that isn't shown.
 * I think Siebrand said that in some languages the two text strings would not fit.
 * in the jsFiddle the two pieces of text don't properly align horizontally

The two items have to be a separate label and another div or whatever that can stand alone.