Use angular-ui-bootstrap for login modal.

This commit is contained in:
Alexis Lahouze 2017-06-11 00:48:03 +02:00
parent c907c56c4a
commit 3697ff9f21
2 changed files with 86 additions and 61 deletions

View File

@ -20,12 +20,9 @@
var angular = require('angular'); var angular = require('angular');
var ngBootbox = require('ngbootbox'), var ngStorage = require('meanie-angular-storage'),
ngStorage = require('meanie-angular-storage'), ngHttpAuth = require('angular-http-auth'),
ngHttpAuth = require('angular-http-auth'); angularUiBootstrap = require('angular-ui-bootstrap');
// Note: ngBootbox seems to have no module.exports.
ngBootbox = 'ngBootbox';
// Note: ngHttpAuth seems to have no module.exports. // Note: ngHttpAuth seems to have no module.exports.
ngHttpAuth = 'http-auth-interceptor'; ngHttpAuth = 'http-auth-interceptor';
@ -35,19 +32,37 @@ var loginTmpl = require('./login.tmpl.html');
var base64 = require('base64util'); var base64 = require('base64util');
var loginModule = angular.module('accountant.login', [ var loginModule = angular.module('accountant.login', [
ngBootbox,
ngHttpAuth, ngHttpAuth,
ngStorage ngStorage,
angularUiBootstrap
]) ])
.factory('LoginService', function($http) { .factory('LoginService', function($uibModal, $storage, $document, $log, authService) {
var login = function(email, password) { var login = function () {
var authdata = base64.encode(email + ':' + password); $storage.session.clear();
return $http.post('/api/user/login', {}, { var modalInstance = $uibModal.open({
headers: { animation: true,
'authorization': 'Basic ' + authdata ariaLabelledBy: 'modal-title',
} ariaDescribedBy: 'modal-body',
templateUrl: loginTmpl,
controller: 'LoginModalController',
controllerAs: '$ctrl',
size: 'lg',
});
modalInstance.result.then(function (data) {
$log.log(data);
// TODO Alexis Lahouze 2015-08-28 Handle callback.
// Call to /api/login to retrieve the token
$storage.session.set('refresh_token', data.refresh_token);
$storage.session.set('access_token', data.access_token);
authService.loginConfirmed();
}, function () {
$log.info('Modal dismissed at: ' + new Date());
authService.loginCancelled(null, 'Login cancelled by user action.');
}); });
}; };
@ -94,45 +109,40 @@ var loginModule = angular.module('accountant.login', [
$storageProvider.setEnabledStorageEngines(['local', 'session']); $storageProvider.setEnabledStorageEngines(['local', 'session']);
}) })
.run(function($rootScope, LoginService, authService, $storage, $ngBootbox, $document) { .controller('LoginModalController', function($scope, $uibModalInstance, $http, $log) {
var vm = this;
var showLoginForm = function() { vm.data = {
$storage.session.clear(); email: 'user@example.com',
password: 'password'
};
$ngBootbox.customDialog({ vm.ok = function() {
title: 'Authentification requise', var email = vm.data.email;
templateUrl: loginTmpl, var password = vm.data.password;
buttons: {
login: {
label: 'Login',
className: 'btn-primary',
callback: function() {
var email = angular.element($document[0].querySelector('#email')).val();
var password = angular.element($document[0].querySelector('#password')).val();
LoginService.login(
email, password
).then(function(result) {
// TODO Alexis Lahouze 2015-08-28 Handle callback.
// Call to /api/login to retrieve the token
$storage.session.set('refresh_token', result.data.refresh_token);
$storage.session.set('access_token', result.data.access_token);
authService.loginConfirmed(); $log.log(email, password);
});
} var authdata = base64.encode(email + ':' + password);
},
cancel: { return $http.post('/api/user/login', {}, {
label: 'Annuler', headers: {
className: 'btn-default', 'authorization': 'Basic ' + authdata
callback: function() {
authService.loginCancelled(null, 'Login cancelled by user action.');
}
}
} }
}).then(function(result) {
$log.log(result);
$uibModalInstance.close(result.data);
}); });
}; };
var onAuthLoginRequired = $rootScope.$on('event:auth-loginRequired', showLoginForm); vm.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
})
.run(function($rootScope, LoginService) {
var onAuthLoginRequired = $rootScope.$on('event:auth-loginRequired', LoginService.login);
$rootScope.$on('$destroy', function() { $rootScope.$on('$destroy', function() {
onAuthLoginRequired = angular.noop(); onAuthLoginRequired = angular.noop();

View File

@ -1,9 +1,14 @@
<!-- vim: set tw=80 ts=2 sw=2 sts=2: --> <!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
<form class="form-horizontal"> <div class="modal-header">
<h3 class="modal-title" id="modal-title">Authentification requise</h3>
</div>
<div class="modal-body" id="modal-body">
<form class="form-horizontal">
<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="email" <input type="text" class="form-control" id="email" ng-model="$ctrl.data.email"
placeholder="Nom d'utilisateur"> placeholder="Nom d'utilisateur">
</div> </div>
</div> </div>
@ -11,8 +16,18 @@
<div class="form-group"> <div class="form-group">
<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" ng-model="password" placeholder="Mot de passe"> <input type="password" class="form-control" id="password"
ng-model="$ctrl.data.password" placeholder="Mot de passe">
</div> </div>
</div> </div>
</form> </form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">
OK
</button>
<button class="btn btn-default" type="button" ng-click="$ctrl.cancel()">
Annuler
</button>
</div>