Work in progress

rudder-web/src/main/webapp/javascript/rudder/angular/apiAccount.js

@@ -35,7 +35,7 @@
 *************************************************************************************
 */
 
-var accountManagement = angular.module('accountManagement', ['datatables']);
+var accountManagement = angular.module('accountManagement', ['datatables', 'ui.toggle']);
 
 var popUpCreated = false;
 accountManagement.directive('validEmpty', function() {
@@ -69,7 +69,6 @@ accountManagement.controller('AccountCtrl', function ($scope, $http, DTOptionsBu
     });
   }
 
-
   $scope.deleteAccount = function(account,index) {
     $http.delete(apiPath + '/'+account.token).
         success(function(data, status, headers, config) {

rudder-web/src/main/webapp/secure/administration/apiManagement.html

@@ -91,7 +91,8 @@
                 </td>
                 <td>
                   <button class='btn btn-default' ng-click="account.oldName=account.name; popupCreation(account)"><span class="fa fa-pencil"></span></button>
-                  <button class='btn' ng-class="account.enabled ? 'btn-grey' : 'btn-success'" ng-click="account.enabled=!account.enabled; saveAccount(account,false)"><span class="fa" ng-class="account.enabled ? 'fa-stop-circle' : 'fa-play-circle' "></span></button>
+                  <toggle on="Enabled" off="Disabled" ng-model="account.enabled" onstyle="btn-success" offstyle="btn-grey" ng-change="saveAccount(account,false)" ></toggle>
+                  <button class='btn' ng-class="account.enabled ? 'btn-grey' : 'btn-success'" ><span class="fa" ng-class="account.enabled ? 'fa-stop-circle' : 'fa-play-circle' "></span></button>
                   <button class='btn btn-danger' ng-click="popupDeletion(account,deleteAccount,'Delete');"><span class="fa fa-times-circle"></span></button>
                 </td>
                 <td ><ul><li ng-repeat="acl in account.acls">{{acl}}</li></ul></td>

rudder-web/src/main/webapp/templates-hidden/common-layout.html

@@ -23,6 +23,7 @@
     <link type="text/css" rel="stylesheet" data-lift="with-cached-resource" href="/style/rudder/rudder.css" media="screen" />
 
     <link type="text/css" rel="stylesheet" data-lift="with-cached-resource" href="/style/bootstrap/tw-bs-bootstrap-3.3.7.css" media="screen" />
+    <link type="text/css" rel="stylesheet" data-lift="with-cached-resource" href="/style/angular/angular-bootstrap-toggle.min.css" media="screen" />
     <link type="text/css" rel="stylesheet" data-lift="with-cached-resource" href="/style/rudder/rudder-progress-bar.css" media="screen" />
     <link type="text/css" rel="stylesheet" data-lift="with-cached-resource" href="/style/rudder/rudder-bootstrap.css" media="screen" />
     <link type="text/css" rel="stylesheet" data-lift="with-cached-resource" href="/style/rudder/rudder-quicksearch.css" media="screen" />
@@ -54,6 +55,7 @@
 
     <script type="text/javascript" data-lift="with-cached-resource" src="/javascript/angular/angular.min.js" ></script>
     <script type="text/javascript" data-lift="with-cached-resource" src="/javascript/angular/angular-animate.min.js" ></script>
+    <script type="text/javascript" data-lift="with-cached-resource" src="/javascript/angular/angular-bootstrap-toggle.min.js"></script>
     <script type="text/javascript" data-lift="with-cached-resource" src="/javascript/angular/angular-datatables.min.js" ></script>
     <script type="text/javascript" data-lift="with-cached-resource" src="/javascript/angular/angular-touch.min.js"></script>
     <script type="text/javascript" data-lift="with-cached-resource" src="/javascript/angular/angucomplete-alt.min.js"></script>