From c82143fd2eef2f2f521372aba278add8aff0a4e5 Mon Sep 17 00:00:00 2001
From: Alexandre Cloutier <acloutier@inverse.ca>
Date: Fri, 17 Oct 2014 11:01:56 -0400
Subject: [PATCH] Refactor acl object and applied comments

---
 UI/MainUI/SOGoUserHomePage.m                  |   3 +-
 .../ContactsUI/UIxContactFoldersView.wox      |  83 +++++++--------
 UI/WebServerResources/js/Common/acl-model.js  |  37 +++----
 UI/WebServerResources/js/Common/resource.js   |   8 +-
 .../js/Contacts/addressbook-model.js          |  11 +-
 UI/WebServerResources/js/ContactsUI.js        |  73 ++++++++-----
 UI/WebServerResources/js/mobile/ContactsUI.js |  63 +++++++----
 UI/WebServerResources/scss/ContactsUI.scss    | 100 +++++++++++++++++-
 UI/WebServerResources/scss/_settings.scss     |   6 +-
 9 files changed, 259 insertions(+), 125 deletions(-)

diff --git a/UI/MainUI/SOGoUserHomePage.m b/UI/MainUI/SOGoUserHomePage.m
index 2c56d0fbe..8b5e24447 100644
--- a/UI/MainUI/SOGoUserHomePage.m
+++ b/UI/MainUI/SOGoUserHomePage.m
@@ -467,7 +467,8 @@
           if ([domain length])
             uid = [NSString stringWithFormat: @"%@@%@", uid, domain];
           [jsonLine setObject: uid forKey: @"uid"];
-          [jsonLine setObject: [NSString stringWithFormat:@"%@ <%@>",[contact objectForKey: @"cn"], [contact objectForKey: @"c_email"]] forKey: @"displayName"];
+          [jsonLine setObject: [contact objectForKey: @"cn"] forKey: @"cn"];
+          [jsonLine setObject: [contact objectForKey: @"c_email"] forKey: @"c_email"];
           [jsonLine setObject: [NSNumber numberWithBool: [[contact objectForKey: @"isGroup"] boolValue]] forKey: @"isGroup"];
           contactInfo = [contact objectForKey: @"c_info"];
           if (contactInfo)
diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 4ec9880fa..177af190c 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -67,43 +67,40 @@
     <!-- modal for addressbook sharing options -->
     <script type="text/ng-template" id="addressbookSharing.html">
       <div id="modalACL">
-        <h2><var:string label:value="Sharing"/></h2>
-        <div>
+        <h2><var:string label:value="Sharing - "/>{{addressbook.name}}</h2>
+        <ul class="small-block-grid-2">
         <!-- left side -->
-          <div id="usersList">
-            <div>
-              <ul>
-                <li ng-repeat="user in users | orderBy:['userClass', 'displayName']" data-ng-click="selectUser(user)" 
-                    data-ng-class="{_selected: user==selected}">
-                  <span>
-                    <i data-ng-class="(user.userClass == 'public-user') ? 'icon-user4' : 'icon-vcard'"><!-- spacer --></i>
-                    {{user.displayName}}</span>
+          <li id="usersList">
+            <ul>
+              <li ng-repeat="user in users | orderBy:['userClass', 'displayName']" data-ng-click="selectUser(user)" data-ng-class="{_selected: user==selected}">
+                  <span class="card-picture" data-ng-switch="user.userClass">
+                    <i data-ng-switch-when="normal-user" class="icon-ion-ios7-person"><!-- normal-user --></i>
+                    <i data-ng-switch-when="public-user" class="icon-ion-ios7-people"><!-- public-user --></i>
+                  </span>
+                  <span class="name">{{user.displayName}}</span>
                   <span class="subscriptionArea" data-ng-hide="user.userClass == 'public-user'">
                     <input type="checkbox" ng-model="user.isSubscribed" ng-checked="user.isSubscribed" 
                            ng-disabled="!user.canSubscribeUser" ng-change="markUserAsDirty(user)" />
