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 current complex PHP logic 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


 * loginlanguagelinks
 * templates/Userlogin.php can optionally (if haveData( 'languages' ) ) show a languagelinks div, containing loginlanguagelinks text and a bunch of languages. testwiki has this, I don't see it on enwiki.
 * Will Universal Language Selector affect this?


 * loginprompt
 * 'You must have cookies enabled to log in to .'
 * Enwiki replaces it with a comment in order to blank out the message; Wiktionary has a complex prompt inviting user to Special:MergeAccount from other wikis


 * nologin
 * 'Don't have an account? $1.'
 * If the user can create an account, this is shown. The existing form replaces $1 with the HTML for a hyperlink.


 * nologinlink
 * "Create an account"
 * The code in SpecialUserlogin.php uses this as the text in its hyperlink. TODO: in the new design, this has to be transformed into a button.


 * joinwikipedia
 * "Join Wikipedia"
 * this is the current contents of the button. But the current includes/specials/SpecialUserlogin.php code doesn't work this way, see nologinlink


 * loginend
 * has lots of text on enwiki, see en:MediaWiki:Loginend.
 * StevenW says axe this, its text will be gone forever "All those per-wiki messages will be lost in time, like tears in rain. Time to die."

'Create account' button trouble
specials/SpecialUserlogin.php conditionally puts the nologinlink 'Create an account' text into a hyperlink to that form, and then inserts this HTML into the nologin string 'Don't have an account? $1.'

I changed to outputting Munaf's new strings 'donthaveanccount' and 'joinwikipedia' in separate text and button.

Another problem You're not allowed to have a freestanding button that's a link. e.g. button inside hyperlink. I tried putting the button inside a form that links to create account, that didn't work either.

domain select, extra fields
Before "remember my password", the old form might output a usedomain select list, extrafields and cansecurelogin. WMF Labs' console login shows the usedomain as "Your domain" select, and has an extra "Token" field. TODO check to see how these are styled

cansecurelogin is another optional checkbox. If $wgSecureLogin (which doesn't seem to be set anywhere) is true, it displays a 'Stay connected to HTTPS after login' checkbox.

I kept the ordering and try to output these correctly, 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.

What about skins?
Hmmm.

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. stackoverflow suggestions