Check validity and availability of usernames during signup via AJAX

This is done in addition to the server-side checks. Users who have
disabled JavaScript will not notice any difference.

The way this is done (via action=query&list=users API) means that we
can't check for all possible error conditions, both for the username
(e.g. these enforced by extensions like AntiSpoof) and other parts of
the form (e-mail, password…) – these are still handled server-side
only. Thus we intentionally never say that whatever the user typed in
is valid – we only warn when we know it's not.

Doing this "properly" would require some reworking of the internals of
the signup process and this way is already a huge improvement.

(Split off from the reverted a0c72523.)

Bug: 34447
Change-Id: I42c00b54651fd4e7217a862b3116c6113935f5ae

diff --git a/RELEASE-NOTES-1.23 b/RELEASE-NOTES-1.23
index 2b91f88..b244420 100644 (file)
--- a/RELEASE-NOTES-1.23
+++ b/RELEASE-NOTES-1.23
@@ -116,6 +116,8 @@ production.
   creations, similar to the topOnly option.
 * Add mediawiki.ui.button styling to all pages so wiki content can use styled
   buttons.
+* Special:UserLogin/signup now does AJAX checks for invalid and taken usernames,
+  displaying the error live.
 
 === Bug fixes in 1.23 ===
 * (bug 41759) The "updated since last visit" markers (on history pages, recent

diff --git a/includes/templates/Usercreate.php b/includes/templates/Usercreate.php
index 0cb83d5..aba0d27 100644 (file)
--- a/includes/templates/Usercreate.php
+++ b/includes/templates/Usercreate.php
@@ -58,15 +58,23 @@ class UsercreateTemplate extends BaseTemplate {
                        <section class="mw-form-header">
                                <?php $this->html( 'header' ); /* extensions such as ConfirmEdit add form HTML here */ ?>
                        </section>
+                       <!-- This element is used by the mediawiki.special.userlogin.signup.js module. -->
+                       <div
+                               id="mw-createacct-status-area"
+                               <?php if ( $this->data['message'] ) { ?>
+                                       class="<?php echo $this->data['messagetype']; ?>box"
+                               <?php } else { ?>
+                                       style="display: none;"
+                               <?php } ?>
+                       >
                        <?php if ( $this->data['message'] ) { ?>
-                               <div class="<?php $this->text( 'messagetype' ); ?>box">
                                        <?php if ( $this->data['messagetype'] == 'error' ) { ?>
                                                <strong><?php $this->msg( 'createacct-error' ); ?></strong>
                                                <br />
                                        <?php } ?>
                                        <?php $this->html( 'message' ); ?>
-                               </div>
                        <?php } ?>
+                       </div>
 
                        <div>
                                <label for='wpName2'>

diff --git a/resources/Resources.php b/resources/Resources.php
index 5ceda32..207e689 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1249,9 +1249,16 @@ return array(
        'mediawiki.special.userlogin.signup.js' => array(
                'scripts' => 'resources/mediawiki.special/mediawiki.special.userlogin.signup.js',
                'messages' => array(
+                       'createacct-error',
                        'createacct-emailrequired',
+                       'noname',
+                       'userexists',
+               ),
+               'dependencies' => array(
+                       'mediawiki.api',
+                       'mediawiki.jqueryMsg',
+                       'jquery.throttle-debounce',
                ),
-               'dependencies' => 'mediawiki.jqueryMsg',
        ),
        'mediawiki.special.javaScriptTest' => array(
                'scripts' => 'resources/mediawiki.special/mediawiki.special.javaScriptTest.js',

diff --git a/resources/mediawiki.special/mediawiki.special.userlogin.signup.js b/resources/mediawiki.special/mediawiki.special.userlogin.signup.js
index c293f65..0615932 100644 (file)
--- a/resources/mediawiki.special/mediawiki.special.userlogin.signup.js
+++ b/resources/mediawiki.special/mediawiki.special.userlogin.signup.js
@@ -3,7 +3,7 @@
  */
 ( function ( mw, $ ) {
        // When sending password by email, hide the password input fields.
-       function hidePasswordOnEmail() {
+       $( function () {
                // Always required if checked, otherwise it depends, so we use the original
                var $emailLabel = $( 'label[for="wpEmail"]' ),
                        originalText = $emailLabel.text(),
@@ -28,7 +28,113 @@
 
                $createByMailCheckbox.on( 'change', updateForCheckbox );
                updateForCheckbox();
-       }
+       } );
 
-       $( hidePasswordOnEmail );
+       // Check if the username is invalid or already taken
+       $( function () {
+               var
+                       // We need to hook to all of these events to be sure we are notified of all changes to the
+                       // value of an <input type=text> field.
+                       events = 'keyup keydown change mouseup cut paste focus blur',
+                       $input = $( '#wpName2' ),
+                       $statusContainer = $( '#mw-createacct-status-area' ),
+                       api = new mw.Api(),
+                       currentRequest;
+
+               // Hide any present status messages.
+               function clearStatus() {
+                       $statusContainer.slideUp( function () {
+                               $statusContainer
+                                       .removeAttr( 'class' )
+                                       .empty();
+                       } );
+               }
+
+               // Returns a promise receiving a { state:, username: } object, where:
+               // * 'state' is one of 'invalid', 'taken', 'ok'
+               // * 'username' is the validated username if 'state' is 'ok', null otherwise (if it's not
+               //   possible to register such an account)
+               function checkUsername( username ) {
+                       // We could just use .then() if we didn't have to pass on .abort()…
+                       var d, apiPromise;
+
+                       d = $.Deferred();
+                       apiPromise = api.get( {
+                               action: 'query',
+                               list: 'users',
+                               ususers: username // '|' in usernames is handled below
+                       } )
+                               .done( function ( resp ) {
+                                       var userinfo = resp.query.users[0];
+
+                                       if ( resp.query.users.length !== 1 ) {
+                                               // Happens if the user types '|' into the field
+                                               d.resolve( { state: 'invalid', username: null } );
+                                       } else if ( userinfo.invalid !== undefined ) {
+                                               d.resolve( { state: 'invalid', username: null } );
+                                       } else if ( userinfo.userid !== undefined ) {
+                                               d.resolve( { state: 'taken', username: null } );
+                                       } else {
+                                               d.resolve( { state: 'ok', username: username } );
+                                       }
+                               } )
+                               .fail( d.reject );
+
+                       return d.promise( { abort: apiPromise.abort } );
+               }
+
+               function updateUsernameStatus() {
+                       var
+                               username = $.trim( $input.val() ),
+                               currentRequestInternal;
+
+                       // Abort any pending requests.
+                       if ( currentRequest ) {
+                               currentRequest.abort();
+                       }
+
+                       if ( username === '' ) {
+                               clearStatus();
+                               return;
+                       }
+
+                       currentRequest = currentRequestInternal = checkUsername( username ).done( function ( info ) {
+                               var message;
+
+                               // Another request was fired in the meantime, the result we got here is no longer current.
+                               // This shouldn't happen as we abort pending requests, but you never know.
+                               if ( currentRequest !== currentRequestInternal ) {
+                                       return;
+                               }
+                               // If we're here, then the current request has finished, avoid calling .abort() needlessly.
+                               currentRequest = undefined;
+
+                               if ( info.state === 'ok' ) {
+                                       clearStatus();
+                               } else {
+                                       if ( info.state === 'invalid' ) {
+                                               message = mw.message( 'noname' ).text();
+                                       } else if ( info.state === 'taken' ) {
+                                               message = mw.message( 'userexists' ).text();
+                                       }
+
+                                       $statusContainer
+                                               .attr( 'class', 'errorbox' )
+                                               .empty()
+                                               .append(
+                                                       // Ugh…
+                                                       // @todo Change the HTML structure in includes/templates/Usercreate.php
+                                                       $( '<strong>' ).text( mw.message( 'createacct-error' ).text() ),
+                                                       $( '<br>' ),
+                                                       document.createTextNode( message )
+                                               )
+                                               .slideDown();
+                               }
+                       } ).fail( function () {
+                               clearStatus();
+                       } );
+               }
+
+               $input.on( events, $.debounce( 250, updateUsernameStatus ) );
+       } );
 }( mediaWiki, jQuery ) );