}
}
- 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';
'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',
+++ /dev/null
-/* 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;
-}
+++ /dev/null
-/**
- * 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 ) );
+++ /dev/null
-/* 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%;
-}
--- /dev/null
+/* 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%;
+}
--- /dev/null
+/**
+ * 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 ) );
--- /dev/null
+/* 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;
+}
--- /dev/null
+/* 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;
+}
--- /dev/null
+/**
+ * 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 ) );
+++ /dev/null
-/*
- * 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;
-}
}
- // 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;
+ }
+
}
// --------------------------------------------------------------------------