Refactor RL modules related to Special:Userlogin
authorBartosz Dziewoński <matma.rex@gmail.com>
Mon, 2 Dec 2013 19:29:03 +0000 (20:29 +0100)
committerOri.livneh <ori@wikimedia.org>
Sun, 22 Dec 2013 00:48:45 +0000 (00:48 +0000)
* 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

12 files changed:
includes/specials/SpecialUserlogin.php
resources/Resources.php
resources/mediawiki.special/mediawiki.special.createAccount.css [deleted file]
resources/mediawiki.special/mediawiki.special.createAccount.js [deleted file]
resources/mediawiki.special/mediawiki.special.userLogin.css [deleted file]
resources/mediawiki.special/mediawiki.special.userlogin.common.css [new file with mode: 0644]
resources/mediawiki.special/mediawiki.special.userlogin.common.js [new file with mode: 0644]
resources/mediawiki.special/mediawiki.special.userlogin.login.css [new file with mode: 0644]
resources/mediawiki.special/mediawiki.special.userlogin.signup.css [new file with mode: 0644]
resources/mediawiki.special/mediawiki.special.userlogin.signup.js [new file with mode: 0644]
resources/mediawiki.special/mediawiki.special.vforms.css [deleted file]
resources/mediawiki.ui/components/default/forms.less

index 0866aa7..b9a84be 100644 (file)
@@ -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';
index 6fd1665..d280c75 100644 (file)
@@ -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.css b/resources/mediawiki.special/mediawiki.special.createAccount.css
deleted file mode 100644 (file)
index 11d00e7..0000000
+++ /dev/null
@@ -1,89 +0,0 @@
-/* Disable the underline that Vector puts on h2 headings, and bold them. */
-.mw-ui-container h2 {
-       border: 0;
-       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. ****/
-.mw-ui-container #userloginForm {
-       float: left;
-}
-
-div.mw-createacct-benefits-container {
-       /* Keeps this column compact and close to the form, but tends to squish contents. */
-       float: left;
-}
-
-div.mw-createacct-benefits-container h2 {
-       margin-bottom: 30px;
-}
-
-.mw-number-text.icon-edits {
-       /* @embed */
-       background: url(images/icon-edits.png) no-repeat left center;
-}
-
-.mw-number-text.icon-pages {
-       /* @embed */
-       background: url(images/icon-pages.png) no-repeat left center;
-}
-
-.mw-number-text.icon-contributors {
-       /* @embed */
-       background: url(images/icon-contributors.png) no-repeat left center;
-}
-
-/* Special font for numbers in benefits*/
-div.mw-number-text h3 {
-       top: 0;
-       margin: 0;
-       padding: 0;
-       color: #252525;
-       font-family: 'Georgia', serif;
-       font-weight: normal;
-       font-size: 2.2em;
-       line-height: 1.2;
-       text-align: center;
-}
-
-/* Contains a number and explanatory text, with space for an icon */
-div.mw-number-text {
-       display: block;
-       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 */
-       text-align: center;
-}
diff --git a/resources/mediawiki.special/mediawiki.special.createAccount.js b/resources/mediawiki.special/mediawiki.special.createAccount.js
deleted file mode 100644 (file)
index 609b2dd..0000000
+++ /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 = '<small class="mw-createacct-captcha-assisted">' + helpMsg + '</small>';
-                       }
-
-                       // Insert another div before the submit button that will include the
-                       // repositioned FancyCaptcha div, an input field, and possible help.
-                       $submit.closest( 'div' )
-                               .before( [
-                       '<div>',
-                               '<label for="wpCaptchaWord">' + mw.message( 'createacct-captcha' ).escaped() + '</label>',
-                               '<div class="mw-createacct-captcha-container">',
-                                       '<div class="mw-createacct-captcha-and-reload" />',
-                                       '<input id="wpCaptchaWord" name="wpCaptchaWord" type="text" placeholder="' +
-                                               mw.message( 'createacct-imgcaptcha-ph' ).escaped() +
-                                               '" tabindex="' + tabIndex + '" autocapitalize="off" autocorrect="off">',
-                                               helpHtml,
-                               '</div>',
-                       '</div>'
-                                       ].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 (file)
index cf9eaa0..0000000
+++ /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 (file)
index 0000000..d5fd2b8
--- /dev/null
@@ -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 (file)
index 0000000..a899ae7
--- /dev/null
@@ -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 <div class="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).
+       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 = '<small class="mw-createacct-captcha-assisted">' + helpMsg + '</small>';
+                       }
+
+                       // Insert another div before the submit button that will include the
+                       // repositioned FancyCaptcha div, an input field, and possible help.
+                       $submit.closest( 'div' ).before( [
+                               '<div>',
+                                       '<label for="wpCaptchaWord">' + mw.message( 'createacct-captcha' ).escaped() + '</label>',
+                                       '<div class="mw-createacct-captcha-container">',
+                                               '<div class="mw-createacct-captcha-and-reload" />',
+                                               '<input id="wpCaptchaWord" name="wpCaptchaWord" type="text" placeholder="' +
+                                                       mw.message( 'createacct-imgcaptcha-ph' ).escaped() +
+                                                       '" tabindex="' + tabIndex + '" autocapitalize="off" autocorrect="off">',
+                                                       helpHtml,
+                                       '</div>',
+                               '</div>'
+                       ].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 (file)
index 0000000..85730f5
--- /dev/null
@@ -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.userlogin.signup.css b/resources/mediawiki.special/mediawiki.special.userlogin.signup.css
new file mode 100644 (file)
index 0000000..1564712
--- /dev/null
@@ -0,0 +1,63 @@
+/* Disable the underline that Vector puts on h2 headings, and bold them. */
+.mw-ui-container h2 {
+       border: 0;
+       font-weight: bold;
+}
+
+/* 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 {
+       /* Keeps this column compact and close to the form, but tends to squish contents. */
+       float: left;
+}
+
+div.mw-createacct-benefits-container h2 {
+       margin-bottom: 30px;
+}
+
+.mw-number-text.icon-edits {
+       /* @embed */
+       background: url(images/icon-edits.png) no-repeat left center;
+}
+
+.mw-number-text.icon-pages {
+       /* @embed */
+       background: url(images/icon-pages.png) no-repeat left center;
+}
+
+.mw-number-text.icon-contributors {
+       /* @embed */
+       background: url(images/icon-contributors.png) no-repeat left center;
+}
+
+/* Special font for numbers in benefits*/
+div.mw-number-text h3 {
+       top: 0;
+       margin: 0;
+       padding: 0;
+       color: #252525;
+       font-family: 'Georgia', serif;
+       font-weight: normal;
+       font-size: 2.2em;
+       line-height: 1.2;
+       text-align: center;
+}
+
+/* Contains a number and explanatory text, with space for an icon */
+div.mw-number-text {
+       display: block;
+       font-size: 1.2em;
+       color: #444;
+       margin-top: 1em;
+       /* 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 (file)
index 0000000..c293f65
--- /dev/null
@@ -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 (file)
index 768a9c6..0000000
+++ /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;
-}
index 10f853c..66f4487 100644 (file)
 
        }
 
-       // 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:
        // <form class="mw-ui-vform">
-       //   <div class="error">An error occurred</div>
+       //   <div class="errorbox">An error occurred</div>
+       //   <div class="warningbox">A warning to be noted</div>
+       //   <div class="successbox">Action successful!</div>
+       //   <div class="error">A different kind of error</div>
        //   <div>
        //     <input type="text" value="input" class="mw-ui-input">
        //   <div>
                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;
+       }
+
 }
 
 // --------------------------------------------------------------------------