From 4c39bd751dc0c6879c67090a379071d10177b703 Mon Sep 17 00:00:00 2001
From: Michel Felipe <mfelipeof@gmail.com>
Date: Fri, 15 Apr 2016 17:45:23 -0300
Subject: [PATCH] Added hamburguer sidebar toggle button to show only after login

---
 src/app/layout/navbar/navbar.html                     |  4 ++--
 src/app/layout/navbar/navbar.ts                       | 21 +++++++++++++--------
 src/app/layout/services/body-state-classes.service.ts | 20 ++++++++++----------
 src/app/login/auth-events.ts                          | 12 ++----------
 src/app/login/auth.service.ts                         | 36 ++++++++++++++++++++++++------------
 src/app/main/main.html                                |  2 +-
 6 files changed, 52 insertions(+), 43 deletions(-)

diff --git a/src/app/layout/navbar/navbar.html b/src/app/layout/navbar/navbar.html
index f8ed57c..1ed001d 100644
--- a/src/app/layout/navbar/navbar.html
+++ b/src/app/layout/navbar/navbar.html
@@ -1,12 +1,12 @@
 <nav class="navbar navbar-static-top navbar-inverse">
   <div class="container-fluid">
     <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" (click)="ctrl.toggleCollapse()">
+      <button type="button" class="navbar-toggle collapsed" (click)="ctrl.toggleCollapse()" ng-show="ctrl.showHamburguer">
         <span class="sr-only">{{"navbar.toggle_menu" | translate}}</span>
         <i class="fa fa-bars"></i>
       </button>
       <a class="navbar-brand" ui-sref="main.environment.home">
-        <span class="noosfero-logo"> </span> 
+        <span class="noosfero-logo"> </span>
         <span class="noosfero-name">{{"noosfero.name" | translate}}</span>
       </a>
     </div>
diff --git a/src/app/layout/navbar/navbar.ts b/src/app/layout/navbar/navbar.ts
index e0133ef..c002406 100644
--- a/src/app/layout/navbar/navbar.ts
+++ b/src/app/layout/navbar/navbar.ts
@@ -1,6 +1,6 @@
 import {Component, Inject, EventEmitter, Input} from "ng-forward";
 import {LanguageSelectorComponent} from "../language-selector/language-selector.component";
-import {SessionService, AuthService, AuthController, IAuthEvents, AUTH_EVENTS} from "./../../login";
+import {SessionService, AuthService, AuthController, AuthEvents} from "./../../login";
 import {SidebarNotificationService} from "../sidebar/sidebar.notification.service";
 
 @Component({
@@ -9,11 +9,14 @@ import {SidebarNotificationService} from "../sidebar/sidebar.notification.servic
     directives: [LanguageSelectorComponent],
     providers: [AuthService, SessionService, SidebarNotificationService]
 })
