[Summary view] [Print] [Text view]

   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 ) );