Added hamburguer sidebar toggle button to show only after login

Michel Felipe
1 parent e59add5d
Showing 6 changed files with 52 additions and 43 deletions Show diff stats
src/app/layout/navbar/navbar.html
src/app/layout/navbar/navbar.ts
src/app/layout/services/body-state-classes.service.ts
src/app/login/auth-events.ts
src/app/login/auth.service.ts
src/app/main/main.html
 <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>
 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 &quot;../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();
 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 &quot;../html-utils&quot;;
  * 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
+}
-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
-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`);
+        }
+    }
+}
 <acme-navbar></acme-navbar>
 <!-- Sidebar Left -->
-<sidebar [visible]="true"></sidebar>
+<sidebar [visible]="false"></sidebar>
 <div class="content" ui-view="content"></div>
1	1	<nav class="navbar navbar-static-top navbar-inverse">
2	2	<div class="container-fluid">
3	3	<div class="navbar-header">
4		- <button type="button" class="navbar-toggle collapsed" (click)="ctrl.toggleCollapse()">
	4	+ <button type="button" class="navbar-toggle collapsed" (click)="ctrl.toggleCollapse()" ng-show="ctrl.showHamburguer">
5	5	<span class="sr-only">{{"navbar.toggle_menu" \| translate}}</span>
6	6	<i class="fa fa-bars"></i>
7	7	</button>
8	8	<a class="navbar-brand" ui-sref="main.environment.home">
9		- <span class="noosfero-logo"> </span>
	9	+ <span class="noosfero-logo"> </span>
10	10	<span class="noosfero-name">{{"noosfero.name" \| translate}}</span>
11	11	</a>
12	12	</div>
...	...
1	1	import {Component, Inject, EventEmitter, Input} from "ng-forward";
2	2	import {LanguageSelectorComponent} from "../language-selector/language-selector.component";
3		-import {SessionService, AuthService, AuthController, IAuthEvents, AUTH_EVENTS} from "./../../login";
	3	+import {SessionService, AuthService, AuthController, AuthEvents} from "./../../login";
4	4	import {SidebarNotificationService} from "../sidebar/sidebar.notification.service";
5	5
6	6	@Component({
...	...	@@ -9,11 +9,14 @@ import {SidebarNotificationService} from "../sidebar/sidebar.notification.servic
9	9	directives: [LanguageSelectorComponent],
10	10	providers: [AuthService, SessionService, SidebarNotificationService]
11	11	})
12		-@Inject("$uibModal", AuthService, "SessionService", "$scope", "$state", SidebarNotificationService)
	12	+@Inject("$uibModal", AuthService, "SessionService", "$state", SidebarNotificationService)
13	13	export class Navbar {
14	14
15	15	private currentUser: noosfero.User;
16	16	private modalInstance: any = null;
	17	+
	18	+ public showHamburguer: boolean = false;
	19	+
17	20	/**
18	21	*
19	22	*/
...	...	@@ -21,22 +24,26 @@ export class Navbar {
21	24	private $uibModal: any,
22	25	private authService: AuthService,
23	26	private session: SessionService,
24		- private $scope: ng.IScope,
25	27	private $state: ng.ui.IStateService,
26	28	private sidebarNotificationService: SidebarNotificationService
27	29	) {
28	30	this.currentUser = this.session.currentUser();
29	31
30		- this.$scope.$on(AUTH_EVENTS.loginSuccess, () => {
	32	+ this.showHamburguer = this.authService.isAuthenticated();
	33	+
	34	+ this.authService.loginSuccess.subscribe(() => {
31	35	if (this.modalInstance) {
32	36	this.modalInstance.close();
33	37	this.modalInstance = null;
34	38	}
35	39
36		- this.$state.go(this.$state.current, {}, { reload: true }); // TODO move to auth
	40	+ this.currentUser = this.session.currentUser();
	41	+ this.showHamburguer = true;
	42	+
	43	+ this.$state.go(this.$state.current, {}, { reload: true }); // TODO move to auth
37	44	});
38	45
39		- this.$scope.$on(AUTH_EVENTS.logoutSuccess, () => {
	46	+ this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
40	47	this.currentUser = this.session.currentUser();
41	48	});
42	49
...	...	@@ -60,8 +67,6 @@ export class Navbar {
60	67	this.$state.go(this.$state.current, {}, { reload: true }); // TODO move to auth
61	68	};
62	69
63		-
64		-
65	70	activate() {
66	71	if (!this.currentUser) {
67	72	this.openLogin();
...	...
1	1	import {Directive, Inject, Injectable} from "ng-forward";
2		-import {AUTH_EVENTS} from "./../../login/auth-events";
	2	+import {AuthEvents} from "./../../login/auth-events";
3	3	import {AuthService} from "./../../login/auth.service";
4	4	import {HtmlUtils} from "../html-utils";
5	5
...	...	@@ -9,7 +9,7 @@ import {HtmlUtils} from "../html-utils";
9	9	* eg:
10	10	* User Logged:
11	11	* - noosfero-user-logged
12		- * Route States:
	12	+ * Route States:
13	13	* - noosfero-route-main
14	14	* - noosfero-route-main.profile.info
15	15	*/
...	...	@@ -65,7 +65,7 @@ export class BodyStateClassesService {
65	65
66	66	/**
67	67	* Setup the initial state of the user-logged css class
68		- * and adds events handlers to switch this class when the login events happens
	68	+ * and adds events handlers to switch this class when the login events happens
69	69	*/
70	70	private setupUserLoggedClassToggle() {
71	71	let bodyElement = this.getBodyElement();
...	...	@@ -76,18 +76,18 @@ export class BodyStateClassesService {
76	76	bodyElement.addClass(BodyStateClassesService.USER_LOGGED_CLASSNAME);
77	77	}
78	78
79		- // listen to the AUTH_EVENTS.loginSuccess and AUTH_EVENTS.logoutSuccess
80		- // to switch the css class which indicates user logged in
81		- this.$rootScope.$on(AUTH_EVENTS.loginSuccess, () => {
	79	+ // to switch the css class which indicates user logged in
	80	+ this.authService.subscribe(AuthEvents[AuthEvents.loginSuccess], () => {
82	81	bodyElement.addClass(BodyStateClassesService.USER_LOGGED_CLASSNAME);
83	82	});
84		- this.$rootScope.$on(AUTH_EVENTS.logoutSuccess, () => {
	83	+
	84	+ this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
85	85	bodyElement.removeClass(BodyStateClassesService.USER_LOGGED_CLASSNAME);
86		- });
	86	+ })
87	87	}
88	88
89	89	/**
90		- * Returns the user 'body' html Element
	90	+ * Returns the user 'body' html Element
91	91	*/
92	92	private getBodyElement(): ng.IAugmentedJQuery {
93	93	if (this.bodyElement === null) {
...	...	@@ -95,4 +95,4 @@ export class BodyStateClassesService {
95	95	}
96	96	return this.bodyElement;
97	97	}
98		-}
99	98	\ No newline at end of file
	99	+}
...	...
1		-export interface IAuthEvents {
2		- loginSuccess: string;
3		- loginFailed: string;
4		- logoutSuccess: string;
	1	+export enum AuthEvents {
	2	+ loginSuccess, loginFailed, logoutSuccess
5	3	}
6		-
7		-export const AUTH_EVENTS: IAuthEvents = {
8		- loginSuccess: "auth-login-success",
9		- loginFailed: "auth-login-failed",
10		- logoutSuccess: "auth-logout-success"
11		-};
12	4	\ No newline at end of file
...	...
1		-import {Injectable, Inject} from "ng-forward";
	1	+import {Injectable, Inject, EventEmitter} from "ng-forward";
2	2
3	3	import {NoosferoRootScope, UserResponse} from "./../shared/models/interfaces";
4	4	import {SessionService} from "./session.service";
5	5
6		-import {AUTH_EVENTS, IAuthEvents} from "./auth-events";
	6	+import {AuthEvents} from "./auth-events";
7	7
8	8	@Injectable()
9		-@Inject("$q", "$http", "$rootScope", "SessionService", "$log", "AUTH_EVENTS")
	9	+@Inject("$q", "$http", "SessionService", "$log")
10	10	export class AuthService {
11	11
	12	+ public loginSuccess: EventEmitter<noosfero.User> = new EventEmitter<noosfero.User>();
	13	+ private loginFailed: EventEmitter<ng.IHttpPromiseCallbackArg<any>> = new EventEmitter<ng.IHttpPromiseCallbackArg<any>>();
	14	+ private logoutSuccess: EventEmitter<noosfero.User> = new EventEmitter<noosfero.User>();
	15	+
12	16	constructor(private $q: ng.IQService,
13	17	private $http: ng.IHttpService,
14		- private $rootScope: NoosferoRootScope,
15	18	private sessionService: SessionService,
16		- private $log: ng.ILogService,
17		- private auth_events: IAuthEvents) {
	19	+ private $log: ng.ILogService) {
18	20
19	21	}
20	22
...	...	@@ -27,8 +29,8 @@ export class AuthService {
27	29	private loginSuccessCallback(response: ng.IHttpPromiseCallbackArg<UserResponse>) {
28	30	this.$log.debug('AuthService.login [SUCCESS] response', response);
29	31	let currentUser: noosfero.User = this.sessionService.create(response.data);
30		- this.$rootScope.currentUser = currentUser;
31		- this.$rootScope.$broadcast(this.auth_events.loginSuccess, currentUser);
	32	+ this.loginSuccess.next(currentUser);
	33	+
32	34	return currentUser;
33	35	}
34	36
...	...	@@ -40,15 +42,16 @@ export class AuthService {
40	42
41	43	private loginFailedCallback(response: ng.IHttpPromiseCallbackArg<any>): any {
42	44	this.$log.debug('AuthService.login [FAIL] response', response);
43		- this.$rootScope.$broadcast(this.auth_events.loginFailed);
	45	+ this.loginFailed.next(response);
44	46	// return $q.reject(response);
45	47	return null;
46	48	}
47	49
48	50	public logout() {
	51	+ let user: noosfero.User = this.sessionService.currentUser();
49	52	this.sessionService.destroy();
50		- this.$rootScope.currentUser = undefined;
51		- this.$rootScope.$broadcast(this.auth_events.logoutSuccess);
	53	+
	54	+ this.logoutSuccess.next(user);
52	55	this.$http.jsonp('/account/logout'); // FIXME logout from noosfero to sync login state
53	56	}
54	57
...	...	@@ -66,4 +69,13 @@ export class AuthService {
66	69	}
67	70	return (this.isAuthenticated() && authorizedRoles.indexOf(this.sessionService.currentUser().userRole) !== -1);
68	71	}
69		-}
70	72	\ No newline at end of file
	73	+
	74	+ subscribe(eventName: string, fn: Function) {
	75	+
	76	+ if (this[eventName]) {
	77	+ this[eventName].subscribe(fn);
	78	+ } else {
	79	+ throw new Error(`The event: ${eventName} not exists`);
	80	+ }
	81	+ }
	82	+}
...	...
1	1	<acme-navbar></acme-navbar>
2	2	<!-- Sidebar Left -->
3		-<sidebar [visible]="true"></sidebar>
	3	+<sidebar [visible]="false"></sidebar>
4	4	<div class="content" ui-view="content"></div>
...	...