-@Inject("$uibModal", AuthService, "SessionService", "$scope", "$state", SidebarNotificationService)
+@Inject("$uibModal", AuthService, "SessionService", "$state", SidebarNotificationService)
 export class Navbar {
 
     private currentUser: noosfero.User;
     private modalInstance: any = null;
+
+    public showHamburguer: boolean = false;
+
     /**
      *
      */
@@ -21,22 +24,26 @@ export class Navbar {
         private $uibModal: any,
         private authService: AuthService,
         private session: SessionService,
-        private $scope: ng.IScope,
         private $state: ng.ui.IStateService,
         private sidebarNotificationService: SidebarNotificationService
     ) {
         this.currentUser = this.session.currentUser();
 
-        this.$scope.$on(AUTH_EVENTS.loginSuccess, () => {
+        this.showHamburguer = this.authService.isAuthenticated();
+
+        this.authService.loginSuccess.subscribe(() => {
             if (this.modalInstance) {
                 this.modalInstance.close();
                 this.modalInstance = null;
             }
 
-            this.$state.go(this.$state.current, {}, { reload: true }); // TODO move to auth
+            this.currentUser = this.session.currentUser();
+            this.showHamburguer = true;
+
+            this.$state.go(this.$state.current, {}, { reload: true });  // TODO move to auth
         });
 
-        this.$scope.$on(AUTH_EVENTS.logoutSuccess, () => {
+        this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
             this.currentUser = this.session.currentUser();
         });
 
@@ -60,8 +67,6 @@ export class Navbar {
         this.$state.go(this.$state.current, {}, { reload: true });  // TODO move to auth
     };
 
-
-
     activate() {
         if (!this.currentUser) {
             this.openLogin();
diff --git a/src/app/layout/services/body-state-classes.service.ts b/src/app/layout/services/body-state-classes.service.ts
index bbc5ec8..f170c99 100644
--- a/src/app/layout/services/body-state-classes.service.ts
+++ b/src/app/layout/services/body-state-classes.service.ts
@@ -1,5 +1,5 @@
 import {Directive, Inject, Injectable} from "ng-forward";
-import {AUTH_EVENTS} from "./../../login/auth-events";
+import {AuthEvents} from "./../../login/auth-events";
 import {AuthService} from "./../../login/auth.service";
 import {HtmlUtils} from "../html-utils";
 
@@ -9,7 +9,7 @@ import {HtmlUtils} from "../html-utils";
  * eg:
  *    User Logged:
  *         - noosfero-user-logged
- *    Route States: 
+ *    Route States:
  *         - noosfero-route-main
  *         - noosfero-route-main.profile.info
  */
@@ -65,7 +65,7 @@ export class BodyStateClassesService {
 
     /**
      * Setup the initial state of the user-logged css class
-     * and adds events handlers to switch this class when the login events happens 
+     * and adds events handlers to switch this class when the login events happens
      */
     private setupUserLoggedClassToggle() {
         let bodyElement = this.getBodyElement();
@@ -76,18 +76,18 @@ export class BodyStateClassesService {
             bodyElement.addClass(BodyStateClassesService.USER_LOGGED_CLASSNAME);
         }
 
-        // listen to the AUTH_EVENTS.loginSuccess and AUTH_EVENTS.logoutSuccess
-        // to switch the css class which indicates user logged in 
-        this.$rootScope.$on(AUTH_EVENTS.loginSuccess, () => {
+        // to switch the css class which indicates user logged in
+        this.authService.subscribe(AuthEvents[AuthEvents.loginSuccess], () => {
             bodyElement.addClass(BodyStateClassesService.USER_LOGGED_CLASSNAME);
         });
-        this.$rootScope.$on(AUTH_EVENTS.logoutSuccess, () => {
+
+        this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
             bodyElement.removeClass(BodyStateClassesService.USER_LOGGED_CLASSNAME);
-        });
+        })
     }
 
     /**
-     * Returns the user 'body' html Element  
+     * Returns the user 'body' html Element
      */
     private getBodyElement(): ng.IAugmentedJQuery {
         if (this.bodyElement === null) {
@@ -95,4 +95,4 @@ export class BodyStateClassesService {
         }
         return this.bodyElement;
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/login/auth-events.ts b/src/app/login/auth-events.ts
index 875d139..f9d40d7 100644
--- a/src/app/login/auth-events.ts
+++ b/src/app/login/auth-events.ts
@@ -1,11 +1,3 @@
-export interface IAuthEvents {
-    loginSuccess: string;
-    loginFailed: string;
-    logoutSuccess: string;
+export enum AuthEvents {
+    loginSuccess, loginFailed, logoutSuccess
 }
-
-export const AUTH_EVENTS: IAuthEvents = {
-    loginSuccess: "auth-login-success",
-    loginFailed: "auth-login-failed",
-    logoutSuccess: "auth-logout-success"
-};
\ No newline at end of file
diff --git a/src/app/login/auth.service.ts b/src/app/login/auth.service.ts
index 3c39e20..f449dbd 100644
--- a/src/app/login/auth.service.ts
+++ b/src/app/login/auth.service.ts
@@ -1,20 +1,22 @@
-import {Injectable, Inject} from "ng-forward";
+import {Injectable, Inject, EventEmitter} from "ng-forward";
 
 import {NoosferoRootScope, UserResponse} from "./../shared/models/interfaces";
 import {SessionService} from "./session.service";
 
-import {AUTH_EVENTS, IAuthEvents} from "./auth-events";
+import {AuthEvents} from "./auth-events";
 
 @Injectable()
-@Inject("$q", "$http", "$rootScope", "SessionService", "$log", "AUTH_EVENTS")
+@Inject("$q", "$http", "SessionService", "$log")
 export class AuthService {
 
+    public loginSuccess: EventEmitter<noosfero.User> = new EventEmitter<noosfero.User>();
+    private loginFailed: EventEmitter<ng.IHttpPromiseCallbackArg<any>> = new EventEmitter<ng.IHttpPromiseCallbackArg<any>>();
+    private logoutSuccess: EventEmitter<noosfero.User> = new EventEmitter<noosfero.User>();
+
     constructor(private $q: ng.IQService,
         private $http: ng.IHttpService,
-        private $rootScope: NoosferoRootScope,
         private sessionService: SessionService,
-        private $log: ng.ILogService,
-        private auth_events: IAuthEvents) {
+        private $log: ng.ILogService) {
 
     }
 
@@ -27,8 +29,8 @@ export class AuthService {
     private loginSuccessCallback(response: ng.IHttpPromiseCallbackArg<UserResponse>) {
         this.$log.debug('AuthService.login [SUCCESS] response', response);
         let currentUser: noosfero.User = this.sessionService.create(response.data);
-        this.$rootScope.currentUser = currentUser;
-        this.$rootScope.$broadcast(this.auth_events.loginSuccess, currentUser);
+        this.loginSuccess.next(currentUser);
+
         return currentUser;
     }
 
@@ -40,15 +42,16 @@ export class AuthService {
 
     private loginFailedCallback(response: ng.IHttpPromiseCallbackArg<any>): any {
         this.$log.debug('AuthService.login [FAIL] response', response);
-        this.$rootScope.$broadcast(this.auth_events.loginFailed);
+        this.loginFailed.next(response);
         // return $q.reject(response);
         return null;
     }
 
     public logout() {
+        let user: noosfero.User = this.sessionService.currentUser();
         this.sessionService.destroy();
-        this.$rootScope.currentUser = undefined;
-        this.$rootScope.$broadcast(this.auth_events.logoutSuccess);
+
+        this.logoutSuccess.next(user);
         this.$http.jsonp('/account/logout'); // FIXME logout from noosfero to sync login state
     }
 
@@ -66,4 +69,13 @@ export class AuthService {
         }
         return (this.isAuthenticated() && authorizedRoles.indexOf(this.sessionService.currentUser().userRole) !== -1);
     }
-}
\ No newline at end of file
+
+    subscribe(eventName: string, fn: Function) {
+
+        if (this[eventName]) {
+            this[eventName].subscribe(fn);
+        } else {
+            throw new Error(`The event: ${eventName} not exists`);
+        }
+    }
+}
diff --git a/src/app/main/main.html b/src/app/main/main.html
index b735584..4964050 100644
--- a/src/app/main/main.html
+++ b/src/app/main/main.html
@@ -1,4 +1,4 @@
 <acme-navbar></acme-navbar>
 <!-- Sidebar Left -->
-<sidebar [visible]="true"></sidebar>
+<sidebar [visible]="false"></sidebar>
 <div class="content" ui-view="content"></div>
--
libgit2 0.21.2