Use angular-ui-bootstrap for login modal.
This commit is contained in:
parent
c907c56c4a
commit
3697ff9f21
@ -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();
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user