Commit f5d03df54f790d144140d36fcef83ed8da0b0f6a

Authored by Leonardo Merlin
1 parent c31c2869

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

bower.json
... ... @@ -15,6 +15,7 @@
15 15 "bootstrap-sass-official": "~3.3.4",
16 16 "jquery": "~2.1.4",
17 17 "modernizr": "~2.8.3",
  18 + "ngstorage": "~0.3.9",
18 19 "open-sans-fontface": "~1.4.2"
19 20 },
20 21 "devDependencies": {
... ...
src/app/components/auth-user/auth-user.directive.js 0 → 100644
... ... @@ -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 @@
  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 @@
  1 +.auth-user {
  2 +
  3 +}
... ...
src/app/components/auth/auth.service.js
... ... @@ -10,18 +10,9 @@
10 10 /** @ngInject */
11 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 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 16 var encodedData = 'login=' + credentials.username + '&password=' + credentials.password;
26 17  
27 18 return $http
... ... @@ -40,7 +31,10 @@
40 31 }
41 32  
42 33 function logout () {
  34 +
43 35 Session.destroy();
  36 +
  37 + $rootScope.$broadcast(AUTH_EVENTS.logoutSuccess);
44 38 }
45 39  
46 40 function isAuthenticated () {
... ... @@ -54,42 +48,42 @@
54 48  
55 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 63 /** @ngInject */
60   - function Session($cookies, $log) {
  64 + function Session($localStorage, $log) {
61 65  
62 66 var service = {};
63 67  
64   - var currentUser = $cookies.getObject('currentUser') || {};
  68 + // $localStorage.currentUser = $localStorage.currentUser || null;
65 69  
66 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 78 service.destroy = function() {
83 79  
84   - currentUser = {};
85   -
86   - $cookies.remove('currentUser');
  80 + delete $localStorage.currentUser;
87 81  
88 82 $log.debug('User session destroyed.');
89 83 };
90 84  
91 85 service.getCurrentUser = function () {
92   - return currentUser;
  86 + return $localStorage.currentUser;
93 87 };
94 88  
95 89 return service;
... ...
src/app/components/navbar/navbar.html
1 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 24 </div>
27 25 </nav>
... ...
src/app/components/navbar/navbar.scss
... ... @@ -2,6 +2,16 @@
2 2  
3 3 .navbar-brand {
4 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 17 .navbar-nav a {
... ...
src/app/index.config.js
... ... @@ -3,13 +3,13 @@
3 3  
4 4 angular
5 5 .module('dialoga')
6   - .config(configAuthInterceptor)
  6 + .config(configHeadersInterceptor)
7 7 .config(configLocationProvider)
8 8 .config(configBreadcrumbProvider)
9 9 .config(config);
10 10  
11 11 /** @ngInject */
12   - function configAuthInterceptor ($httpProvider){
  12 + function configHeadersInterceptor ($httpProvider){
13 13  
14 14 //Reset headers to avoid OPTIONS request (aka preflight)
15 15 $httpProvider.defaults.headers.common = {};
... ...
src/app/index.module.js
... ... @@ -2,6 +2,6 @@
2 2 'use strict';
3 3  
4 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 13 .run(runBlock);
14 14  
15 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 18 // Listner url/state changes, and check permission
19 19 $rootScope.$on('$stateChangeStart', function(event, next) {
... ... @@ -38,6 +38,8 @@
38 38 }
39 39 });
40 40  
  41 + $rootScope.currentUser = $localStorage.currentUser;
  42 +
41 43 $log.debug('[RUN] Auth end.');
42 44 }
43 45  
... ...
src/app/pages/auth/auth.controller.js
... ... @@ -6,12 +6,13 @@
6 6 .controller('AuthPageController', AuthPageController);
7 7  
8 8 /** @ngInject */
9   - function AuthPageController($rootScope, AUTH_EVENTS, AuthService, Session, $log) {
  9 + function AuthPageController($scope, $rootScope, AUTH_EVENTS, AuthService, Session, $log) {
10 10 $log.debug('AuthPageController');
11 11  
12 12 var vm = this;
13 13  
14 14 vm.$rootScope = $rootScope;
  15 + vm.$scope = $scope;
15 16 vm.AUTH_EVENTS = AUTH_EVENTS;
16 17 vm.AuthService = AuthService;
17 18 vm.Session = Session;
... ... @@ -27,15 +28,33 @@
27 28 vm.credentials = {};
28 29  
29 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 52 AuthPageController.prototype.login = function(credentials) {
35 53 var vm = this;
36 54  
37   - vm.AuthService.login(credentials).then(function(/*user*/) {
  55 + vm.AuthService.login(credentials).then(function(user) {
38 56 // handle view
  57 + vm.$log.debug('user', user);
39 58 }, function() {
40 59 // handle view
41 60 });
... ...
src/app/pages/auth/signin.html
1 1 <section role="main" class="section-gray auth-content">
2 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 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 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 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 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 47 </div>
36 48 </div>
37 49 </div>
... ...
src/app/pages/header/header.html
... ... @@ -2,25 +2,19 @@
2 2  
3 3 <div class="row">
4 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 6 </div>
14 7 </div>
15 8  
16 9 <div class="row">
17   - <app-navbar></app-navbar>
  10 + <div class="col-sm-12">
  11 + <app-navbar></app-navbar>
  12 + </div>
18 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 20 </header>
... ...
src/app/pages/programas/programa.html
1 1 <div class="page--conheca-o-programa">
2 2 <section>
3 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 4 <div ng-if="!pageProgramaContent.article.body">
13 5 <div ng-if="!pageProgramaContent.error" class="alert alert-info" role="alert">Carregando detalhes sobre o progama...</div>
14 6 <div ng-if="pageProgramaContent.error" class="alert alert-warning" role="alert">{{pageProgramaContent}}</div>
... ...
src/index.html
... ... @@ -40,6 +40,7 @@
40 40 <div ui-view="header"></div>
41 41 <div id="content" ui-view="main"></div>
42 42 <div ui-view="footer"></div>
  43 +
43 44 <div id="footer-brasil"></div>
44 45  
45 46 <!-- build:js(src) scripts/vendor.js -->
... ...