Commit f5d03df54f790d144140d36fcef83ed8da0b0f6a
1 parent
c31c2869
Exists in
master
and in
8 other branches
auth: add login/logout. (no social yet)
Showing
15 changed files
with
209 additions
and
108 deletions
Show diff stats
bower.json
| ... | ... | @@ -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 | +})(); | ... | ... |
| ... | ... | @@ -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/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
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> | ... | ... |