From 3697ff9f21e44abd65c9eace75cf766a7fd0df09 Mon Sep 17 00:00:00 2001
From: Alexis Lahouze <xals@lahouze.org>
Date: Sun, 11 Jun 2017 00:48:03 +0200
Subject: [PATCH] Use angular-ui-bootstrap for login modal.

---
 src/login/index.js        | 104 +++++++++++++++++++++-----------------
 src/login/login.tmpl.html |  43 +++++++++++-----
 2 files changed, 86 insertions(+), 61 deletions(-)

diff --git a/src/login/index.js b/src/login/index.js
index dd3c8ed..df0acc3 100644
--- a/src/login/index.js
+++ b/src/login/index.js
@@ -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();
diff --git a/src/login/login.tmpl.html b/src/login/login.tmpl.html
index bab0153..ccbde8a 100644
--- a/src/login/login.tmpl.html
+++ b/src/login/login.tmpl.html
@@ -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>