Animation de connection

Geoffrey PREUD'HOMME
1 parent 51adb054
Showing 5 changed files with 13 additions and 4 deletions Show diff stats
bower.json
public/js/app.js
public/js/controllers/ConnectCtrl.js
public/views/connect.html
public/views/index.html
@@ -8,6 +8,7 @@
     "bootswatch-dist": "3.3.2-cerulean",
     "jsencrypt": "~2.1.0",
     "animate.css": "~3.2.6",
-    "remarkable-bootstrap-notify": "~3.0.0"
+    "remarkable-bootstrap-notify": "~3.0.0",
+    "angular-ladda": "~0.2.2"
   }
 }
-angular.module('ciApp', ['ngRoute', 'appRoutes', 'NotifyServ', 'EncryptServ', 'SessionsServ', 'SessionsCtrl', 'ConnectCtrl', 'MembreCtrl']);
+angular.module('ciApp', ['ngRoute', 'appRoutes', 'angular-ladda', 'NotifyServ', 'EncryptServ', 'SessionsServ', 'SessionsCtrl', 'ConnectCtrl', 'MembreCtrl']);
@@ -3,9 +3,13 @@ angular.module(&#39;ConnectCtrl&#39;, []).controller(&#39;ConnectCtrl&#39;, [&#39;$scope&#39;, &#39;SessionS
         EncryptServ.preload(function () {
             return undefined;
         });
+        $scope.connecting = false;
         $scope.connect = {
             connect: function () {
-                SessionServ.connect($scope.connect.login, $scope.connect.pass);
+                $scope.connecting = true;
+                SessionServ.connect($scope.connect.login, $scope.connect.pass, function() {
+                    $scope.connecting = false;
+                });
             }
         };
     }
@@ -9,6 +9,6 @@
             <label for="pass">Mot de passe</label>
             <input type="password" class="form-control" id="pass" ng-model="connect.pass" placeholder="Mot de passe Polytech">
         </div>
-        <button type="submit" class="btn btn-default" ng-click="connect.connect()">Se connecter</button>
+        <button type="submit" ladda="connecting" class="btn btn-primary" ng-click="connect.connect()">Se connecter</button>
     </form>
 </div>
@@ -9,12 +9,16 @@
     <link rel="stylesheet" href="libs/bootswatch-dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="libs/animate.css/animate.min.css">
+    <link rel="stylesheet" href="libs/ladda/dist/ladda-themeless.min.css">
     <script src="libs/jquery/dist/jquery.min.js"></script>
     <script src="libs/angular/angular.min.js"></script>
     <script src="libs/angular-route/angular-route.min.js"></script>
     <script src="libs/angular-bootstrap/ui-bootstrap.min.js"></script>
     <script src="libs/jsencrypt/bin/jsencrypt.min.js"></script>
     <script src="libs/remarkable-bootstrap-notify/bootstrap-notify.min.js"></script>
+    <script src="libs/ladda/js/spin.js"></script>
+    <script src="libs/ladda/js/ladda.js"></script>
+    <script src="libs/angular-ladda/dist/angular-ladda.min.js"></script>
     <script src="js/services/NotifyServ.js"></script>
     <script src="js/services/EncryptServ.js"></script>
     <script src="js/services/SessionServ.js"></script>