Fauxton: Move logout to footer bar

8 files changed, 177 insertions, 11 deletions

diff --git a/src/fauxton/Gruntfile.js b/src/fauxton/Gruntfile.js
index 9cb7e2ed3..e9cb13cdd 100644
--- a/src/fauxton/Gruntfile.js
+++ b/src/fauxton/Gruntfile.js
@@ -214,9 +214,9 @@ module.exports = function(grunt) {
       port: 8000,
       proxy: {
         target: {
-          host: 'localhost',
-          port: 5984,
-          https: false
+          host: 'garrensmith.cloudant.com',
+          port: 443,
+          https: true
         },
         // This sets the Host header in the proxy so that you can use external
         // CouchDB instances and not have the Host set to 'localhost'
diff --git a/src/fauxton/app/addons/auth/base.js b/src/fauxton/app/addons/auth/base.js
index 78f95e0e0..3502edd3a 100644
--- a/src/fauxton/app/addons/auth/base.js
+++ b/src/fauxton/app/addons/auth/base.js
@@ -32,6 +32,7 @@ function(app, FauxtonAPI, Auth) {
       bottomNav: true,
       establish: [FauxtonAPI.session.fetchUser()]
     });
+      
 
     var auth = function (session, roles) {
       var deferred = $.Deferred();
@@ -54,7 +55,16 @@ function(app, FauxtonAPI, Auth) {
 
     FauxtonAPI.auth.registerAuth(auth);
     FauxtonAPI.auth.registerAuthDenied(authDenied);
+
+    FauxtonAPI.session.on('change', function () {
+      if (FauxtonAPI.session.isLoggedIn()) {
+        FauxtonAPI.addHeaderLink({footerNav: true, href:"#logout", title:"Logout", icon: "", className: 'logout'});
+      } else {
+        FauxtonAPI.removeHeaderLink({title: "Logout", footerNav: true});
+      }
+    });
   };
 
+
   return Auth;
 });
diff --git a/src/fauxton/app/addons/auth/resources.js b/src/fauxton/app/addons/auth/resources.js
index da3acb2ae..dd900c50a 100644
--- a/src/fauxton/app/addons/auth/resources.js
+++ b/src/fauxton/app/addons/auth/resources.js
@@ -72,6 +72,16 @@ function (app, FauxtonAPI) {
       return false;
     },
 
