resources/src/mediawiki.special/mediawiki.special.userlogin.common.js

   1 /*!
   2  * JavaScript for login and signup forms.
   3  */
   4 ( function ( mw, $ ) {
   5         // Move the FancyCaptcha image into a more attractive container.
   6         // The CAPTCHA is in a <div class="captcha"> at the top of the form. If it's a FancyCaptcha,
   7         // then we remove it and insert it lower down, in a customized div with just what we need (e.g.
   8         // no 'fancycaptcha-createaccount' message).
   9         function adjustFancyCaptcha( $content, buttonSubmit ) {
  10                 var $submit = $content.find( buttonSubmit ),
  11                         tabIndex,
  12                         $captchaStuff,
  13                         $captchaImageContainer,
  14                         // JavaScript can't yet parse the message 'createacct-imgcaptcha-help' when it
  15                         // contains a MediaWiki transclusion, so PHP parses it and sends the HTML.
  16                         // This is only set for the signup form (and undefined for login).
  17                         helpMsg = mw.config.get( 'wgCreateacctImgcaptchaHelp' ),
  18                         helpHtml = '';
  19
  20                 if ( !$submit.length ) {
  21                         return;
  22                 }
  23                 tabIndex = $submit.prop( 'tabindex' ) - 1;
  24                 $captchaStuff = $content.find( '.captcha' );
  25
  26                 if ( $captchaStuff.length ) {
  27                         // The FancyCaptcha has this class in the ConfirmEdit extension since 2013-04-18.
  28                         $captchaImageContainer = $captchaStuff.find( '.fancycaptcha-image-container' );
  29                         if ( $captchaImageContainer.length !== 1 ) {
  30                                 return;
  31                         }
  32
  33                         $captchaStuff.remove();
  34
  35                         if ( helpMsg ) {
  36                                 helpHtml = '<small class="mw-createacct-captcha-assisted">' + helpMsg + '</small>';
  37                         }
  38
  39                         // Insert another div before the submit button that will include the
  40                         // repositioned FancyCaptcha div, an input field, and possible help.
  41                         $submit.closest( 'div' ).before( [
  42                                 '<div>',
  43                                         '<label for="wpCaptchaWord">' + mw.message( 'createacct-captcha' ).escaped() + '</label>',
  44                                         '<div class="mw-createacct-captcha-container">',
  45                                                 '<div class="mw-createacct-captcha-and-reload" />',
  46                                                 '<input id="wpCaptchaWord" class="mw-ui-input" name="wpCaptchaWord" type="text" placeholder="' +
  47                                                         mw.message( 'createacct-imgcaptcha-ph' ).escaped() +
  48                                                         '" tabindex="' + tabIndex + '" autocapitalize="off" autocorrect="off">',
  49                                                         helpHtml,
  50                                         '</div>',
  51                                 '</div>'
  52                         ].join( '' ) );
  53
  54                         // Stick the FancyCaptcha container inside our bordered and framed parents.
  55                         $captchaImageContainer
  56                                 .prependTo( $content.find( '.mw-createacct-captcha-and-reload' ) );
  57
  58                         // Find the input field, add the text (if any) of the existing CAPTCHA
  59                         // field (although usually it's blanked out on every redisplay),
  60                         // and after it move over the hidden field that tells the CAPTCHA
  61                         // what to do.
  62                         $content.find( '#wpCaptchaWord' )
  63                                 .val( $captchaStuff.find( '#wpCaptchaWord' ).val() )
  64                                 .after( $captchaStuff.find( '#wpCaptchaId' ) );
  65                 }
  66         }
  67
  68         $( function () {
  69                 // Work with both login and signup form
  70                 adjustFancyCaptcha( $( '#mw-content-text' ), '#wpCreateaccount, #wpLoginAttempt' );
  71         } );
  72 }( mediaWiki, jQuery ) );