Show error message on connect failure

public/javascripts/chatServices.js

@@ -26,10 +26,14 @@ angular.module('chatServices', [])
   };
 
   service.connect = function(username) {
+    service.error = null;
     chatSocket = new WS(jsRoutes.controllers.Application.chat(username).webSocketURL());
     chatSocket.onmessage = wrap(function(event) {
       var message = JSON.parse(event.data);
       console.log(message);
+      if(message.error) {
+        service.error = message.error;
+      }
       if(message.kind != "pong") {
         $rootScope.$broadcast('ws:message', message);
       }
@@ -73,6 +77,9 @@ angular.module('chatServices', [])
       }
       service.messages.push(message);
     },
+    getError: function() {
+      return Connection.error;
+    },
     connect: Connection.connect,
     disconnect: Connection.disconnect,
     isConnected: Connection.isConnected,

public/partials/chatRoom.html

@@ -3,6 +3,11 @@
   <div class="page-header">
     <h1>Not connected</h1>
   </div>
+  <div ng-show="service.getError()" class="alert-message error">
+    <p>
+    <strong>Oops!</strong> <span>{{service.getError()}}</span>
+    </p>
+  </div>
   <div class="span10">
     <p>Please sign in at the top bar.</p>
   </div>
@@ -11,13 +16,6 @@
   <div class="page-header">
     <h1>Welcome <small>You are playing as {{service.username}}</small></h1>
   </div>
-
-  <div id="onError" class="alert-message error">
-    <p>
-    <strong>Oops!</strong> <span></span>
-    </p>
-  </div>
-
   <div class="row">
     <div class="span10" id="main">
       <div id="messages">