Download as
Browse Code »

Commit 4c39bd751dc0c6879c67090a379071d10177b703

Authored by Michel Felipe
1 parent e59add5d
Exists in master and in 26 other branches activities_block, btn-new-post, cosmetic_changes_people_and_communities_block, edit-blocks, edit-header-footer, env-tags-block, forgot_password, layout_support, list_articles_on_blog, loading-indicator-component, login_modal, login_modal_improve, person_info_block, profile-article-resolvers, profile-blocks-sass, profile_description_block_component, profile_page_improvements, recent-activities, remove-article-confirmation, skin-small-change, staging, tags-block, theme-skin-yellow, translations, updated_signup_page, users_profile_page

Added hamburguer sidebar toggle button to show only after login

Showing 6 changed files with 52 additions and 43 deletions   Show diff stats
src/app/layout/navbar/navbar.html
  Diff comments   View file @4c39bd7
1 <nav class="navbar navbar-static-top navbar-inverse"> 1 <nav class="navbar navbar-static-top navbar-inverse">
2 <div class="container-fluid"> 2 <div class="container-fluid">
3 <div class="navbar-header"> 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 <span class="sr-only">{{"navbar.toggle_menu" | translate}}</span> 5 <span class="sr-only">{{"navbar.toggle_menu" | translate}}</span>
6 <i class="fa fa-bars"></i> 6 <i class="fa fa-bars"></i>
7 </button> 7 </button>
8 <a class="navbar-brand" ui-sref="main.environment.home"> 8 <a class="navbar-brand" ui-sref="main.environment.home">
9 - <span class="noosfero-logo"> </span> 9 + <span class="noosfero-logo"> </span>
10 <span class="noosfero-name">{{"noosfero.name" | translate}}</span> 10 <span class="noosfero-name">{{"noosfero.name" | translate}}</span>
11 </a> 11 </a>
12 </div> 12 </div>
src/app/layout/navbar/navbar.ts
  Diff comments   View file @4c39bd7
