Adds check whether username already exists

3 files changed, 33 insertions, 12 deletions

diff --git a/share/static/css/style.css b/share/static/css/style.css
index 043dd7d0..88d9cb79 100644
--- a/share/static/css/style.css
+++ b/share/static/css/style.css
@@ -192,6 +192,11 @@ ul.breadcrumbs li a:link, ul.breadcrumbs li a:visited {
   font-size: 1em;
 }
 
+.chat-users .editable-username #username-error {
+  color: #c90c0c;
+  margin: 0.5rem;
+}
+
 .chat-users #user-list li {
   margin-bottom: 1em;
 }
diff --git a/share/static/js/chat.js b/share/static/js/chat.js
index 3425d516..39547725 100644
--- a/share/static/js/chat.js
+++ b/share/static/js/chat.js
@@ -46,7 +46,7 @@ $(function () {
     $('#username').on('keyup', function (event) {
       if ($('#username').val() !== '' && $('#username').val() !== current_username) {
         if (event.keyCode == 13) {
-          current_username = updateUsername(socket);
+          current_username = updateUsername(socket) || current_username;
         }
       }
     });
@@ -82,17 +82,20 @@ var emitMessage = function (socket) {
 
 var updateUsername = function (socket) {
   var username = $('#username').val();
-  socket.emit('update_username', { username: username });
-  $.ajax({
-    method: 'POST',
-    url: `http://${document.domain}:${location.port}/update-session-username`,
-    contentType: 'application/json',
-    dataType: 'json',
-    data: JSON.stringify({ 'username': username })
-  }).done(function (response) {
-    console.log(response);
-  });
-  return username;
+  if (!checkUsernameExists(username)) {
+    socket.emit('update_username', { username: username });
+    $.ajax({
+      method: 'POST',
+      url: `http://${document.domain}:${location.port}/update-session-username`,
+      contentType: 'application/json',
+      dataType: 'json',
+      data: JSON.stringify({ 'username': username })
+    }).done(function (response) {
+      console.log(response);
+    });
+    return username;
+  }
+  return false;
 }
 
 /************************************/
@@ -110,6 +113,18 @@ var createUserListHTML = function (connected_users, current_user) {
   return userListHTML;
 }
 
+var checkUsernameExists = function (username) {
+  $('#username-error').text('');
+  var userMatches = $('#user-list li').filter(function () {
+    return $(this).text() === username;
+  });
+  if (userMatches.length) {
+    $('#username-error').text('User with that username exists!');
+    return true;
+  }
+  return false;
+}
+
 var getScrollDiffBefore = function () {
   return $('#chat').scrollTop() - ($('#chat')[0].scrollHeight - $('#chat')[0].offsetHeight);
 }
diff --git a/share/templates/chat.html b/share/templates/chat.html
index 474550cd..b4443c09 100644
--- a/share/templates/chat.html
+++ b/share/templates/chat.html
@@ -24,6 +24,7 @@
     <div class="chat-users">
       <div class="editable-username">
         <input id="username" value="{{ username }}" />
+        <p id="username-error"></p>
       </div>
       <ul id="user-list">
       </ul>