Bartosz Dziewoński has uploaded a new change for review.
https://gerrit.wikimedia.org/r/98589
Change subject: Refactor RL modules related to Special:Userlogin
......................................................................
Refactor RL modules related to Special:Userlogin
* Removed duplicated code
* Made sure scripts only run when they're needed
* Cleaned up formatting
* Cleaned up module and file naming
Change-Id: I90a2331182d4d66f0584083b30b90ac6471c3aaf
---
M includes/specials/SpecialUserlogin.php
M resources/Resources.php
D resources/mediawiki.special/mediawiki.special.createAccount.css
D resources/mediawiki.special/mediawiki.special.createAccount.js
R resources/mediawiki.special/mediawiki.special.userlogin.css
A resources/mediawiki.special/mediawiki.special.userlogin.js
A resources/mediawiki.special/mediawiki.special.userlogin.signup.css
A resources/mediawiki.special/mediawiki.special.userlogin.signup.js
M resources/mediawiki.special/mediawiki.special.vforms.css
9 files changed, 232 insertions(+), 277 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/89/98589/1
diff --git a/includes/specials/SpecialUserlogin.php
b/includes/specials/SpecialUserlogin.php
index e701e0f..e51dd87 100644
--- a/includes/specials/SpecialUserlogin.php
+++ b/includes/specials/SpecialUserlogin.php
@@ -1091,20 +1091,31 @@
}
}
- if ( $this->mType == 'signup' ) {
- $template = new UsercreateTemplate();
+ // Generic styles and scripts for both login and signup form
+ $out->addModuleStyles( array(
+ 'mediawiki.ui',
+ 'mediawiki.special.userlogin.css'
+ ) );
+ $out->addModules( array(
+ 'mediawiki.special.userlogin.js'
+ ) );
- $out->addModuleStyles( array(
- 'mediawiki.ui',
- '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.css'
+ ) );
+
+ $template = new UsercreateTemplate();
+
// Must match number of benefits defined in messages
$template->set( 'benefitCount', 3 );
@@ -1112,15 +1123,6 @@
$linkq = 'type=login';
} else {
$template = new UserloginTemplate();
-
- $out->addModuleStyles( array(
- 'mediawiki.ui',
- 'mediawiki.special.userlogin'
- ) );
-
- $out->addModules( array(
- 'mediawiki.special.createaccount.js'
- ) );
$q = 'action=submitlogin&type=login';
$linkq = 'type=signup';
diff --git a/resources/Resources.php b/resources/Resources.php
index a022c6d..befeac2 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1064,28 +1064,32 @@
'mediawiki.util',
),
),
- 'mediawiki.special.userlogin' => array(
+ 'mediawiki.special.userlogin.css' => array(
'styles' => array(
'resources/mediawiki.special/mediawiki.special.vforms.css',
-
'resources/mediawiki.special/mediawiki.special.userLogin.css',
+
'resources/mediawiki.special/mediawiki.special.userlogin.css',
),
- 'position' => 'top',
),
- 'mediawiki.special.createaccount' => array(
+ 'mediawiki.special.userlogin.js' => array(
+ 'scripts' => array(
+
'resources/mediawiki.special/mediawiki.special.userlogin.js',
+ ),
+ 'messages' => array(
+ 'createacct-emailrequired',
+ ),
+ ),
+ 'mediawiki.special.userlogin.signup.css' => 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',
),
),
- 'mediawiki.special.createaccount.js' => array(
- 'scripts' =>
'resources/mediawiki.special/mediawiki.special.createAccount.js',
+ 'mediawiki.special.userlogin.signup.js' => array(
+ 'scripts' =>
'resources/mediawiki.special/mediawiki.special.userlogin.signup.js',
'messages' => array(
'createacct-captcha',
- 'createacct-emailrequired',
- 'createacct-imgcaptcha-ph'
+ '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
index 11d00e7..0000000
--- a/resources/mediawiki.special/mediawiki.special.createAccount.css
+++ /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
index 609b2dd..0000000
--- 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 = '<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
similarity index 62%
rename from resources/mediawiki.special/mediawiki.special.userLogin.css
rename to resources/mediawiki.special/mediawiki.special.userlogin.css
index cf9eaa0..bc2fe92 100644
--- a/resources/mediawiki.special/mediawiki.special.userLogin.css
+++ b/resources/mediawiki.special/mediawiki.special.userlogin.css
@@ -1,4 +1,4 @@
-/* Styles just for VForm user login */
+/* Styles for user login and signup forms */
#mw-userlogin-help {
text-align: center;
}
@@ -38,6 +38,29 @@
display: inline-block;
}
+/*
+ * 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;
@@ -58,13 +81,13 @@
/* 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 */
+ /* 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
-{
+/* Make the fancycaptcha-image-container full-width within its parent. */
+.fancycaptcha-image-container {
width: 100%;
}
diff --git a/resources/mediawiki.special/mediawiki.special.userlogin.js
b/resources/mediawiki.special/mediawiki.special.userlogin.js
new file mode 100644
index 0000000..117e97c
--- /dev/null
+++ b/resources/mediawiki.special/mediawiki.special.userlogin.js
@@ -0,0 +1,71 @@
+/**
+ * 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.
+ 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.signup.css
b/resources/mediawiki.special/mediawiki.special.userlogin.signup.css
new file mode 100644
index 0000000..1564712
--- /dev/null
+++ b/resources/mediawiki.special/mediawiki.special.userlogin.signup.css
@@ -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
index 0000000..8a40c42
--- /dev/null
+++ b/resources/mediawiki.special/mediawiki.special.userlogin.signup.js
@@ -0,0 +1,37 @@
+/**
+ * JavaScript for signup form.
+ */
+( 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();
+ }
+
+ $( function () {
+ hidePasswordOnEmail();
+ } );
+}( mediaWiki, jQuery ) );
diff --git a/resources/mediawiki.special/mediawiki.special.vforms.css
b/resources/mediawiki.special/mediawiki.special.vforms.css
index 768a9c6..c87a685 100644
--- a/resources/mediawiki.special/mediawiki.special.vforms.css
+++ b/resources/mediawiki.special/mediawiki.special.vforms.css
@@ -1,27 +1,4 @@
/*
- * 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,
@@ -34,13 +11,4 @@
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;
}
--
To view, visit https://gerrit.wikimedia.org/r/98589
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I90a2331182d4d66f0584083b30b90ac6471c3aaf
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <matma....@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
