realtime check of username availability - closes #2987

app/controllers/User.scala

@@ -316,16 +316,17 @@ object User extends LilaController {
   def autocomplete = Open { implicit ctx =>
     get("term", ctx.req).filter(_.nonEmpty) match {
       case None => BadRequest("No search term provided").fuccess
-      case Some(term) => JsonOk {
+      case Some(term) => {
         ctx.me.ifTrue(getBool("friend")) match {
-          case None => UserRepo usernamesLike term
+          case None if getBool("exists") => UserRepo nameExists term map { JsBoolean(_) }
+          case None => UserRepo usernamesLike term map { Json.toJson(_) }
           case Some(follower) =>
             Env.relation.api.searchFollowedBy(follower, term, 10) flatMap {
               case Nil => UserRepo usernamesLike term
               case userIds => UserRepo usernamesByIds userIds
-            }
+            } map { Json.toJson(_) }
         }
-      }
+      } map { Ok(_) as JSON }
     }
   }
 

app/views/auth/formFields.scala.html

@@ -10,6 +10,7 @@
   value="@username.value"
   autofocus="true" />
   @errMsg(username)
+  <p class="error exists none">This username is already in use, please try another one.</p>
 </li>
 <li class="password">
   <label for="@password.id">@trans.password()</label>

app/views/auth/signup.scala.html

@@ -1,6 +1,7 @@
 @(form: Form[_], recaptchaPublicKey: String)(implicit ctx: Context)
 
 @moreJs = {
+@jsTag("signup.js")
 <script src='https://www.google.com/recaptcha/api.js'></script>
 }
 

public/javascripts/signup.js

@@ -0,0 +1,22 @@
+$(function() {
+  var $exists = $('.signup_box form .username .exists');
+  var runCheck = lichess.fp.debounce(function() {
+    var name = $username.val();
+    if (name.length >= 3) $.ajax({
+      method: 'GET',
+      url: '/player/autocomplete',
+      data: {
+        term: name,
+        exists: 1
+      },
+      success: function(res) {
+        $exists.toggle(res);
+      }
+    });
+  }, 300);
+  $username = $('.signup_box form input#username')
+    .on('change keyup paste', function() {
+      $exists.hide();
+      runCheck();
+    });
+});