Move login to chat view

app/views/index.scala.html

@@ -23,19 +23,13 @@
       </div>
 
       <span ng-controller="LoginCtrl">
+        <p class="pull-right" ng-show="!service.isConnected() && view != 'chatRoom'">
+          <button class="btn" ng-click="setView('chatRoom')">Play!</button>
+        </p>
         <p class="pull-right" ng-show="service.isConnected()">
           Logged in as {{service.username}} —
           <a ng-click="service.disconnect()">Disconnect</a>
         </p>
-
-        <p class="pull-right" ng-show="service.status == 'connecting'">
-          Connecting...
-        </p>
-
-        <form class="pull-right" ng-show="service.status == 'disconnected'">
-          <input id="username" name="username" class="input-small" type="text" ng-model="username" placeholder="Username">
-          <button class="btn" type="submit" ng-click="service.connect(username); username=''">Sign in</button>
-        </form>
       </span>
 
     </div>

public/javascripts/chatServices.js

@@ -9,6 +9,9 @@ angular.module('chatServices', [])
     error: null,
     messages: [],
     status: 'disconnected',
+    hasRoom: function() {
+      return $location.path() != '';
+    },
     isConnected: function() {
       return this.status == 'connected';
     },

public/javascripts/main.js

@@ -8,11 +8,15 @@ function partial(template) {
   return jsRoutes.controllers.Assets.at('partials/'+template+'.html').url;
 }
 
-function ViewCtrl($scope, Connection) {
+function ViewCtrl($scope, $location, Connection) {
   $scope.service = Connection;
   $scope.partial = partial;
   $scope.view = 'about';
 
+  if($location.path()) {
+    $scope.view = 'chatRoom';
+  }
+
   $scope.nav = [
     {partial: 'about', name: 'About'},
     {partial: 'chatRoom', name: 'Chat'},

public/partials/chatRoom.html

@@ -1,22 +1,19 @@
 <div ng-controller="ChatCtrl">
-<div ng-hide="service.isConnected()">
   <div class="page-header">
-    <h1>Not connected</h1>
+    <h1 ng-show="service.isConnected()">Welcome <small>You are playing as {{service.username}}</small></h1>
+    <h1 ng-hide="service.isConnected()">Welcome <small>login to play</small></h1>
   </div>
-  <div ng-show="service.error" class="alert-message error">
-    <p>
-    <strong>Oops!</strong> <span>{{service.error}}</span>
-    </p>
-  </div>
-  <div class="span10">
-    <p>Please sign in at the top bar.</p>
-  </div>
-</div>
-<div ng-show="service.isConnected()">
-  <div class="page-header">
-    <h1>Welcome <small>You are playing as {{service.username}}</small></h1>
+  <div ng-if="!service.isConnected()" class="row">
+    <div id="login" class="offset4 span6">
+      <form ng-show="service.status == 'disconnected'">
+        <input id="username" name="username" class="input-small" type="text" ng-model="username" placeholder="Username">
+        <br>
+        <br>
+        <button class="btn" type="submit" ng-click="service.connect(username); username=''">{{service.hasRoom() ? 'Join Room' : 'Create New Room'}}</button>
+      </form>
+    </div>
   </div>
-  <div class="row">
+  <div ng-if="service.isConnected()" class="row">
     <div class="span10" id="main">
       <div id="messages">
         <div class="message {{message.kind}} {{message.user == chat.username ? 'me' : ''}}" ng-repeat="message in chat.messages">
@@ -59,4 +56,3 @@
     </div>
   </div>
 </div>
-</div>

public/stylesheets/main.css

@@ -115,3 +115,9 @@ body {
 .message.join, .message.quit {
     background: #D9E7FB;
 }
+
+#login {
+    text-align: center;
+    padding-top: 100px;
+    height: 300px;
+}