-                    <span><var:string label:value="Subscribe User"/></span></span>
-                </li>
-              </ul>
-            </div>
-            <div>
-              <form ng-submit="addUser(userToAdd)" class="addContactsToolbar">
-                <input type="search" ng-model="userToAdd" label:placeholder="Add..." typeahead-wait-ms="1000"
-                      typeahead="user as user.displayName for user in User.$filter($viewValue) | filter:$viewValue" class="form-control" />
-                <button type="submit" ><var:string label:value="Add User"/></button>
-                <button type="button" ng-disabled="userIsReadOnly()" data-ng-click="removeUser()"><var:string label:value="Remove User"/></button>
-              </form>
-
-            </div>
-          </div>
-
-          <!-- right side -->
-          <div id="AccessRightList">
-            <input id="uid" type="hidden" name="uid" var:value="uid"/>
+                    <span><var:string label:value="Subscribe User"/></span>
+                  </span>
+              </li>
+            </ul>
+            <form ng-submit="addUser(userToAdd)" class="addContactsToolbar">
+              <table id="bottomTable">
+                <tr>
+                  <td id="td_1"><i class="icon-ion-search"><!-- search --></i>
+                       <input type="search" ng-model="userToAdd" label:placeholder="Add..." typeahead-wait-ms="1000"
+                              typeahead="user as user.cn for user in User.$filter($viewValue) | filter:$viewValue" class="form-control" /></td>
+                  <td id="td_2"><button type="submit" ><var:string label:value="Add User"/></button>
+                      <button type="button" ng-disabled="userIsReadOnly()" data-ng-click="removeUser()"><var:string label:value="Remove User"/></button></td>
+                </tr>
+              </table>
+            </form>
+          </li>
+        <!-- right side -->
+          <li id="AccessRightList">
             <div class="title">
-              <label><var:string label:value="Access rights to"/><br />
-                 <span id="folderName" class="value">{{addressbook.name}}</span></label>
-              <label><var:string label:value="For user"/><br />
-                 <span class="value">{{userSelected.displayName}}</span></label>
+              {{userSelected.displayName}}
             </div>
             <div class="calendarUserRights">
               <ul>
@@ -128,15 +125,15 @@
                   <var:string label:value="This person can read the cards of this addressbook."/></li>
               </ul>
             </div>
-          </div>
-          </div>
-          <div id="aclButtons">
-            <button data-ng-click="closeModal()"><var:string label:value="Close"/></button>
-            <button data-ng-click="saveModal()"><var:string label:value="Save"/></button>
-          </div>
-        </div>
-        <span class="close-reveal-modal" data-ng-click="closeModal()"><i class="icon-close"><!-- close --></i></span>
-      </script>
+          </li>
+        </ul>
+      </div>
+      <div id="aclButtons">
+        <button data-ng-click="closeModal()"><var:string label:value="Close"/></button>
+        <button data-ng-click="saveModal()"><var:string label:value="Save"/></button>
+      </div>
+      <span class="close-reveal-modal" data-ng-click="closeModal()"><i class="icon-close"><!-- close --></i></span>
+    </script>
 
     <script type="text/ng-template" id="addressbooks.html">
 
@@ -238,8 +235,8 @@
             <!-- <input type="checkbox" class="card-picture left"/> -->
             <a data-ui-sref="addressbook.card.view({addressbookId: addressbook.id, cardId: currentCard.id})">
               <span class="card-picture" data-ng-switch="currentCard.tag">
-                <i data-ng-switch-when="vcard" class="icon-ion-ios7-person"><!-- card --></i>
-                <i data-ng-switch-when="vlist" class="icon-ion-ios7-people"><!-- list --></i>
+                <i data-ng-switch-when="vcard" data-ng-class="{'icon-ion-ios7-person': currentCard.photoURL == undefined}" ><!-- card --></i>
+                <i data-ng-switch-when="vlist" data-ng-class="icon-ion-ios7-people"><!-- list --></i>
               </span>
               <div class="name" data-ng-bind-html="currentCard.$fullname()"><!-- cn --></div>
               <div><span data-ng-show="currentCard.emails"><i class="icon-ion-ios7-email-outline"><!-- email --></i> {{currentCard.$preferredEmail()}}</span><var:entity const:name="nbsp" /></div>