1 import {Component, Inject, EventEmitter, Input} from "ng-forward"; 1 import {Component, Inject, EventEmitter, Input} from "ng-forward";
2 import {LanguageSelectorComponent} from "../language-selector/language-selector.component"; 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 import {SidebarNotificationService} from "../sidebar/sidebar.notification.service"; 4 import {SidebarNotificationService} from "../sidebar/sidebar.notification.service";
5 5
6 @Component({ 6 @Component({
@@ -9,11 +9,14 @@ import {SidebarNotificationService} from &quot;../sidebar/sidebar.notification.servic @@ -9,11 +9,14 @@ import {SidebarNotificationService} from &quot;../sidebar/sidebar.notification.servic
9 directives: [LanguageSelectorComponent], 9 directives: [LanguageSelectorComponent],
10 providers: [AuthService, SessionService, SidebarNotificationService] 10 providers: [AuthService, SessionService, SidebarNotificationService]
11 }) 11 })
12 -@Inject("$uibModal", AuthService, "SessionService", "$scope", "$state", SidebarNotificationService) 12 +@Inject("$uibModal", AuthService, "SessionService", "$state", SidebarNotificationService)
13 export class Navbar { 13 export class Navbar {
14 14
15 private currentUser: noosfero.User; 15 private currentUser: noosfero.User;
16 private modalInstance: any = null; 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,22 +24,26 @@ export class Navbar {
21 private $uibModal: any, 24 private $uibModal: any,
22 private authService: AuthService, 25 private authService: AuthService,
23 private session: SessionService, 26 private session: SessionService,
24 - private $scope: ng.IScope,  
25 private $state: ng.ui.IStateService, 27 private $state: ng.ui.IStateService,
26 private sidebarNotificationService: SidebarNotificationService 28 private sidebarNotificationService: SidebarNotificationService
27 ) { 29 ) {
28 this.currentUser = this.session.currentUser(); 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 if (this.modalInstance) { 35 if (this.modalInstance) {
32 this.modalInstance.close(); 36 this.modalInstance.close();
33 this.modalInstance = null; 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 this.currentUser = this.session.currentUser(); 47 this.currentUser = this.session.currentUser();
41 }); 48 });
42 49
@@ -60,8 +67,6 @@ export class Navbar { @@ -60,8 +67,6 @@ export class Navbar {
60 this.$state.go(this.$state.current, {}, { reload: true }); // TODO move to auth 67 this.$state.go(this.$state.current, {}, { reload: true }); // TODO move to auth
61 }; 68 };
62 69
63 -  
64 -  
65 activate() { 70 activate() {
66 if (!this.currentUser) { 71 if (!this.currentUser) {
67 this.openLogin(); 72 this.openLogin();
src/app/layout/services/body-state-classes.service.ts
  Diff comments   View file @4c39bd7
1 import {Directive, Inject, Injectable} from "ng-forward"; 1 import {Directive, Inject, Injectable} from "ng-forward";
2 -import {AUTH_EVENTS} from "./../../login/auth-events"; 2 +import {AuthEvents} from "./../../login/auth-events";
3 import {AuthService} from "./../../login/auth.service"; 3 import {AuthService} from "./../../login/auth.service";
4 import {HtmlUtils} from "../html-utils"; 4 import {HtmlUtils} from "../html-utils";
5 5
@@ -9,7 +9,7 @@ import {HtmlUtils} from &quot;../html-utils&quot;; @@ -9,7 +9,7 @@ import {HtmlUtils} from &quot;../html-utils&quot;;
9 * eg: 9 * eg:
10 * User Logged: 10 * User Logged:
11 * - noosfero-user-logged 11 * - noosfero-user-logged
12 - * Route States: 12 + * Route States:
13 * - noosfero-route-main 13 * - noosfero-route-main
14 * - noosfero-route-main.profile.info 14 * - noosfero-route-main.profile.info
15 */ 15 */
@@ -65,7 +65,7 @@ export class BodyStateClassesService { @@ -65,7 +65,7 @@ export class BodyStateClassesService {
65 65
66 /** 66 /**
67 * Setup the initial state of the user-logged css class 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 private setupUserLoggedClassToggle() { 70 private setupUserLoggedClassToggle() {
71 let bodyElement = this.getBodyElement(); 71 let bodyElement = this.getBodyElement();
@@ -76,18 +76,18 @@ export class BodyStateClassesService { @@ -76,18 +76,18 @@ export class BodyStateClassesService {
76 bodyElement.addClass(BodyStateClassesService.USER_LOGGED_CLASSNAME); 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 bodyElement.addClass(BodyStateClassesService.USER_LOGGED_CLASSNAME); 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 bodyElement.removeClass(BodyStateClassesService.USER_LOGGED_CLASSNAME); 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 private getBodyElement(): ng.IAugmentedJQuery { 92 private getBodyElement(): ng.IAugmentedJQuery {
93 if (this.bodyElement === null) { 93 if (this.bodyElement === null) {
@@ -95,4 +95,4 @@ export class BodyStateClassesService { @@ -95,4 +95,4 @@ export class BodyStateClassesService {
95 } 95 }
96 return this.bodyElement; 96 return this.bodyElement;
97 } 97 }
98 -}  
99 \ No newline at end of file 98 \ No newline at end of file
  99 +}
src/app/login/auth-events.ts
  Diff comments   View file @4c39bd7
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 \ No newline at end of file 4 \ No newline at end of file
src/app/login/auth.service.ts
  Diff comments   View file @4c39bd7
1 -import {Injectable, Inject} from "ng-forward"; 1 +import {Injectable, Inject, EventEmitter} from "ng-forward";
2 2
3 import {NoosferoRootScope, UserResponse} from "./../shared/models/interfaces"; 3 import {NoosferoRootScope, UserResponse} from "./../shared/models/interfaces";
4 import {SessionService} from "./session.service"; 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 @Injectable() 8 @Injectable()
9 -@Inject("$q", "$http", "$rootScope", "SessionService", "$log", "AUTH_EVENTS") 9 +@Inject("$q", "$http", "SessionService", "$log")
10 export class AuthService { 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 constructor(private $q: ng.IQService, 16 constructor(private $q: ng.IQService,
13 private $http: ng.IHttpService, 17 private $http: ng.IHttpService,
14 - private $rootScope: NoosferoRootScope,  
15 private sessionService: SessionService, 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,8 +29,8 @@ export class AuthService {
27 private loginSuccessCallback(response: ng.IHttpPromiseCallbackArg<UserResponse>) { 29 private loginSuccessCallback(response: ng.IHttpPromiseCallbackArg<UserResponse>) {
28 this.$log.debug('AuthService.login [SUCCESS] response', response); 30 this.$log.debug('AuthService.login [SUCCESS] response', response);
29 let currentUser: noosfero.User = this.sessionService.create(response.data); 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 return currentUser; 34 return currentUser;
33 } 35 }
34 36
@@ -40,15 +42,16 @@ export class AuthService { @@ -40,15 +42,16 @@ export class AuthService {
40 42
41 private loginFailedCallback(response: ng.IHttpPromiseCallbackArg<any>): any { 43 private loginFailedCallback(response: ng.IHttpPromiseCallbackArg<any>): any {
42 this.$log.debug('AuthService.login [FAIL] response', response); 44 this.$log.debug('AuthService.login [FAIL] response', response);
43 - this.$rootScope.$broadcast(this.auth_events.loginFailed); 45 + this.loginFailed.next(response);
44 // return $q.reject(response); 46 // return $q.reject(response);
45 return null; 47 return null;
46 } 48 }
47 49
48 public logout() { 50 public logout() {
  51 + let user: noosfero.User = this.sessionService.currentUser();
49 this.sessionService.destroy(); 52 this.sessionService.destroy();
50 - this.$rootScope.currentUser = undefined;  
51 - this.$rootScope.$broadcast(this.auth_events.logoutSuccess); 53 +
  54 + this.logoutSuccess.next(user);
52 this.$http.jsonp('/account/logout'); // FIXME logout from noosfero to sync login state 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,4 +69,13 @@ export class AuthService {
66 } 69 }
67 return (this.isAuthenticated() && authorizedRoles.indexOf(this.sessionService.currentUser().userRole) !== -1); 70 return (this.isAuthenticated() && authorizedRoles.indexOf(this.sessionService.currentUser().userRole) !== -1);
68 } 71 }
69 -}  
70 \ No newline at end of file 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 +}
src/app/main/main.html
  Diff comments   View file @4c39bd7
1 <acme-navbar></acme-navbar> 1 <acme-navbar></acme-navbar>
2 <!-- Sidebar Left --> 2 <!-- Sidebar Left -->
3 -<sidebar [visible]="true"></sidebar> 3 +<sidebar [visible]="false"></sidebar>
4 <div class="content" ui-view="content"></div> 4 <div class="content" ui-view="content"></div>