Use angular strap modal instead of angular-ui-bootstrap one.

This commit is contained in:
Alexis Lahouze 2017-07-08 12:12:20 +02:00
parent 319c0adc16
commit e5857bc68e
4 changed files with 71 additions and 98 deletions

View File

@ -21,14 +21,14 @@
var angular = require('angular'); var angular = require('angular');
var ngStorage = require('meanie-angular-storage'), var ngStorage = require('meanie-angular-storage'),
ngHttpAuth = require('angular-http-auth'); ngHttpAuth = require('angular-http-auth'),
ngStrap = require('angular-strap');
// Note: ngHttpAuth seems to have no module.exports. // Note: ngHttpAuth seems to have no module.exports.
ngHttpAuth = 'http-auth-interceptor'; ngHttpAuth = 'http-auth-interceptor';
var LoginService = require('./login.service'); var LoginService = require('./login.service');
var LoginConfig = require('./login.config'); var LoginConfig = require('./login.config');
var LoginController = require('./login.controller');
module.exports = angular.module('accountant.login', [ module.exports = angular.module('accountant.login', [
ngHttpAuth, ngHttpAuth,
@ -39,16 +39,11 @@ module.exports = angular.module('accountant.login', [
.config(LoginConfig) .config(LoginConfig)
.controller('LoginModalController', LoginController)
.run(function($rootScope, LoginService) { .run(function($rootScope, LoginService) {
var onAuthLoginRequired = $rootScope.$on('event:auth-loginRequired', LoginService.login); var onAuthLoginRequired = $rootScope.$on('event:auth-loginRequired', LoginService.loginModal);
var onAuthLoginCancelled = $rootScope.$on('event:auth-loginCancelled', LoginService.cancelLogin);
$rootScope.$on('$destroy', function() { $rootScope.$on('$destroy', function() {
onAuthLoginRequired = angular.noop(); onAuthLoginRequired = angular.noop();
onAuthLoginCancelled = angular.noop();
}); });
}) })

View File

@ -1,36 +0,0 @@
var base64 = require('base64util');
module.exports = function($scope, $uibModalInstance, $http, $log) {
var vm = this;
vm.data = {
email: null,
password: null
};
vm.ok = function() {
var email = vm.data.email;
var password = vm.data.password;
// Encode authentication data.
var authdata = base64.encode(email + ':' + password);
return $http.post('/api/user/login', {}, {
ignoreAuthModule: true,
headers: {
'authorization': 'Basic ' + authdata
}
}).then(function(result) {
$log.log(result);
$uibModalInstance.close(result.data);
}, function(response) {
// FIXME Alexis Lahouze 2017-06-11 Handle error.
$log.log("Error on login", response);
});
};
vm.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
};

View File

@ -1,38 +1,45 @@
var base64 = require('base64util');
var loginTmpl = require('./login.tmpl.html'); var loginTmpl = require('./login.tmpl.html');
module.exports = function($uibModal, $storage, $document, $log, authService) { module.exports = function($storage, $http, authService, $modal) {
var login = function () { var login = function(email, password) {
$storage.session.clear(); // Encode authentication data.
var authdata = base64.encode(email + ':' + password);
var modalInstance = $uibModal.open({ return $http.post('/api/user/login', {}, {
ariaLabelledBy: 'modal-title', ignoreAuthModule: true,
ariaDescribedBy: 'modal-body', headers: {
templateUrl: loginTmpl, 'authorization': 'Basic ' + authdata
controller: 'LoginModalController', }
controllerAs: '$ctrl' }).then(function (result) {
}); $storage.session.set('refresh_token', result.data.refresh_token);
$storage.session.set('access_token', result.data.access_token);
modalInstance.result.then(function (data) {
$log.log(data);
$storage.session.set('refresh_token', data.refresh_token);
$storage.session.set('access_token', data.access_token);
authService.loginConfirmed(); authService.loginConfirmed();
}, function () { }, function(result) {
$log.info('Modal dismissed at: ' + new Date()); loginModal();
// FIXME Alexis Lahouze 2017-06-11 Redirect to error page.
authService.loginCancelled(null, 'Login cancelled by user action.');
}); });
}; };
var cancelLogin = function () { var loginModal = function () {
// FIXME Alexis Lahouze 2017-06-11 Redirect to error page. $storage.session.clear();
$modal({
templateUrl: loginTmpl,
controller: function($scope, $login) {
$scope.$login = function() {
$scope.$hide();
$login($scope.email, $scope.password);
};
},
locals: {
$login: login,
}
});
}; };
return { return {
'login': login, 'loginModal': loginModal,
'cancelLogin': cancelLogin
}; };
}; };

View File

@ -1,14 +1,17 @@
<!-- vim: set tw=80 ts=2 sw=2 sts=2: --> <!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
<div class="modal top am-fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title" id="modal-title">Authentification requise</h3> <h3 class="modal-title" id="modal-title">Authentification requise</h3>
</div> </div>
<form class="form-horizontal" ng-submit="$ctrl.ok()"> <form class="form-horizontal" ng-submit="$login()">
<div class="modal-body" id="modal-body"> <div class="modal-body" id="modal-body">
<div class="form-group"> <div class="form-group">
<label for="email" class="col-sm-4 control-label">Adresse email</label> <label for="email" class="col-sm-4 control-label">Adresse email</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input type="text" class="form-control" id="email" ng-model="$ctrl.data.email" <input type="text" class="form-control" id="email" ng-model="email"
placeholder="Nom d'utilisateur"> placeholder="Nom d'utilisateur">
</div> </div>
</div> </div>
@ -17,15 +20,19 @@
<label for="password" class="col-sm-4 control-label">Mot de passe</label> <label for="password" class="col-sm-4 control-label">Mot de passe</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input type="password" class="form-control" id="password" <input type="password" class="form-control" id="password"
ng-model="$ctrl.data.password" placeholder="Mot de passe"> ng-model="password" placeholder="Mot de passe">
</div> </div>
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<input class="btn btn-primary" type="submit" value="OK"/> <input class="btn btn-primary" type="submit" value="OK"/>
<button class="btn btn-default" type="button" ng-click="$ctrl.cancel()">
<button class="btn btn-default" type="button" ng-click="$hide()">
Annuler Annuler
</button> </button>
</div> </div>
</form> </form>
</div>
</div>
</div>