Commit f5d03df54f790d144140d36fcef83ed8da0b0f6a

Authored by Leonardo Merlin
1 parent c31c2869

auth: add login/logout. (no social yet)

@@ -15,6 +15,7 @@ @@ -15,6 +15,7 @@
15 "bootstrap-sass-official": "~3.3.4", 15 "bootstrap-sass-official": "~3.3.4",
16 "jquery": "~2.1.4", 16 "jquery": "~2.1.4",
17 "modernizr": "~2.8.3", 17 "modernizr": "~2.8.3",
  18 + "ngstorage": "~0.3.9",
18 "open-sans-fontface": "~1.4.2" 19 "open-sans-fontface": "~1.4.2"
19 }, 20 },
20 "devDependencies": { 21 "devDependencies": {
src/app/components/auth-user/auth-user.directive.js 0 → 100644
@@ -0,0 +1,60 @@ @@ -0,0 +1,60 @@
  1 +(function() {
  2 + 'use strict';
  3 +
  4 + angular
  5 + .module('dialoga')
  6 + .directive('authUser', authUser);
  7 +
  8 + /** @ngInject */
  9 + function authUser() {
  10 +
  11 + /** @ngInject */
  12 + function AuthUserController($scope, AuthService, Session, AUTH_EVENTS, $log) {
  13 + $log.debug('AuthUserController');
  14 +
  15 + var vm = this;
  16 +
  17 + vm.$scope = $scope;
  18 + vm.AuthService = AuthService;
  19 + vm.Session = Session;
  20 + vm.AUTH_EVENTS = AUTH_EVENTS;
  21 + vm.$log = $log;
  22 +
  23 + vm.init();
  24 + }
  25 +
  26 + AuthUserController.prototype.init = function (){
  27 + var vm = this;
  28 +
  29 + vm.currentUser = vm.Session.getCurrentUser();
  30 +
  31 + // handle login
  32 + vm.$scope.$on(vm.AUTH_EVENTS.loginSuccess, function () {
  33 + vm.currentUser = vm.Session.getCurrentUser();
  34 + });
  35 +
  36 + // handle logout
  37 + vm.$scope.$on(vm.AUTH_EVENTS.logoutSuccess, function () {
  38 + vm.currentUser = vm.Session.getCurrentUser();
  39 + });
  40 + };
  41 +
  42 + AuthUserController.prototype.onClickLogout = function (){
  43 + var vm = this;
  44 +
  45 + vm.AuthService.logout();
  46 + };
  47 +
  48 + var directive = {
  49 + restrict: 'E',
  50 + templateUrl: 'app/components/auth-user/auth-user.html',
  51 + controller: AuthUserController,
  52 + controllerAs: 'vm',
  53 + bindToController: true
  54 + };
  55 +
  56 + return directive;
  57 +
  58 + }
  59 +
  60 +})();
src/app/components/auth-user/auth-user.html 0 → 100644
@@ -0,0 +1,15 @@ @@ -0,0 +1,15 @@
  1 +<div class="auth-user">
  2 + <div ng-if="vm.currentUser" class="pull-right">
  3 + <span>{{::vm.currentUser.login}}</span>
  4 + <span>|</span>
  5 + <button type="button" class="btn btn-link" ng-click="vm.onClickLogout()">Sair</button>
  6 + </div>
  7 +
  8 + <div ng-if="!vm.currentUser">
  9 + <button type="button" class="btn btn-link pull-right" ui-sref="entrar">
  10 + <!-- <span class="icon icon-user" aria-hidden="true"></span> -->
  11 + <span class="glyphicon glyphicon-user"></span>
  12 + Entrar
  13 + </button>
  14 + </div>
  15 +</div>
src/app/components/auth-user/auth-user.scss 0 → 100644
@@ -0,0 +1,3 @@ @@ -0,0 +1,3 @@
  1 +.auth-user {
  2 +
  3 +}
src/app/components/auth/auth.service.js
@@ -10,18 +10,9 @@ @@ -10,18 +10,9 @@
10 /** @ngInject */ 10 /** @ngInject */
11 function AuthService($http, $rootScope, Session, AUTH_EVENTS, API, $log) { 11 function AuthService($http, $rootScope, Session, AUTH_EVENTS, API, $log) {
12 12
13 - var service = {  
14 - login: login,  
15 - logout: logout,  
16 - isAuthenticated: isAuthenticated,  
17 - isAuthorized: isAuthorized  
18 - };  
19 -  
20 - $log.debug('AuthService', service);  
21 - return service;  
22 -  
23 function login (credentials) { 13 function login (credentials) {
24 - var url = API.host + '/api/v1/login'; 14 + var hostProd = 'http://login.dialoga.gov.br';
  15 + var url = hostProd + '/api/v1/login';
25 var encodedData = 'login=' + credentials.username + '&password=' + credentials.password; 16 var encodedData = 'login=' + credentials.username + '&password=' + credentials.password;
26 17
27 return $http 18 return $http
@@ -40,7 +31,10 @@ @@ -40,7 +31,10 @@
40 } 31 }
41 32
42 function logout () { 33 function logout () {
  34 +
43 Session.destroy(); 35 Session.destroy();
  36 +
  37 + $rootScope.$broadcast(AUTH_EVENTS.logoutSuccess);
44 } 38 }
45 39
46 function isAuthenticated () { 40 function isAuthenticated () {
@@ -54,42 +48,42 @@ @@ -54,42 +48,42 @@
54 48
55 return (service.isAuthenticated() && authorizedRoles.indexOf(Session.userRole) !== -1); 49 return (service.isAuthenticated() && authorizedRoles.indexOf(Session.userRole) !== -1);
56 } 50 }
  51 +
  52 + var service = {
  53 + login: login,
  54 + logout: logout,
  55 + isAuthenticated: isAuthenticated,
  56 + isAuthorized: isAuthorized
  57 + };
  58 +
  59 + $log.debug('AuthService', service);
  60 + return service;
57 } 61 }
58 62
59 /** @ngInject */ 63 /** @ngInject */
60 - function Session($cookies, $log) { 64 + function Session($localStorage, $log) {
61 65
62 var service = {}; 66 var service = {};
63 67
64 - var currentUser = $cookies.getObject('currentUser') || {}; 68 + // $localStorage.currentUser = $localStorage.currentUser || null;
65 69
66 service.create = function(data) { 70 service.create = function(data) {
67 71
68 - currentUser.id = data.id;  
69 - currentUser.email = data.email;  
70 - currentUser.login = data.login;  
71 - currentUser.permissions = data.permissions;  
72 - currentUser.person = data.person;  
73 - currentUser.private_token = data.private_token;  
74 - currentUser.activated = data.activated;  
75 -  
76 - $cookies.putObject('currentUser', currentUser); 72 + $localStorage.currentUser = data;
  73 + $log.debug('User session created.', $localStorage.currentUser);
77 74
78 - $log.debug('User session created.', currentUser);  
79 - return currentUser; 75 + return $localStorage.currentUser;
80 }; 76 };
81 77
82 service.destroy = function() { 78 service.destroy = function() {
83 79
84 - currentUser = {};  
85 -  
86 - $cookies.remove('currentUser'); 80 + delete $localStorage.currentUser;
87 81
88 $log.debug('User session destroyed.'); 82 $log.debug('User session destroyed.');
89 }; 83 };
90 84
91 service.getCurrentUser = function () { 85 service.getCurrentUser = function () {
92 - return currentUser; 86 + return $localStorage.currentUser;
93 }; 87 };
94 88
95 return service; 89 return service;
src/app/components/navbar/navbar.html
1 <nav id="navigation" class="header-navbar navbar navbar-static-top" role="navigation"> 1 <nav id="navigation" class="header-navbar navbar navbar-static-top" role="navigation">
2 - <div class="container-fluid">  
3 - <div class="navbar-header">  
4 - <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">  
5 - <span class="sr-only">Alternar menu de navegação</span>  
6 - <span class="icon-bar" aria-hidden="true"></span>  
7 - <span class="icon-bar" aria-hidden="true"></span>  
8 - <span class="icon-bar" aria-hidden="true"></span>  
9 - </button>  
10 - <a class="navbar-brand" ui-sref="inicio">  
11 - <img src="/assets/images/logo.png" alt="Dialoga Brasil | O país fica melhor quando você participa" />  
12 - <!-- <span class="glyphicon glyphicon-home"></span> Início -->  
13 - </a>  
14 - </div> 2 + <div class="navbar-header">
  3 + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
  4 + <span class="sr-only">Alternar menu de navegação</span>
  5 + <span class="icon-bar" aria-hidden="true"></span>
  6 + <span class="icon-bar" aria-hidden="true"></span>
  7 + <span class="icon-bar" aria-hidden="true"></span>
  8 + </button>
  9 + <a class="navbar-brand" ui-sref="inicio">
  10 + <img src="/assets/images/logo.png" alt="Dialoga Brasil | O país fica melhor quando você participa" />
  11 + <!-- <span class="glyphicon glyphicon-home"></span> Início -->
  12 + </a>
  13 + </div>
15 14
16 - <div id="navbar-collapse" class="collapse navbar-collapse">  
17 - <ul class="nav navbar-nav">  
18 - <li><a ui-sref="sobre">Sobre</a></li>  
19 - <li><a ui-sref="programas">Programas</a></li>  
20 - <li><a ui-sref="propostas">Propostas</a></li>  
21 - <!-- <li><a ui-sref="ranking">Ranking</a></li> -->  
22 - <li><a ui-sref="duvidas">Dúvidas</a></li>  
23 - <!-- <li><a ui-sref="respostas">Respostas</a></li> -->  
24 - </ul>  
25 - </div> 15 + <div id="navbar-collapse" class="collapse navbar-collapse">
  16 + <ul class="nav navbar-nav">
  17 + <li><a ui-sref="sobre">Sobre</a></li>
  18 + <li><a ui-sref="programas">Programas</a></li>
  19 + <li><a ui-sref="propostas">Propostas</a></li>
  20 + <!-- <li><a ui-sref="ranking">Ranking</a></li> -->
  21 + <li><a ui-sref="duvidas">Dúvidas</a></li>
  22 + <!-- <li><a ui-sref="respostas">Respostas</a></li> -->
  23 + </ul>
26 </div> 24 </div>
27 </nav> 25 </nav>
src/app/components/navbar/navbar.scss
@@ -2,6 +2,16 @@ @@ -2,6 +2,16 @@
2 2
3 .navbar-brand { 3 .navbar-brand {
4 height: auto; 4 height: auto;
  5 + padding-bottom: 0;
  6 + padding-left: 0;
  7 + }
  8 +
  9 + .navbar-toggle {
  10 + margin-top: 20px;
  11 +
  12 + .icon-bar {
  13 + height: 3px;
  14 + }
5 } 15 }
6 16
7 .navbar-nav a { 17 .navbar-nav a {
src/app/index.config.js
@@ -3,13 +3,13 @@ @@ -3,13 +3,13 @@
3 3
4 angular 4 angular
5 .module('dialoga') 5 .module('dialoga')
6 - .config(configAuthInterceptor) 6 + .config(configHeadersInterceptor)
7 .config(configLocationProvider) 7 .config(configLocationProvider)
8 .config(configBreadcrumbProvider) 8 .config(configBreadcrumbProvider)
9 .config(config); 9 .config(config);
10 10
11 /** @ngInject */ 11 /** @ngInject */
12 - function configAuthInterceptor ($httpProvider){ 12 + function configHeadersInterceptor ($httpProvider){
13 13
14 //Reset headers to avoid OPTIONS request (aka preflight) 14 //Reset headers to avoid OPTIONS request (aka preflight)
15 $httpProvider.defaults.headers.common = {}; 15 $httpProvider.defaults.headers.common = {};
src/app/index.module.js
@@ -2,6 +2,6 @@ @@ -2,6 +2,6 @@
2 'use strict'; 2 'use strict';
3 3
4 angular 4 angular
5 - .module('dialoga', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ui.router', 'socialLinks', 'slugifier', 'ncy-angular-breadcrumb']); 5 + .module('dialoga', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ui.router', 'ngStorage', 'socialLinks', 'slugifier', 'ncy-angular-breadcrumb']);
6 6
7 })(); 7 })();
src/app/index.run.js
@@ -13,7 +13,7 @@ @@ -13,7 +13,7 @@
13 .run(runBlock); 13 .run(runBlock);
14 14
15 /** @ngInject */ 15 /** @ngInject */
16 - function runAuth($rootScope, $cookies, USER_ROLES, AUTH_EVENTS, AuthService, $log) { 16 + function runAuth($rootScope, $localStorage, USER_ROLES, AUTH_EVENTS, AuthService, $log) {
17 17
18 // Listner url/state changes, and check permission 18 // Listner url/state changes, and check permission
19 $rootScope.$on('$stateChangeStart', function(event, next) { 19 $rootScope.$on('$stateChangeStart', function(event, next) {
@@ -38,6 +38,8 @@ @@ -38,6 +38,8 @@
38 } 38 }
39 }); 39 });
40 40
  41 + $rootScope.currentUser = $localStorage.currentUser;
  42 +
41 $log.debug('[RUN] Auth end.'); 43 $log.debug('[RUN] Auth end.');
42 } 44 }
43 45
src/app/pages/auth/auth.controller.js
@@ -6,12 +6,13 @@ @@ -6,12 +6,13 @@
6 .controller('AuthPageController', AuthPageController); 6 .controller('AuthPageController', AuthPageController);
7 7
8 /** @ngInject */ 8 /** @ngInject */
9 - function AuthPageController($rootScope, AUTH_EVENTS, AuthService, Session, $log) { 9 + function AuthPageController($scope, $rootScope, AUTH_EVENTS, AuthService, Session, $log) {
10 $log.debug('AuthPageController'); 10 $log.debug('AuthPageController');
11 11
12 var vm = this; 12 var vm = this;
13 13
14 vm.$rootScope = $rootScope; 14 vm.$rootScope = $rootScope;
  15 + vm.$scope = $scope;
15 vm.AUTH_EVENTS = AUTH_EVENTS; 16 vm.AUTH_EVENTS = AUTH_EVENTS;
16 vm.AuthService = AuthService; 17 vm.AuthService = AuthService;
17 vm.Session = Session; 18 vm.Session = Session;
@@ -27,15 +28,33 @@ @@ -27,15 +28,33 @@
27 vm.credentials = {}; 28 vm.credentials = {};
28 29
29 // attach events 30 // attach events
  31 + vm.currentUser = vm.Session.getCurrentUser();
30 32
  33 + // handle login
  34 + vm.$scope.$on(vm.AUTH_EVENTS.loginSuccess, function () {
  35 + vm.currentUser = vm.Session.getCurrentUser();
  36 + });
  37 +
  38 + // handle logout
  39 + vm.$scope.$on(vm.AUTH_EVENTS.logoutSuccess, function () {
  40 + vm.currentUser = vm.Session.getCurrentUser();
  41 + });
31 // ... 42 // ...
32 }; 43 };
33 44
  45 +
  46 + AuthPageController.prototype.onClickLogout = function (){
  47 + var vm = this;
  48 +
  49 + vm.AuthService.logout();
  50 + };
  51 +
34 AuthPageController.prototype.login = function(credentials) { 52 AuthPageController.prototype.login = function(credentials) {
35 var vm = this; 53 var vm = this;
36 54
37 - vm.AuthService.login(credentials).then(function(/*user*/) { 55 + vm.AuthService.login(credentials).then(function(user) {
38 // handle view 56 // handle view
  57 + vm.$log.debug('user', user);
39 }, function() { 58 }, function() {
40 // handle view 59 // handle view
41 }); 60 });
src/app/pages/auth/signin.html
1 <section role="main" class="section-gray auth-content"> 1 <section role="main" class="section-gray auth-content">
2 <div class="container"> 2 <div class="container">
3 - <div class="row">  
4 - <div class="col-sm-8 col-sm-offset-2">  
5 - <h2>Identifique-se</h2>  
6 - <form name="loginForm" ng-submit="pageSignin.login(pageSignin.credentials)">  
7 - <div class="form-group">  
8 - <label for="inputUsername" class="sr-only">E-mail:</label>  
9 - <div class="input-group">  
10 - <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>  
11 - <input type="text" id="inputUsername" class="form-control" placeholder="E-mail" required="" autofocus="" ng-model="pageSignin.credentials.username"> 3 +
  4 + <div ng-if="pageSignin.currentUser">
  5 + <div class="row">
  6 + <div class="col-sm-8 col-sm-offset-2">
  7 + <h3>Você está logado!</h3>
  8 + <button type="button" ng-click="pageSignin.onClickLogout()" class="btn btn-primary">Sair</button>
  9 + </div>
  10 + </div>
  11 + </div>
  12 +
  13 + <div ng-if="!pageSignin.currentUser">
  14 + <div class="row">
  15 + <div class="col-sm-8 col-sm-offset-2">
  16 + <h2>Identifique-se</h2>
  17 + <form name="loginForm" ng-submit="pageSignin.login(pageSignin.credentials)">
  18 + <div class="form-group">
  19 + <label for="inputUsername" class="sr-only">E-mail:</label>
  20 + <div class="input-group">
  21 + <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
  22 + <input type="text" id="inputUsername" class="form-control" placeholder="E-mail" required="" autofocus="" ng-model="pageSignin.credentials.username">
  23 + </div>
  24 + </div>
  25 + <div class="form-group">
  26 + <label for="inputPassword" class="sr-only">Senha:</label>
  27 + <div class="input-group">
  28 + <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
  29 + <input type="password" id="inputPassword" class="form-control" placeholder="Senha" required="" ng-model="pageSignin.credentials.password">
  30 + </div>
12 </div> 31 </div>
13 - </div>  
14 - <div class="form-group">  
15 - <label for="inputPassword" class="sr-only">Senha:</label>  
16 - <div class="input-group">  
17 - <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>  
18 - <input type="password" id="inputPassword" class="form-control" placeholder="Senha" required="" ng-model="pageSignin.credentials.password"> 32 + <div class="form-group">
  33 + <button class="btn btn-lg btn-primary btn-block" type="submit">Entrar</button>
19 </div> 34 </div>
20 - </div>  
21 - <div class="form-group">  
22 - <button class="btn btn-lg btn-primary btn-block" type="submit">Entrar</button>  
23 - </div>  
24 - </form> 35 + </form>
  36 + </div>
25 </div> 37 </div>
26 - </div>  
27 - <div class="row">  
28 - <div class="col-sm-8 col-sm-offset-2">  
29 - <hr class="separator-or"></hr> 38 + <div class="row">
  39 + <div class="col-sm-8 col-sm-offset-2">
  40 + <hr class="separator-or"></hr>
  41 + </div>
30 </div> 42 </div>
31 - </div>  
32 - <div class="row">  
33 - <div class="col-sm-8 col-sm-offset-2">  
34 - <button class="btn btn-lg btn-link btn-block" type="button" ui-sref="cadastrar">Cadastre-se</button> 43 + <div class="row">
  44 + <div class="col-sm-8 col-sm-offset-2">
  45 + <button class="btn btn-lg btn-link btn-block" type="button" ui-sref="cadastrar">Cadastre-se</button>
  46 + </div>
35 </div> 47 </div>
36 </div> 48 </div>
37 </div> 49 </div>
src/app/pages/header/header.html
@@ -2,25 +2,19 @@ @@ -2,25 +2,19 @@
2 2
3 <div class="row"> 3 <div class="row">
4 <div class="col-sm-12"> 4 <div class="col-sm-12">
5 -  
6 - <div class="accessibility-wrapper">  
7 -  
8 - <button type="button" class="btn btn-link pull-right" ui-sref="entrar">  
9 - <span class="icon icon-user" aria-hidden="true"></span>  
10 - Entrar  
11 - </button>  
12 - </div> 5 + <auth-user></auth-user>
13 </div> 6 </div>
14 </div> 7 </div>
15 8
16 <div class="row"> 9 <div class="row">
17 - <app-navbar></app-navbar> 10 + <div class="col-sm-12">
  11 + <app-navbar></app-navbar>
  12 + </div>
18 </div> 13 </div>
19 14
20 - <!-- TODO: breadcrumb -->  
21 - <!-- <ol class="breadcrumb">  
22 - <li><a href="#">Home</a></li>  
23 - <li><a href="#">Library</a></li>  
24 - <li class="active">Data</li>  
25 - </ol> --> 15 + <div class="row">
  16 + <div class="col-sm-12">
  17 + <div ncy-breadcrumb></div>
  18 + </div>
  19 + </div>
26 </header> 20 </header>
src/app/pages/programas/programa.html
1 <div class="page--conheca-o-programa"> 1 <div class="page--conheca-o-programa">
2 <section> 2 <section>
3 <div class="container"> 3 <div class="container">
4 - <div ng-if="pageProgramaContent.article && pageProgramaContent.article.title">  
5 - <div ncy-breadcrumb></div>  
6 - </div>  
7 - </div>  
8 - </section>  
9 -  
10 - <section>  
11 - <div class="container">  
12 <div ng-if="!pageProgramaContent.article.body"> 4 <div ng-if="!pageProgramaContent.article.body">
13 <div ng-if="!pageProgramaContent.error" class="alert alert-info" role="alert">Carregando detalhes sobre o progama...</div> 5 <div ng-if="!pageProgramaContent.error" class="alert alert-info" role="alert">Carregando detalhes sobre o progama...</div>
14 <div ng-if="pageProgramaContent.error" class="alert alert-warning" role="alert">{{pageProgramaContent}}</div> 6 <div ng-if="pageProgramaContent.error" class="alert alert-warning" role="alert">{{pageProgramaContent}}</div>
src/index.html
@@ -40,6 +40,7 @@ @@ -40,6 +40,7 @@
40 <div ui-view="header"></div> 40 <div ui-view="header"></div>
41 <div id="content" ui-view="main"></div> 41 <div id="content" ui-view="main"></div>
42 <div ui-view="footer"></div> 42 <div ui-view="footer"></div>
  43 +
43 <div id="footer-brasil"></div> 44 <div id="footer-brasil"></div>
44 45
45 <!-- build:js(src) scripts/vendor.js --> 46 <!-- build:js(src) scripts/vendor.js -->