diff --git a/UI/WebServerResources/js/Common/acl-model.js b/UI/WebServerResources/js/Common/acl-model.js
index 6604fcf70..ac90efd34 100644
--- a/UI/WebServerResources/js/Common/acl-model.js
+++ b/UI/WebServerResources/js/Common/acl-model.js
@@ -1,50 +1,51 @@
 (function() {
   'use strict';
 
-  function AclUsers(folder) {  
-    this.folder_id = folder.id;  
+  function Acl(folder_id) {
+    this.folder_id = folder_id;
   }
 
   /* The factory we'll use to register with Angular */
-  AclUsers.factory = ['$q', '$timeout', 'sgSettings', 'sgResource', function($q, $timeout, Settings, Resource) {
-    angular.extend(AclUsers, {
-      $q: $q,
-      $timeout: $timeout,
+  Acl.factory = ['sgSettings', 'sgResource', function(Settings, Resource) {
+    angular.extend(Acl, {
       $$resource: new Resource(Settings.baseURL)
     });
 
-    return AclUsers; // return constructor
+    return Acl; // return constructor
   }];
 
   /* Factory registration in Angular module */
-  angular.module('SOGo.Common').factory('sgAclUsers', AclUsers.factory);
+  angular.module('SOGo.Common').factory('sgAcl', Acl.factory);
 
   /* Instance methods
    * Public method, assigned to prototype      
    */
-  AclUsers.prototype.userRights = function(uid) {
+  Acl.prototype.$userRights = function(uid) {
     var param = {"uid": uid};
-    return AclUsers.$$resource.fetch(this.folder_id, "userRights", param);
+    return Acl.$$resource.fetch(this.folder_id, "userRights", param);
   };
 
-  AclUsers.prototype.addUser = function(uid) {
+  Acl.prototype.$addUser = function(uid) {
     var param = {"uid": uid};
-    AclUsers.$$resource.fetch(this.folder_id, "addUserInAcls", param);
+    Acl.$$resource.fetch(this.folder_id, "addUserInAcls", param);
   };
 
-  AclUsers.prototype.removeUser = function(uid) {
+  Acl.prototype.$removeUser = function(uid) {
     var param = {"uid": uid};
-    AclUsers.$$resource.fetch(this.folder_id, "removeUserFromAcls", param);
+    Acl.$$resource.fetch(this.folder_id, "removeUserFromAcls", param);
   };
 
-  AclUsers.prototype.saveUsersRights = function(dirtyObjects) {
+  Acl.prototype.$saveUsersRights = function(dirtyObjects) {
     var param = {"action": "saveUserRights"};
-    AclUsers.$$resource.save(this.folder_id, dirtyObjects, param);
+    Acl.$$resource.save(this.folder_id, dirtyObjects, param);
   };
 
-  AclUsers.prototype.subscribeUsers = function(uids) {
+  Acl.prototype.$subscribeUsers = function(uids) {
     var param = {"uids": uids};
-    AclUsers.$$resource.fetch(this.folder_id, "subscribeUsers", param);
+    Acl.$$resource.fetch(this.folder_id, "subscribeUsers", param);
   };
 
+  Acl.prototype.$users = function() {
+    return Acl.$$resource.fetch(this.folder_id, "acls");
+  };
 })();
\ No newline at end of file
diff --git a/UI/WebServerResources/js/Common/resource.js b/UI/WebServerResources/js/Common/resource.js
index b2ac2e276..5ddcca014 100644
--- a/UI/WebServerResources/js/Common/resource.js
+++ b/UI/WebServerResources/js/Common/resource.js
@@ -117,11 +117,9 @@
    * @param {Object} params - Object parameters injected through the $http protocol 
    */
   Resource.prototype.fetch = function(folder_id, action, params) {
-    var deferred = this._q.defer();
-    var folder_id_path = folder_id ? ("/" + folder_id) : "";
-    var action_path = action ? ("/" + action) : "";
-
-    var path = this._path + folder_id_path + action_path;
+    var deferred = this._q.defer(),
+        path = [this._path, (folder_id ? folder_id : ""), (action ? action : "")];
+    path = _.compact(path).join("/");
 
     this._http({
       method: 'GET',
diff --git a/UI/WebServerResources/js/Contacts/addressbook-model.js b/UI/WebServerResources/js/Contacts/addressbook-model.js
index 4906ee7d2..437c7ef80 100644
--- a/UI/WebServerResources/js/Contacts/addressbook-model.js
+++ b/UI/WebServerResources/js/Contacts/addressbook-model.js
@@ -17,6 +17,9 @@
         var newAddressBookData = AddressBook.$$resource.create('createFolder', this.name);
         this.$unwrap(newAddressBookData);
       }
+      else if (this.id){
+        this.$acl = new AddressBook.$$acl(this.id);
+      }
     }
     else {
       // The promise will be unwrapped first
@@ -29,12 +32,13 @@
    * @desc The factory we'll use to register with Angular
    * @returns the AddressBook constructor
    */
-  AddressBook.$factory = ['$q', '$timeout', 'sgSettings', 'sgResource', 'sgCard', function($q, $timeout, Settings, Resource, Card) {
+  AddressBook.$factory = ['$q', '$timeout', 'sgSettings', 'sgResource', 'sgCard', 'sgAcl', function($q, $timeout, Settings, Resource, Card, Acl) {
     angular.extend(AddressBook, {
       $q: $q,
       $timeout: $timeout,
       $$resource: new Resource(Settings.baseURL),
-      $Card: Card
+      $Card: Card,
+      $$acl: Acl
     });
 
     return AddressBook; // return constructor
@@ -131,6 +135,7 @@
         angular.forEach(cards, function(o, i) {
           cards[i] = new AddressBook.$Card(o);
         });
+
         return cards;
       });
     });
@@ -198,6 +203,8 @@
         angular.forEach(_this.cards, function(o, i) {
           _this.cards[i] = new AddressBook.$Card(o);
         });
+        // Instanciate Acl object
+        _this.$acl = new AddressBook.$$acl(_this.id);
       });
     }, function(data) {
       AddressBook.$timeout(function() {
diff --git a/UI/WebServerResources/js/ContactsUI.js b/UI/WebServerResources/js/ContactsUI.js
index e67760883..37e61e095 100644
--- a/UI/WebServerResources/js/ContactsUI.js
+++ b/UI/WebServerResources/js/ContactsUI.js
@@ -138,7 +138,7 @@
             i = _.indexOf(_.pluck($scope.addressbooks, 'id'), $rootScope.addressbook.id);
           }
           $scope.editMode = $rootScope.addressbook.id;
-	  $scope.originalAddressbook = angular.extend({}, $scope.addressbook.$omit());
+          $scope.originalAddressbook = angular.extend({}, $scope.addressbook.$omit());
           focus('addressBookName_' + i);
         }
       };
@@ -182,44 +182,53 @@
       $scope.share = function() {
         var modal = $modal.open({
           templateUrl: 'addressbookSharing.html',
-          controller: function($scope, $http, $modalInstance, sgAclUsers, sgUser) {
+          controller: function($scope, $modalInstance, sgUser) {
             /* Variables for the scope */
-            $scope.AclUsers = new sgAclUsers($rootScope.addressbook);
-            $scope.User = new sgUser($rootScope.addressbook);
             var dirtyObjects = {};
-            $scope.User.$acls().then(function(users) {
+            stateAddressbook.$acl.$users().then(function(users) {
               $scope.users = [];
               angular.forEach(users, function(user){
-                user.canSubscribeUser = (user.isSubscribed) ? false : true;
+                user.canSubscribeUser = user.isSubscribed;
                 $scope.users.push(user);
               })
             });
-
+            $scope.User = new sgUser();
             /* Functions */
             $scope.closeModal = function() {
               $modalInstance.close();
             };
             $scope.saveModal = function() {
               if(!_.isEmpty(dirtyObjects)) {
-                if(dirtyObjects["anonymous"])
-                {
-                  Dialog.confirm(l("Warning"), l("Any user with an account on this system will be able to access your folder. Are you certain you trust them all?")).then(function(res){
-                    if(res){
-                      $scope.AclUsers.saveUsersRights(dirtyObjects);
-                      $modalInstance.close();
-                    };
-                  })
+                if(dirtyObjects["anonymous"]) {
+                  if($scope.validateChanges(dirtyObjects["anonymous"])) {
+                    Dialog.confirm(l("Warning"), l("Potentially anyone on the Internet will be able to access your folder, even if they do not have an account on this system. Is this information suitable for the public Internet?")).then(function(res){
+                      if(res){
+                        stateAddressbook.$acl.$saveUsersRights(dirtyObjects);
+                        $modalInstance.close();
+                      };
+                    })
+                  }
+                  else{
+                    stateAddressbook.$acl.$saveUsersRights(dirtyObjects);
+                    $modalInstance.close();
+                  }
                 }
                 else if (dirtyObjects["<default>"]) {
-                  Dialog.confirm(l("Warning"), l("Potentially anyone on the Internet will be able to access your folder, even if they do not have an account on this system. Is this information suitable for the public Internet?")).then(function(res){
-                    if(res){
-                      $scope.AclUsers.saveUsersRights(dirtyObjects);
-                      $modalInstance.close();
-                    };
-                  })
+                  if($scope.validateChanges(dirtyObjects["<default>"])) {
+                    Dialog.confirm(l("Warning"), l("Any user with an account on this system will be able to access your folder. Are you certain you trust them all?")).then(function(res){
+                      if(res){
+                        stateAddressbook.$acl.$saveUsersRights(dirtyObjects);
+                        $modalInstance.close();
+                      };
+                    })
+                  }
+                  else{
+                    stateAddressbook.$acl.$saveUsersRights(dirtyObjects);
+                    $modalInstance.close();
+                  }
                 }
                 else {
-                  $scope.AclUsers.saveUsersRights(dirtyObjects);
+                  stateAddressbook.$acl.$saveUsersRights(dirtyObjects);
                   var usersToSubscribe = [];
                   angular.forEach(dirtyObjects, function(dirtyObject){
                     if(dirtyObject.canSubscribeUser && dirtyObject.isSubscribed){
@@ -227,19 +236,25 @@
                     }
                   })
                   if(!_.isEmpty(usersToSubscribe))
-                    $scope.AclUsers.subscribeUsers(usersToSubscribe);
+                    stateAddressbook.$acl.$subscribeUsers(usersToSubscribe);
 
                   $modalInstance.close();
                 }
               }
               else
-                $scope.$aclEditorModal.remove();
+                $modalInstance.close();
+            };
+            $scope.validateChanges = function(object) {
+              if (object.aclOptions.canViewObjects || object.aclOptions.canCreateObjects || object.aclOptions.canEditObjects || object.aclOptions.canEraseObjects)
+                return true;
+              else
+                return false;
             };
             $scope.removeUser = function() {
               if (!_.isEmpty($scope.userSelected)) {
                 if(dirtyObjects[$scope.userSelected.uid])
                   delete dirtyObjects[$scope.userSelected.uid];
-                $scope.AclUsers.removeUser($scope.userSelected.uid);
+                stateAddressbook.$acl.$removeUser($scope.userSelected.uid);
                 // Remove from the users list
                 $scope.users = _.reject($scope.users, function(o) {
                   return o.uid == $scope.userSelected.uid;
@@ -251,11 +266,11 @@
               if (user.uid) {
                 // Looks through the list and returns the first value that matches all of the key-value pairs listed
                 if(!_.findWhere($scope.users, {uid: user.uid})) {
-                  $scope.AclUsers.addUser(user.uid);
-                  $scope.User.$acls().then(function(users) {
+                  stateAddressbook.$acl.$addUser(user.uid);
+                  stateAddressbook.$acl.$users().then(function(users) {
                     $scope.users = [];
                     angular.forEach(users, function(user){
-                      user.canSubscribeUser = (user.isSubscribed) ? false : true;
+                      user.canSubscribeUser = user.isSubscribed;
                       $scope.users.push(user);
                     })
                   });
@@ -277,7 +292,7 @@
                   $scope.userSelected.aclOptions = dirtyObjects[$scope.userSelected.uid].aclOptions;
                 }
                 else {
-                  $scope.AclUsers.userRights($scope.userSelected.uid).then(function(userRights) { 
+                  stateAddressbook.$acl.$userRights($scope.userSelected.uid).then(function(userRights) { 
                     $scope.userSelected.aclOptions = userRights;
                   });
                 }
diff --git a/UI/WebServerResources/js/mobile/ContactsUI.js b/UI/WebServerResources/js/mobile/ContactsUI.js
index 98c59b08d..46ee7b273 100644
--- a/UI/WebServerResources/js/mobile/ContactsUI.js
+++ b/UI/WebServerResources/js/mobile/ContactsUI.js
@@ -159,7 +159,7 @@
       // };
     }])
 
-    .controller('AddressBooksCtrl', ['$scope', '$rootScope', '$ionicModal', '$ionicListDelegate', '$ionicActionSheet', 'sgDialog', 'sgAddressBook', 'sgAclUsers', 'sgUser', function($scope, $rootScope, $ionicModal, $ionicListDelegate, $ionicActionSheet, Dialog, AddressBook, sgAclUsers, sgUser) {
+    .controller('AddressBooksCtrl', ['$scope', '$state', '$rootScope', '$ionicModal', '$ionicListDelegate', '$ionicActionSheet', 'sgDialog', 'sgAddressBook', 'sgUser', function($scope, $state, $rootScope, $ionicModal, $ionicListDelegate, $ionicActionSheet, Dialog, AddressBook, sgUser) {
       // Initialize with data from template
       $scope.addressbooks = AddressBook.$findAll(contactFolders);
       $scope.newAddressbook = function() {
@@ -205,11 +205,9 @@
                 }
                 // Variables in scope
                 $scope.$aclEditorModal = modal;
-                $scope.addressbook = addressbook;
-                $scope.AclUsers = new sgAclUsers(addressbook);
-                $scope.User = new sgUser(addressbook);
+                $scope.User = new sgUser();
                 var aclUsers = {};
-                $scope.User.$acls().then(function(users) {
+                addressbook.$acl.$users().then(function(users) {
                   $scope.refreshUsers(users);
                 });
                 $scope.showDelete = false;
@@ -238,23 +236,35 @@
                   if(!_.isEmpty(dirtyObjects)) {
                     if(dirtyObjects["anonymous"])
                     {
-                      Dialog.confirm(l("Warning"), l("Any user with an account on this system will be able to access your folder. Are you certain you trust them all?")).then(function(res){
-                        if(res){
-                          $scope.AclUsers.saveUsersRights(dirtyObjects);
-                          $scope.$aclEditorModal.remove();
-                        };
-                      })
+                      if($scope.validateChanges(dirtyObjects["anonymous"])) {
+                        Dialog.confirm(l("Warning"), l("Potentially anyone on the Internet will be able to access your folder, even if they do not have an account on this system. Is this information suitable for the public Internet?")).then(function(res){
+                          if(res){
+                            addressbook.$acl.$saveUsersRights(dirtyObjects);
+                            $scope.$aclEditorModal.remove();
+                          };
+                        })
+                      }
+                      else {
+                        addressbook.$acl.$saveUsersRights(dirtyObjects);
+                        $scope.$aclEditorModal.remove();
+                      }
                     }
                     else if (dirtyObjects["<default>"]) {
-                      Dialog.confirm(l("Warning"), l("Potentially anyone on the Internet will be able to access your folder, even if they do not have an account on this system. Is this information suitable for the public Internet?")).then(function(res){
-                        if(res){
-                          $scope.AclUsers.saveUsersRights(dirtyObjects);
-                          $scope.$aclEditorModal.remove();
-                        };
-                      })
+                      if($scope.validateChanges(dirtyObjects["<default>"])) {
+                        Dialog.confirm(l("Warning"), l("Any user with an account on this system will be able to access your folder. Are you certain you trust them all?")).then(function(res){
+                          if(res){
+                            addressbook.$acl.$saveUsersRights(dirtyObjects);
+                            $scope.$aclEditorModal.remove();
+                          };
+                        })
+                      }
+                      else {
+                        addressbook.$acl.$saveUsersRights(dirtyObjects);
+                        $scope.$aclEditorModal.remove();
+                      }
                     }
                     else {
-                      $scope.AclUsers.saveUsersRights(dirtyObjects);
+                      addressbook.$acl.$saveUsersRights(dirtyObjects);
                       var usersToSubscribe = [];
                       angular.forEach(dirtyObjects, function(dirtyObject){
                         if(dirtyObject.canSubscribeUser && dirtyObject.isSubscribed){
@@ -262,7 +272,7 @@
                         }
                       })
                       if(!_.isEmpty(usersToSubscribe))
-                        $scope.AclUsers.subscribeUsers(usersToSubscribe);
+                        addressbook.$acl.$subscribeUsers(usersToSubscribe);
 
                       $scope.$aclEditorModal.remove();
                     }
@@ -270,8 +280,14 @@
                   else
                     $scope.$aclEditorModal.remove();
                 };
+                $scope.validateChanges = function(object) {
+                  if (object.aclOptions.canViewObjects || object.aclOptions.canCreateObjects || object.aclOptions.canEditObjects || object.aclOptions.canEraseObjects)
+                    return true;
+                  else
+                    return false;
+                };
                 $scope.cancelSearch = function() {
-                  $scope.User.$acls().then(function(users) { 
+                  addressbook.$acl.$users().then(function(users) { 
                     $scope.refreshUsers(users);
                   });
                 };
@@ -283,7 +299,7 @@
                     if(dirtyObjects[user.uid])
                       delete dirtyObjects[user.uid];
                     delete aclUsers[user.uid];
-                    $scope.AclUsers.removeUser(user.uid);
+                    addressbook.$acl.$removeUser(user.uid);
                     // Remove from the users list
                     $scope.users = _.reject($scope.users, function(o) {
                       return o.uid == user.uid;
@@ -294,7 +310,7 @@
                 $scope.addUser = function (user) {
                   if (user.uid) {
                     if(!aclUsers[user.uid]) {
-                      $scope.AclUsers.addUser(user.uid);
+                      addressbook.$acl.$addUser(user.uid);
                       user.inAclList = true;
                       user.canSubscribeUser = (user.isSubscribed) ? false : true;
                       aclUsers[user.uid] = user;
@@ -316,7 +332,7 @@
                     }
                     else {
                       // Otherwise, if it's the first time the user consult the user rights; fetch from server
-                      $scope.AclUsers.userRights($scope.userSelected.uid).then(function(userRights) { 
+                      addressbook.$acl.$userRights($scope.userSelected.uid).then(function(userRights) { 
                         $scope.userSelected.aclOptions = userRights;
                       });
                     }
@@ -328,6 +344,7 @@
                   return $scope.User.$filter(search).then(function(results) {
                     angular.forEach(results, function(userFound){
                       userFound.inAclList = (aclUsers[userFound.uid]) ? true : false;
+                      userFound["displayName"] = userFound.cn + " <" + userFound.c_email + ">";
                       $scope.users.push(userFound);
                     })
                   });
diff --git a/UI/WebServerResources/scss/ContactsUI.scss b/UI/WebServerResources/scss/ContactsUI.scss
index 8cc28ef84..ffb561828 100644
--- a/UI/WebServerResources/scss/ContactsUI.scss
+++ b/UI/WebServerResources/scss/ContactsUI.scss
@@ -118,10 +118,11 @@ $column-gutter: 0;
     height: 40px;
     border-radius: 20px;
     color: $input-disabled-bg;
-    //line-height: 40px;
     text-align: center;
+    vertical-align: center;
     border: 1px solid $input-disabled-bg;
     margin-right: 1em;
+    margin-left: 5px;
     i {
         font-size: 42px;
         line-height: 36px;
@@ -363,6 +364,102 @@ $column-gutter: 0;
     }
 }
 
+#modalACL {
+    height: 25vw;
+    ul {
+        height: 85%;
+    }
+    #usersList {
+        height: 100%;
+        padding: 0;
+        ul {
+            @include block-grid(
+                $per-row: 1,
+                $spacing: $block-grid-default-spacing,
+                $base-style: false
+            );
+            height: 85%;
+            border: 1px solid black;
+            padding: 0;
+            margin: 0;
+            li {
+                padding: 0;
+                line-height: 45px;
+                background-color: $f-dropdown-list-hover-bg;
+                transition: background 300ms ease;
+                &:hover, &:active {
+                    background-color: $f-dropdown-list-hover-bg;
+                    background-color: #fff;
+                }
+                &._selected, &._selected span {
+                    background-color: $module-color;
+                    background-color: #fff;
+                }
+                .subscriptionArea {
+                    float: right;
+                }
+            }
+        }
+        #bottomTable {
+            width: 100%;
+            margin: 0;
+            border: none;
+            #td_1 {
+                padding: 0;
+                width:100%;
+                i {
+                    position: absolute;
+                    padding-top: 10px;
+                    padding-left: 8px;
+                }
+                input {
+                    padding-left: 20px;
+                    margin: 0;
+                }
+            }
+            #td_2 {
+                padding: 0;
+                margin: 0;
+                float: right;
+                white-space: nowrap;
+                button {
+                    margin: 0;
+                }
+            }
+        }
+    }
+    #AccessRightList {
+        border: 1px solid black;
+        height: 100%;
+        padding: 0;
+        .title {
+            background-color: #54B948;
+            line-height: 75px;
+            color: white;
+            padding-left: 0.5em;
+        }
+        ul {
+            @include block-grid(
+                $per-row: 1,
+                $spacing: $block-grid-default-spacing,
+                $base-style: false
+            );
+            li {
+                padding: 5px;
+                clear: none !important;
+            }
+        }
+    }
+}
+#aclButtons {
+    margin: 0px;
+    padding:0;
+    float: right;
+    button {
+        margin: 0;
+    }
+}
+
 .buttonsToolbar {
     text-align: right;
     .button {
@@ -470,6 +567,7 @@ $column-gutter: 0;
 .f-dropdown {
     &.icons-dropdown {
         width: auto;
+        height: inherit;
         //background-color: $primary-color;
         .button {
             margin: 0;
diff --git a/UI/WebServerResources/scss/_settings.scss b/UI/WebServerResources/scss/_settings.scss
index 829bdb1c1..91b1ecae1 100644
--- a/UI/WebServerResources/scss/_settings.scss
+++ b/UI/WebServerResources/scss/_settings.scss
@@ -285,9 +285,9 @@ $alert-font-size: rem-calc(12);
 // $include-xl-html-block-grid-classes: false;
 
 // We use this to control the maximum number of block grid elements per row
-// $block-grid-elements: 12;
-// $block-grid-default-spacing: rem-calc(20);
-// $align-block-grid-to-grid: false;
+$block-grid-elements: 12;
+$block-grid-default-spacing: rem-calc(20);
+$align-block-grid-to-grid: true;
 
 
 // Enables media queries for block-grid classes. Set to false if writing semantic HTML.