+    isLoggedIn: function () {
+      var userCtx = this.get('userCtx');
+
+      if (userCtx.name) {
+        return true;
+      }
+
+      return false;
+    },
+
     userRoles: function () {
       var user = this.user();
 
@@ -237,7 +247,7 @@ function (app, FauxtonAPI) {
       "submit #login": "login"
     },
 
-    login: function () {
+    login: function (event) {
       event.preventDefault();
 
       var that = this,
@@ -251,7 +261,7 @@ function (app, FauxtonAPI) {
       });
 
       promise.fail(function (xhr, type, msg) {
-        if (arguments.length === 3 && msg === 'Unauthorized') {
+        if (arguments.length === 3) {
           msg = FauxtonAPI.session.messages.incorrectCredentials;
         } else {
           msg = xhr;
@@ -349,6 +359,5 @@ function (app, FauxtonAPI) {
     template: "addons/auth/templates/noAccess"
   });
 
-
   return Auth;
 });
diff --git a/src/fauxton/app/addons/auth/templates/nav_dropdown.html b/src/fauxton/app/addons/auth/templates/nav_dropdown.html
index 880a7c121..d61c24a88 100644
--- a/src/fauxton/app/addons/auth/templates/nav_dropdown.html
+++ b/src/fauxton/app/addons/auth/templates/nav_dropdown.html
@@ -20,7 +20,6 @@ the License.
 <ul class="nav nav-list">
   <li class="active" ><a data-select="change-password" id="user-change-password" href="#changePassword"> Change Password </a></li>
   <li ><a data-select="add-admin" href="#addAdmin"> Create Admins </a></li>
-  <li ><a data-select"user-logout" href="#logout"> Logout </a> </li> 
 </ul>
 </nav>
 </div>
diff --git a/src/fauxton/app/api.js b/src/fauxton/app/api.js
index 5e8e424b8..0a2351da4 100644
--- a/src/fauxton/app/api.js
+++ b/src/fauxton/app/api.js
@@ -65,6 +65,10 @@ function(app, Fauxton) {
     app.masterLayout.navBar.addLink(link);
   };
 
+  FauxtonAPI.removeHeaderLink = function(link) {
+    app.masterLayout.navBar.removeLink(link);
+  };
+
   FauxtonAPI.Deferred = function() {
     return $.Deferred();
   };
diff --git a/src/fauxton/app/modules/fauxton/base.js b/src/fauxton/app/modules/fauxton/base.js
index ea5f3ecdb..2715ab225 100644
--- a/src/fauxton/app/modules/fauxton/base.js
+++ b/src/fauxton/app/modules/fauxton/base.js
@@ -77,23 +77,28 @@ function(app, Backbone, resizeColumns) {
     ],
 
     bottomNavLinks: [],
-
-    initialize: function() {
-    },
+    footerNavLinks: [],
 
     serialize: function() {
-      return {navLinks: this.navLinks, bottomNavLinks: this.bottomNavLinks};
+      return {
+        navLinks: this.navLinks,
+        bottomNavLinks: this.bottomNavLinks,
+        footerNavLinks: this.footerNavLinks
+      };
     },
 
     addLink: function(link) {
       // link.top means it gets pushed to the top of the array,
       // link.bottomNav means it goes to the additional bottom nav
+      // link.footerNav means goes to the footer nav
       if (link.top && !link.bottomNav){
         this.navLinks.unshift(link);
       } else if (link.top && link.bottomNav){
         this.bottomNavLinks.unshift(link);
       } else if (link.bottomNav) {
         this.bottomNavLinks.push(link);
+      } else if (link.footerNav) {
+        this.footerNavLinks.push(link);
       } else {
         this.navLinks.push(link);
       }
@@ -103,6 +108,28 @@ function(app, Backbone, resizeColumns) {
       //this.render();
     },
 
+    removeLink: function (removeLink) {
+      var links = this.navlinks;
+
+      if (removeLink.bottomNav) {
+        links = this.bottomNavLinks;
+      } else if (removeLink.footerNav) {
+        links = this.footerNavLinks;
+      }
+
+      var foundIndex = -1;
+
+      _.each(links, function (link, index) {
+        if (link.title === removeLink.title) {
+          foundIndex = index;
+        }
+      });
+
+      if (foundIndex === -1) {return;}
+      links.splice(foundIndex, 1);
+      this.render();
+    },
+
     afterRender: function(){
 
       $('#primary-navbar li[data-nav-name="' + app.selectedHeader + '"]').addClass('active');
diff --git a/src/fauxton/app/templates/fauxton/nav_bar.html b/src/fauxton/app/templates/fauxton/nav_bar.html
index 3733775a5..636d17689 100644
--- a/src/fauxton/app/templates/fauxton/nav_bar.html
+++ b/src/fauxton/app/templates/fauxton/nav_bar.html
@@ -39,6 +39,16 @@ the License.
       </li>
     <% }); %>
   </ul>
+  <ul id="footer-nav-links" class="nav">
+    <% _.each(footerNavLinks, function(link) { %>
+    <% if (link.view) {return;}  %>
+      <li data-nav-name= "<%= link.title %>">
+          <a class="<%= link.icon %> fonticon" href="<%= link.href %>">
+              <%= link.title %>
+          </a>
+      </li>
+    <% }); %>
+  </ul>
 </nav>
 
 
diff --git a/src/fauxton/test/core/navbarSpec.js b/src/fauxton/test/core/navbarSpec.js
new file mode 100644
index 000000000..ec3e71ff8
--- /dev/null
+++ b/src/fauxton/test/core/navbarSpec.js
@@ -0,0 +1,107 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+define([
+       'modules/fauxton/base',
+      'testUtils'
+], function (Fauxton, testUtils) {
+  var assert = testUtils.assert,
+      NavBar = Fauxton.NavBar;
+
+  describe('NavBar', function () {
+
+    describe('adding links', function () {
+      var navBar;
+
+      beforeEach(function () {
+        navBar = new NavBar();
+        navBar.navLinks = [];
+        navBar.bottomNavLinks = [];
+        navBar.footerNavLinks = [];
+      });
+
+      it('Should add link to navlinks', function () {
+        navBar.addLink({href: '#/test', title: 'Test Title'});
+
+        assert.equal(navBar.navLinks.length, 1);
+        assert.equal(navBar.footerNavLinks.length, 0);
+        assert.equal(navBar.bottomNavLinks.length, 0);
+      });
+
+      it('Should add link to bottom links', function () {
+        navBar.addLink({href: '#/test', bottomNav: true, title: 'Test Title'});
+
+        assert.equal(navBar.bottomNavLinks.length, 1);
+        assert.equal(navBar.navLinks.length, 0);
+        assert.equal(navBar.footerNavLinks.length, 0);
+      });
+
+      it('Should add link to footer links', function () {
+        navBar.addLink({href: '#/test', footerNav: true, title: 'Test Title'});
+
+        assert.equal(navBar.footerNavLinks.length, 1);
+        assert.equal(navBar.bottomNavLinks.length, 0);
+        assert.equal(navBar.navLinks.length, 0);
+      });
+    });
+
+    describe('removing links', function () {
+      var navBar;
+
+      beforeEach(function () {
+        navBar = new NavBar();
+        navBar.navLinks = [];
+        navBar.bottomNavLinks = [];
+        navBar.footerNavLinks = [];
+        navBar.addLink({
+          href: '#/test', 
+          footerNav: true, 
+          title: 'Test Title Footer'
+        });
+
+        navBar.addLink({
+          href: '#/test', 
+          bottomNav: true, 
+          title: 'Test Title Bottom'
+        });
+
+        navBar.addLink({
+          href: '#/test', 
+          title: 'Test Title'
+        });
+      });
+
+      it("should remove links from list", function () {
+        navBar.removeLink({
+          title: 'Test Title Footer',
+          footerNav: true
+        });
+
+        assert.equal(navBar.footerNavLinks.length, 0);
+        assert.equal(navBar.bottomNavLinks.length, 1);
+        assert.equal(navBar.navLinks.length, 1);
+      });
+
+      it("Should call render after removing links", function () {
+        var renderSpy = sinon.stub(navBar,'render');
+
+        navBar.removeLink({
+          title: 'Test Title Footer',
+          footerNav: true
+        });
+
+        assert.ok(renderSpy.calledOnce);
+      });
+
+    });
+  });
+
+});