From eb372b532171a5091a90d4dd1bd6090b5583f011 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Bartosz=20Dziewo=C5=84ski?= Date: Mon, 2 Dec 2013 20:29:03 +0100 Subject: [PATCH] Refactor RL modules related to Special:Userlogin * Removed duplicated code * Moved generic styles to mediawiki.ui * Made sure scripts only run when they're needed * Cleaned up formatting * Cleaned up module and file naming Change-Id: I90a2331182d4d66f0584083b30b90ac6471c3aaf --- includes/specials/SpecialUserlogin.php | 37 +++--- resources/Resources.php | 31 +++-- .../mediawiki.special.createAccount.js | 124 ------------------ .../mediawiki.special.userLogin.css | 70 ---------- .../mediawiki.special.userlogin.common.css | 65 +++++++++ .../mediawiki.special.userlogin.common.js | 72 ++++++++++ .../mediawiki.special.userlogin.login.css | 27 ++++ ...=> mediawiki.special.userlogin.signup.css} | 42 ++---- .../mediawiki.special.userlogin.signup.js | 34 +++++ .../mediawiki.special.vforms.css | 46 ------- .../components/default/forms.less | 24 +++- 11 files changed, 267 insertions(+), 305 deletions(-) delete mode 100644 resources/mediawiki.special/mediawiki.special.createAccount.js delete mode 100644 resources/mediawiki.special/mediawiki.special.userLogin.css create mode 100644 resources/mediawiki.special/mediawiki.special.userlogin.common.css create mode 100644 resources/mediawiki.special/mediawiki.special.userlogin.common.js create mode 100644 resources/mediawiki.special/mediawiki.special.userlogin.login.css rename resources/mediawiki.special/{mediawiki.special.createAccount.css => mediawiki.special.userlogin.signup.css} (57%) create mode 100644 resources/mediawiki.special/mediawiki.special.userlogin.signup.js delete mode 100644 resources/mediawiki.special/mediawiki.special.vforms.css diff --git a/includes/specials/SpecialUserlogin.php b/includes/specials/SpecialUserlogin.php index 0866aa7f05..b9a84bed69 100644 --- a/includes/specials/SpecialUserlogin.php +++ b/includes/specials/SpecialUserlogin.php @@ -1094,37 +1094,44 @@ class LoginForm extends SpecialPage { } } - if ( $this->mType == 'signup' ) { - $template = new UsercreateTemplate(); + // Generic styles and scripts for both login and signup form + $out->addModuleStyles( array( + 'mediawiki.ui', + 'mediawiki.ui.button', + 'mediawiki.special.userlogin.common.styles' + ) ); + $out->addModules( array( + 'mediawiki.special.userlogin.common.js' + ) ); - $out->addModuleStyles( array( - 'mediawiki.ui', - 'mediawiki.ui.button', - 'mediawiki.special.createaccount', - ) ); + if ( $this->mType == 'signup' ) { // XXX hack pending RL or JS parse() support for complex content messages // https://bugzilla.wikimedia.org/show_bug.cgi?id=25349 $out->addJsConfigVars( 'wgCreateacctImgcaptchaHelp', $this->msg( 'createacct-imgcaptcha-help' )->parse() ); + + // Additional styles and scripts for signup form $out->addModules( array( - 'mediawiki.special.createaccount.js' + 'mediawiki.special.userlogin.signup.js' + ) ); + $out->addModuleStyles( array( + 'mediawiki.special.userlogin.signup.styles' ) ); + + $template = new UsercreateTemplate(); + // Must match number of benefits defined in messages $template->set( 'benefitCount', 3 ); $q = 'action=submitlogin&type=signup'; $linkq = 'type=login'; } else { - $template = new UserloginTemplate(); - + // Additional styles for login form $out->addModuleStyles( array( - 'mediawiki.ui', - 'mediawiki.special.userlogin' + 'mediawiki.special.userlogin.login.styles' ) ); - $out->addModules( array( - 'mediawiki.special.createaccount.js' - ) ); + $template = new UserloginTemplate(); $q = 'action=submitlogin&type=login'; $linkq = 'type=signup'; diff --git a/resources/Resources.php b/resources/Resources.php index 6fd16659c6..d280c75b2b 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1089,28 +1089,39 @@ return array( 'mediawiki.util', ), ), - 'mediawiki.special.userlogin' => array( + 'mediawiki.special.userlogin.common.styles' => array( 'styles' => array( - 'resources/mediawiki.special/mediawiki.special.vforms.css', - 'resources/mediawiki.special/mediawiki.special.userLogin.css', + 'resources/mediawiki.special/mediawiki.special.userlogin.common.css', ), 'position' => 'top', ), - 'mediawiki.special.createaccount' => array( + 'mediawiki.special.userlogin.signup.styles' => array( 'styles' => array( - 'resources/mediawiki.special/mediawiki.special.vforms.css', - 'resources/mediawiki.special/mediawiki.special.createAccount.css', + 'resources/mediawiki.special/mediawiki.special.userlogin.signup.css', ), + 'position' => 'top', + ), + 'mediawiki.special.userlogin.login.styles' => array( + 'styles' => array( + 'resources/mediawiki.special/mediawiki.special.userlogin.login.css', + ), + 'position' => 'top', ), - 'mediawiki.special.createaccount.js' => array( - 'scripts' => 'resources/mediawiki.special/mediawiki.special.createAccount.js', + 'mediawiki.special.userlogin.common.js' => array( + 'scripts' => array( + 'resources/mediawiki.special/mediawiki.special.userlogin.common.js', + ), 'messages' => array( 'createacct-captcha', + 'createacct-imgcaptcha-ph', + ), + ), + 'mediawiki.special.userlogin.signup.js' => array( + 'scripts' => 'resources/mediawiki.special/mediawiki.special.userlogin.signup.js', + 'messages' => array( 'createacct-emailrequired', - 'createacct-imgcaptcha-ph' ), 'dependencies' => 'mediawiki.jqueryMsg', - 'position' => 'top', ), 'mediawiki.special.javaScriptTest' => array( 'scripts' => 'resources/mediawiki.special/mediawiki.special.javaScriptTest.js', diff --git a/resources/mediawiki.special/mediawiki.special.createAccount.js b/resources/mediawiki.special/mediawiki.special.createAccount.js deleted file mode 100644 index 609b2dd3d9..0000000000 --- a/resources/mediawiki.special/mediawiki.special.createAccount.js +++ /dev/null @@ -1,124 +0,0 @@ -/** - * JavaScript for Create account form (Special:UserLogin?type=signup). - */ -( function ( mw, $ ) { - // When sending password by email, hide the password input fields. - // This function doesn't need to be loaded early by ResourceLoader, but is tiny. - function hidePasswordOnEmail() { - // Always required if checked, otherwise it depends, so we use the original - var $emailLabel = $( 'label[for="wpEmail"]' ), - originalText = $emailLabel.text(), - requiredText = mw.message( 'createacct-emailrequired' ).text(), - $createByMailCheckbox = $( '#wpCreateaccountMail' ), - $beforePwds = $( '.mw-row-password:first' ).prev(), - $pwds; - - function updateForCheckbox() { - var checked = $createByMailCheckbox.prop( 'checked' ); - if ( checked ) { - $pwds = $( '.mw-row-password' ).detach(); - $emailLabel.text( requiredText ); - } else { - if ( $pwds ) { - $beforePwds.after( $pwds ); - $pwds = null; - } - $emailLabel.text( originalText ); - } - } - - $createByMailCheckbox.on( 'change', updateForCheckbox ); - updateForCheckbox(); - } - - // Move the FancyCaptcha image into a more attractive container. - // This function does need to be run early by ResourceLoader. - function adjustFancyCaptcha( $content, buttonSubmit ) { - var $submit = $content.find( buttonSubmit ), - tabIndex, - $captchaStuff, - $captchaImageContainer, - // JavaScript can't yet parse the message createacct-imgcaptcha-help when it - // contains a MediaWiki transclusion, so PHP parses it and sends the HTML. - helpMsg = mw.config.get( 'wgCreateacctImgcaptchaHelp' ), - helpHtml = ''; - - /* - * CAPTCHA - * The CAPTCHA is in a div style="captcha" at the top of the form. - * If it's a FancyCaptcha, then we remove it and insert it lower down, - * in a customized div with just what we need (e.g. no - * fancycaptcha-createaccount message). - */ - if ( !$submit.length) { - return; - } - tabIndex = $submit.prop( 'tabindex' ) - 1; - $captchaStuff = $content.find ( '.captcha' ); - - if ( $captchaStuff.length ) { - - // The FancyCaptcha has this class in the ConfirmEdit extension - // after 2013-04-18. - $captchaImageContainer = $captchaStuff.find( '.fancycaptcha-image-container' ); - if ( $captchaImageContainer.length !== 1 ) { - return; - } - - $captchaStuff.remove(); - - if ( helpMsg) { - helpHtml = '' + helpMsg + ''; - } - - // Insert another div before the submit button that will include the - // repositioned FancyCaptcha div, an input field, and possible help. - $submit.closest( 'div' ) - .before( [ - '
', - '', - '
', - '
', - '', - helpHtml, - '
', - '
' - ].join( '' ) - ); - - // Stick the FancyCaptcha container inside our bordered and framed parents. - $captchaImageContainer - .prependTo( $content.find( '.mw-createacct-captcha-and-reload' ) ); - - // Find the input field, add the text (if any) of the existing CAPTCHA - // field (although usually it's blanked out on every redisplay), - // and after it move over the hidden field that tells the CAPTCHA - // what to do. - $content.find( '#wpCaptchaWord' ) - .val( $captchaStuff.find( '#wpCaptchaWord' ).val() ) - .after( $captchaStuff.find( '#wpCaptchaId' ) ); - } - } - - $( function () { - // Checks if the current page is Special:UserLogin - var isLogin = false, - $content = $( '#mw-content-text' ), - buttonSubmit = '#wpCreateaccount'; - - if ( $content.find( buttonSubmit ).length === 0 ) { - buttonSubmit = '#wpLoginAttempt'; - isLogin = true; - } - - adjustFancyCaptcha( $content, buttonSubmit ); - - if ( !isLogin ) { - hidePasswordOnEmail(); - } - - } ); - -}( mediaWiki, jQuery ) ); diff --git a/resources/mediawiki.special/mediawiki.special.userLogin.css b/resources/mediawiki.special/mediawiki.special.userLogin.css deleted file mode 100644 index cf9eaa0fc0..0000000000 --- a/resources/mediawiki.special/mediawiki.special.userLogin.css +++ /dev/null @@ -1,70 +0,0 @@ -/* Styles just for VForm user login */ -#mw-userlogin-help { - text-align: center; -} - -.mw-ui-vform .mw-secure { - /* @embed */ - background: url(images/icon-lock.png) no-repeat scroll left center transparent; - margin: 0 0 0 1px; - padding: 0 0 0 11px; -} - -/* The login form invites users to create an account */ -#mw-createaccount-cta { - width: 20em; - height: 10em; - /* @embed */ - background: url(images/glyph-people-large.png) no-repeat 50%; - margin: 0 auto; -} - -#mw-createaccount-cta h3, -#mw-createaccount-another h3 { - font-size: 0.9em; - font-weight: normal; - text-align: center; -} - -#mw-createaccount-cta h3 { - padding-top: 4em; -} - -#mw-createaccount-join { - margin-left: 0.75em; - /* Separate from background image */ - box-shadow: 4px 4px 4px 4px rgba(255, 255, 255, 1); - width: auto; - display: inline-block; -} - -/**** shuffled CAPTCHA ****/ -#wpCaptchaWord { - margin-top: 6px; -} - -.mw-createacct-captcha-container { - background-color: #f8f8f8; - border: 1px solid #c9c9c9; - padding: 10px; - text-align: center; -} - -.mw-createacct-captcha-assisted { - display: block; - margin-top: 0.5em; -} - -/* Put a border around the fancycaptcha-image-container. */ -.mw-createacct-captcha-and-reload { - border: 1px solid #c9c9c9; - display: table-cell; /* Other display formats end up too wide */ - width: 270px; - background-color: #FFF; -} - -/* Make the fancycaptcha-image-container full-width within its parent. */ -.fancycaptcha-image-container -{ - width: 100%; -} diff --git a/resources/mediawiki.special/mediawiki.special.userlogin.common.css b/resources/mediawiki.special/mediawiki.special.userlogin.common.css new file mode 100644 index 0000000000..d5fd2b8032 --- /dev/null +++ b/resources/mediawiki.special/mediawiki.special.userlogin.common.css @@ -0,0 +1,65 @@ +/* Styles for user login and signup forms */ +#mw-userlogin-help { + text-align: center; +} + +.mw-ui-vform .mw-secure { + /* @embed */ + background: url(images/icon-lock.png) no-repeat scroll left center transparent; + margin: 0 0 0 1px; + padding: 0 0 0 11px; +} + +/* + * When inside the VForm style, disable the border that Vector and other skins + * put on the div surrounding the login/create account form. + * Also disable the margin and padding that Vector puts around the form. + */ +.mw-ui-container #userloginForm, +.mw-ui-container #userlogin { + border: 0; + margin: 0; + padding: 0; +} + +/* Reposition and resize language links, which appear on a per-wiki basis */ +.mw-ui-container #languagelinks { + margin-bottom: 2em; + font-size: 0.8em; +} + +/* Put some space under template's header, which may contain CAPTCHA HTML.*/ +section.mw-form-header { + margin-bottom: 10px; +} + +/**** shuffled CAPTCHA ****/ +#wpCaptchaWord { + margin-top: 6px; +} + +.mw-createacct-captcha-container { + background-color: #f8f8f8; + border: 1px solid #c9c9c9; + padding: 10px; + text-align: center; +} + +.mw-createacct-captcha-assisted { + display: block; + margin-top: 0.5em; +} + +/* Put a border around the fancycaptcha-image-container. */ +.mw-createacct-captcha-and-reload { + border: 1px solid #c9c9c9; + /* Other display formats end up too wide */ + display: table-cell; + width: 270px; + background-color: #FFF; +} + +/* Make the fancycaptcha-image-container full-width within its parent. */ +.fancycaptcha-image-container { + width: 100%; +} diff --git a/resources/mediawiki.special/mediawiki.special.userlogin.common.js b/resources/mediawiki.special/mediawiki.special.userlogin.common.js new file mode 100644 index 0000000000..a899ae765a --- /dev/null +++ b/resources/mediawiki.special/mediawiki.special.userlogin.common.js @@ -0,0 +1,72 @@ +/** + * JavaScript for login and signup forms. + */ +( function ( mw, $ ) { + // Move the FancyCaptcha image into a more attractive container. + // The CAPTCHA is in a
at the top of the form. If it's a FancyCaptcha, + // then we remove it and insert it lower down, in a customized div with just what we need (e.g. + // no 'fancycaptcha-createaccount' message). + function adjustFancyCaptcha( $content, buttonSubmit ) { + var $submit = $content.find( buttonSubmit ), + tabIndex, + $captchaStuff, + $captchaImageContainer, + // JavaScript can't yet parse the message 'createacct-imgcaptcha-help' when it + // contains a MediaWiki transclusion, so PHP parses it and sends the HTML. + // This is only set for the signup form (and undefined for login). + helpMsg = mw.config.get( 'wgCreateacctImgcaptchaHelp' ), + helpHtml = ''; + + if ( !$submit.length ) { + return; + } + tabIndex = $submit.prop( 'tabindex' ) - 1; + $captchaStuff = $content.find( '.captcha' ); + + if ( $captchaStuff.length ) { + // The FancyCaptcha has this class in the ConfirmEdit extension since 2013-04-18. + $captchaImageContainer = $captchaStuff.find( '.fancycaptcha-image-container' ); + if ( $captchaImageContainer.length !== 1 ) { + return; + } + + $captchaStuff.remove(); + + if ( helpMsg ) { + helpHtml = '' + helpMsg + ''; + } + + // Insert another div before the submit button that will include the + // repositioned FancyCaptcha div, an input field, and possible help. + $submit.closest( 'div' ).before( [ + '
', + '', + '
', + '
', + '', + helpHtml, + '
', + '
' + ].join( '' ) ); + + // Stick the FancyCaptcha container inside our bordered and framed parents. + $captchaImageContainer + .prependTo( $content.find( '.mw-createacct-captcha-and-reload' ) ); + + // Find the input field, add the text (if any) of the existing CAPTCHA + // field (although usually it's blanked out on every redisplay), + // and after it move over the hidden field that tells the CAPTCHA + // what to do. + $content.find( '#wpCaptchaWord' ) + .val( $captchaStuff.find( '#wpCaptchaWord' ).val() ) + .after( $captchaStuff.find( '#wpCaptchaId' ) ); + } + } + + $( function () { + // Work with both login and signup form + adjustFancyCaptcha( $( '#mw-content-text' ), '#wpCreateaccount, #wpLoginAttempt' ); + } ); +}( mediaWiki, jQuery ) ); diff --git a/resources/mediawiki.special/mediawiki.special.userlogin.login.css b/resources/mediawiki.special/mediawiki.special.userlogin.login.css new file mode 100644 index 0000000000..85730f53b4 --- /dev/null +++ b/resources/mediawiki.special/mediawiki.special.userlogin.login.css @@ -0,0 +1,27 @@ +/* The login form invites users to create an account */ +#mw-createaccount-cta { + width: 20em; + height: 10em; + /* @embed */ + background: url(images/glyph-people-large.png) no-repeat 50%; + margin: 0 auto; +} + +#mw-createaccount-cta h3, +#mw-createaccount-another h3 { + font-size: 0.9em; + font-weight: normal; + text-align: center; +} + +#mw-createaccount-cta h3 { + padding-top: 4em; +} + +#mw-createaccount-join { + margin-left: 0.75em; + /* Separate from background image */ + box-shadow: 4px 4px 4px 4px rgba(255, 255, 255, 1); + width: auto; + display: inline-block; +} diff --git a/resources/mediawiki.special/mediawiki.special.createAccount.css b/resources/mediawiki.special/mediawiki.special.userlogin.signup.css similarity index 57% rename from resources/mediawiki.special/mediawiki.special.createAccount.css rename to resources/mediawiki.special/mediawiki.special.userlogin.signup.css index 11d00e75d0..156471229f 100644 --- a/resources/mediawiki.special/mediawiki.special.createAccount.css +++ b/resources/mediawiki.special/mediawiki.special.userlogin.signup.css @@ -4,40 +4,12 @@ font-weight: bold; } -/**** shuffled CAPTCHA ****/ -#wpCaptchaWord { - margin-top: 6px; -} - -.mw-createacct-captcha-container { - background-color: #f8f8f8; - border: 1px solid #c9c9c9; - padding: 10px; - text-align: center; -} - -.mw-createacct-captcha-assisted { - display: block; - margin-top: 0.5em; -} - -/* Put a border around the fancycaptcha-image-container. */ -.mw-createacct-captcha-and-reload { - border: 1px solid #c9c9c9; - display: table-cell; /* Other display formats end up too wide */ - width: 270px; - background-color: #FFF; -} - -/* Make the fancycaptcha-image-container full-width within its parent. */ -.fancycaptcha-image-container -{ - width: 100%; -} - -/**** Benefits column CSS to the right (if it fits) of the form. ****/ +/* Benefits column CSS to the right (if it fits) of the form. */ .mw-ui-container #userloginForm { float: left; + /* Override the right margin of the form to give space in case a benefits + * column appears to the side. */ + margin-right: 100px; } div.mw-createacct-benefits-container { @@ -83,7 +55,9 @@ div.mw-number-text { font-size: 1.2em; color: #444; margin-top: 1em; - padding: 0 0 0 95px; /* 80px wide icon plus "margin" */ - min-height: 75px; /* matches max icon height, ensures icon emblem is visible */ + /* 80px wide icon plus "margin" */ + padding: 0 0 0 95px; + /* Matches max icon height, ensures icon emblem is visible */ + min-height: 75px; text-align: center; } diff --git a/resources/mediawiki.special/mediawiki.special.userlogin.signup.js b/resources/mediawiki.special/mediawiki.special.userlogin.signup.js new file mode 100644 index 0000000000..c293f655ff --- /dev/null +++ b/resources/mediawiki.special/mediawiki.special.userlogin.signup.js @@ -0,0 +1,34 @@ +/** + * JavaScript for signup form. + */ +( function ( mw, $ ) { + // When sending password by email, hide the password input fields. + function hidePasswordOnEmail() { + // Always required if checked, otherwise it depends, so we use the original + var $emailLabel = $( 'label[for="wpEmail"]' ), + originalText = $emailLabel.text(), + requiredText = mw.message( 'createacct-emailrequired' ).text(), + $createByMailCheckbox = $( '#wpCreateaccountMail' ), + $beforePwds = $( '.mw-row-password:first' ).prev(), + $pwds; + + function updateForCheckbox() { + var checked = $createByMailCheckbox.prop( 'checked' ); + if ( checked ) { + $pwds = $( '.mw-row-password' ).detach(); + $emailLabel.text( requiredText ); + } else { + if ( $pwds ) { + $beforePwds.after( $pwds ); + $pwds = null; + } + $emailLabel.text( originalText ); + } + } + + $createByMailCheckbox.on( 'change', updateForCheckbox ); + updateForCheckbox(); + } + + $( hidePasswordOnEmail ); +}( mediaWiki, jQuery ) ); diff --git a/resources/mediawiki.special/mediawiki.special.vforms.css b/resources/mediawiki.special/mediawiki.special.vforms.css deleted file mode 100644 index 768a9c6e16..0000000000 --- a/resources/mediawiki.special/mediawiki.special.vforms.css +++ /dev/null @@ -1,46 +0,0 @@ -/* - * When inside the VForm style, disable the border that Vector and other skins - * put on the div surrounding the login/create account form. - * Also disable the margin and padding that Vector puts around the form. - */ -.mw-ui-container #userloginForm, -.mw-ui-container #userlogin { - border: 0; - margin: 0; - padding: 0; -} - -/* Reposition and resize language links, which appear on a per-wiki basis */ -.mw-ui-container #languagelinks { - margin-bottom: 2em; - font-size: 0.8em; -} - -/* Put some space under template's header, which may contain CAPTCHA HTML.*/ -section.mw-form-header { - margin-bottom: 10px; -} - -/* - * Styles for information boxes. - */ -.mw-ui-vform .errorbox, -.mw-ui-vform .warningbox, -.mw-ui-vform .successbox { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - font-size: 0.9em; - margin: 0 0 1em 0; - padding: 0.5em; - word-wrap: break-word; -} - -/* - * Override the right margin of the form to give space in case a benefits - * column appears to the side. - * - */ -.mw-ui-container #userloginForm { - margin-right: 100px; -} diff --git a/resources/mediawiki.ui/components/default/forms.less b/resources/mediawiki.ui/components/default/forms.less index 10f853c15a..66f4487989 100644 --- a/resources/mediawiki.ui/components/default/forms.less +++ b/resources/mediawiki.ui/components/default/forms.less @@ -80,16 +80,17 @@ } - // Form errors + // Styles for information boxes // - // HTMLForm uses error, SpecialUserlogin (login and create account) uses - // errorbox. - // - // TODO: move errorbox from mediawiki.special.vforms.css into here. + // Regular HTMLForm uses .error class, some special pages like + // SpecialUserlogin (login and create account) use .errorbox. // // Markup: //
- //
An error occurred
+ //
An error occurred
+ //
A warning to be noted
+ //
Action successful!
+ //
A different kind of error
//
// //
@@ -110,6 +111,17 @@ text-shadow: 0 1px #fae3e3; word-wrap: break-word; } + + .errorbox, + .warningbox, + .successbox { + .box-sizing(border-box); + font-size: 0.9em; + margin: 0 0 1em 0; + padding: 0.5em; + word-wrap: break-word; + } + } // -------------------------------------------------------------------------- -- 2.20.1