Log in form.

app/scripts/controllers/nav-bar.coffee

@@ -2,7 +2,19 @@
 
 angular.module('xoWebApp')
   .controller 'NavBarCtrl', ($scope, $location) ->
-    $scope.user = ''
+    $scope.login = {
+      email: 'admin@admin.net'
+      password: 'admin'
+    }
+    $scope.user = null
 
     $scope.ensureListView = ->
       $location.path '/list'
+
+    $scope.logIn = ->
+      $scope.user = {
+        email: $scope.login.email
+      }
+
+    $scope.logOut = ->
+      $scope.user = null

app/styles/main.sass

@@ -102,6 +102,20 @@ a
 .xo-icon-unknown
   @extend .fa, .fa-circle, .xo-color-unknown
 
+//////////////////////////////////////////////////////////////////////
+// Navbar
+//////////////////////////////////////////////////////////////////////
+
+.login-form
+  padding: 1em
+  width: 20em
+
+  .input-group
+    margin: .2em
+
+  button
+    margin-top: 1em
+
 //////////////////////////////////////////////////////////////////////
 // Main view
 //////////////////////////////////////////////////////////////////////

app/views/nav-bar.html

@@ -97,14 +97,63 @@
       <!-- /Main menu. -->
 
       <!-- Displayed only when the user is connected. -->
-      <li ng-if="user"><a><i class="fa fa-user"></i> {{user}}</a></li>
-      <li ng-if="user"><a><i class="fa fa-sign-out"></i></a></li>
+      <li ng-if="user"><a><i class="fa fa-user"></i> {{user.email}}</a></li>
+      <li ng-if="user"><a ng-click="logOut()"><i class="fa fa-sign-out"></i></a></li>
       <!-- /When user is connected. -->
 
       <!-- Displayed only when the user is not connected. -->
-      <li ng-if="!user"><a>@todo</a></li>
+      <li ng-if="!user" class="dropdown">
+
+        <a class="dropdown-toggle">
+          Log in
+        </a>
+
+        <form
+          class="dropdown-menu inverse login-form"
+          ng-submit="logIn()"
+          ng-click="$event.stopPropagation()"
+        >
+
+          <div class="input-group">
+            <span class="input-group-addon">
+              <i class="fa fa-user fa-fw"></i>
+            </span>
+            <input
+              type="text"
+              class="form-control"
+              placeholder="Email"
+              ng-model="login.email"
+              value="admin@admin.net"
+              required
+            />
+          </div>
+
+          <div class="input-group">
+            <span class="input-group-addon">
+              <i class="fa fa-key fa-fw"></i>
+            </span>
+            <input
+              type="password"
+              class="form-control"
+              placeholder="Password"
+              name="password"
+              ng-model="login.password"
+              value="admin"
+              required
+            />
+          </div>
+
+          <button type="submit" class="btn btn-primary btn-block">
+            <i class="fa fa-sign-in"></i> Log in
+          </button>
+
+        </form>
+
+      </li>
       <!-- /When user is not connected. -->
 
+
+
     </ul>
     <!-- /Right items. -->