alahouze/accountant-ui
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Use angular-ui-bootstrap for login modal.

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/login/index.js
View File

@ -20,12 +20,9 @@
var angular = require('angular');
var ngBootbox = require('ngbootbox'),
ngStorage = require('meanie-angular-storage'),
ngHttpAuth = require('angular-http-auth');
// Note: ngBootbox seems to have no module.exports.
ngBootbox = 'ngBootbox';
var ngStorage = require('meanie-angular-storage'),
ngHttpAuth = require('angular-http-auth'),
angularUiBootstrap = require('angular-ui-bootstrap');
// Note: ngHttpAuth seems to have no module.exports.
ngHttpAuth = 'http-auth-interceptor';
@ -35,19 +32,37 @@ var loginTmpl = require('./login.tmpl.html');
var base64 = require('base64util');
var loginModule = angular.module('accountant.login', [
ngBootbox,
ngHttpAuth,
ngStorage
ngStorage,
angularUiBootstrap
])
.factory('LoginService', function($http) {
var login = function(email, password) {
var authdata = base64.encode(email + ':' + password);
.factory('LoginService', function($uibModal, $storage, $document, $log, authService) {
var login = function () {
$storage.session.clear();
return $http.post('/api/user/login', {}, {
headers: {
'authorization': 'Basic ' + authdata
}
var modalInstance = $uibModal.open({
animation: true,
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']);
})
.run(function($rootScope, LoginService, authService, $storage, $ngBootbox, $document) {
.controller('LoginModalController', function($scope, $uibModalInstance, $http, $log) {
var vm = this;
var showLoginForm = function() {
$storage.session.clear();
vm.data = {
email: 'user@example.com',
password: 'password'
};
$ngBootbox.customDialog({
title: 'Authentification requise',
templateUrl: loginTmpl,
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);
vm.ok = function() {
var email = vm.data.email;
var password = vm.data.password;
authService.loginConfirmed();
});
}
},
cancel: {
label: 'Annuler',
className: 'btn-default',
callback: function() {
authService.loginCancelled(null, 'Login cancelled by user action.');
}
}
$log.log(email, password);
var authdata = base64.encode(email + ':' + password);
return $http.post('/api/user/login', {}, {
headers: {
'authorization': 'Basic ' + authdata
}
}).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() {
onAuthLoginRequired = angular.noop();

43
src/login/login.tmpl.html
View File

@ -1,18 +1,33 @@
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
<form class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-4 control-label">Adresse email</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="email" ng-model="email"
placeholder="Nom d'utilisateur">
</div>
</div>
<div class="modal-header">
<h3 class="modal-title" id="modal-title">Authentification requise</h3>
</div>
<div class="form-group">
<label for="password" class="col-sm-4 control-label">Mot de passe</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="password" ng-model="password" placeholder="Mot de passe">
<div class="modal-body" id="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-4 control-label">Adresse email</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="email" ng-model="$ctrl.data.email"
placeholder="Nom d'utilisateur">
</div>
</div>
</div>
</form>
<div class="form-group">
<label for="password" class="col-sm-4 control-label">Mot de passe</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="password"
ng-model="$ctrl.data.password" placeholder="Mot de passe">
</div>
</div>
</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>