[Summary view] [Print] [Text view]

   1  /*!
   2   * JavaScript for signup form.
   3   */
   4  ( function ( mw, $ ) {
   5      // When sending password by email, hide the password input fields.
   6      $( function () {
   7          // Always required if checked, otherwise it depends, so we use the original
   8          var $emailLabel = $( 'label[for="wpEmail"]' ),
   9              originalText = $emailLabel.text(),
  10              requiredText = mw.message( 'createacct-emailrequired' ).text(),
  11              $createByMailCheckbox = $( '#wpCreateaccountMail' ),
  12              $beforePwds = $( '.mw-row-password:first' ).prev(),
  13              $pwds;
  14  
  15  		function updateForCheckbox() {
  16              var checked = $createByMailCheckbox.prop( 'checked' );
  17              if ( checked ) {
  18                  $pwds = $( '.mw-row-password' ).detach();
  19                  $emailLabel.text( requiredText );
  20              } else {
  21                  if ( $pwds ) {
  22                      $beforePwds.after( $pwds );
  23                      $pwds = null;
  24                  }
  25                  $emailLabel.text( originalText );
  26              }
  27          }
  28  
  29          $createByMailCheckbox.on( 'change', updateForCheckbox );
  30          updateForCheckbox();
  31      } );
  32  
  33      // Check if the username is invalid or already taken
  34      $( function () {
  35          var
  36              // We need to hook to all of these events to be sure we are notified of all changes to the
  37              // value of an <input type=text> field.
  38              events = 'keyup keydown change mouseup cut paste focus blur',
  39              $input = $( '#wpName2' ),
  40              $statusContainer = $( '#mw-createacct-status-area' ),
  41              api = new mw.Api(),
  42              currentRequest;
  43  
  44          // Hide any present status messages.
  45  		function clearStatus() {
  46              $statusContainer.slideUp( function () {
  47                  $statusContainer
  48                      .removeAttr( 'class' )
  49                      .empty();
  50              } );
  51          }
  52  
  53          // Returns a promise receiving a { state:, username: } object, where:
  54          // * 'state' is one of 'invalid', 'taken', 'ok'
  55          // * 'username' is the validated username if 'state' is 'ok', null otherwise (if it's not
  56          //   possible to register such an account)
  57  		function checkUsername( username ) {
  58              // We could just use .then() if we didn't have to pass on .abort()…
  59              var d, apiPromise;
  60  
  61              d = $.Deferred();
  62              apiPromise = api.get( {
  63                  action: 'query',
  64                  list: 'users',
  65                  ususers: username // '|' in usernames is handled below
  66              } )
  67                  .done( function ( resp ) {
  68                      var userinfo = resp.query.users[0];
  69  
  70                      if ( resp.query.users.length !== 1 ) {
  71                          // Happens if the user types '|' into the field
  72                          d.resolve( { state: 'invalid', username: null } );
  73                      } else if ( userinfo.invalid !== undefined ) {
  74                          d.resolve( { state: 'invalid', username: null } );
  75                      } else if ( userinfo.userid !== undefined ) {
  76                          d.resolve( { state: 'taken', username: null } );
  77                      } else {
  78                          d.resolve( { state: 'ok', username: username } );
  79                      }
  80                  } )
  81                  .fail( d.reject );
  82  
  83              return d.promise( { abort: apiPromise.abort } );
  84          }
  85  
  86  		function updateUsernameStatus() {
  87              var
  88                  username = $.trim( $input.val() ),
  89                  currentRequestInternal;
  90  
  91              // Abort any pending requests.
  92              if ( currentRequest ) {
  93                  currentRequest.abort();
  94              }
  95  
  96              if ( username === '' ) {
  97                  clearStatus();
  98                  return;
  99              }
 100  
 101              currentRequest = currentRequestInternal = checkUsername( username ).done( function ( info ) {
 102                  var message;
 103  
 104                  // Another request was fired in the meantime, the result we got here is no longer current.
 105                  // This shouldn't happen as we abort pending requests, but you never know.
 106                  if ( currentRequest !== currentRequestInternal ) {
 107                      return;
 108                  }
 109                  // If we're here, then the current request has finished, avoid calling .abort() needlessly.
 110                  currentRequest = undefined;
 111  
 112                  if ( info.state === 'ok' ) {
 113                      clearStatus();
 114                  } else {
 115                      if ( info.state === 'invalid' ) {
 116                          message = mw.message( 'noname' ).text();
 117                      } else if ( info.state === 'taken' ) {
 118                          message = mw.message( 'userexists' ).text();
 119                      }
 120  
 121                      $statusContainer
 122                          .attr( 'class', 'errorbox' )
 123                          .empty()
 124                          .append(
 125                              // Ugh…
 126                              // @todo Change the HTML structure in includes/templates/Usercreate.php
 127                              $( '<strong>' ).text( mw.message( 'createacct-error' ).text() ),
 128                              $( '<br>' ),
 129                              document.createTextNode( message )
 130                          )
 131                          .slideDown();
 132                  }
 133              } ).fail( function () {
 134                  clearStatus();
 135              } );
 136          }
 137  
 138          $input.on( events, $.debounce( 250, updateUsernameStatus ) );
 139      } );
 140  }( mediaWiki, jQuery ) );