replace alert with modal window from angular UI Bootstrap

prigaux · prigaux · commit eed8ff0e1a7f · 2014-12-11T16:31:08.000+01:00
diff --git a/app/app.js b/app/app.js
@@ -4,19 +4,20 @@
 angular.module('myApp', [
   'ngRoute',
   'http-auth-interceptor',
+  'ui.bootstrap',
+  'myApp.relog',
   'myApp.view1',
   'myApp.view2',
   'myApp.logout',
   'myApp.version'
 ]).
 config(['$routeProvider', function($routeProvider) {
   $routeProvider.otherwise({redirectTo: '/view1'});
-}]).run(function ($rootScope, $window) {
+}]).run(function ($rootScope, $modal) {
     
     // Call when the 401 response is returned by the server
     $rootScope.$on('event:auth-loginRequired', function(rejection) {
-        $window.alert("Session timeout, will restart...");
-	$window.location.reload();
+	$modal.open({ templateUrl: 'relog/relog.html', controller: 'RelogCtrl', backdrop: false });
     });
 
 });
diff --git a/app/index.html b/app/index.html
@@ -9,10 +9,8 @@
   <title>My AngularJS App</title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
-  <link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
+  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="app.css">
-  <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
 </head>
 <body>
   <ul class="menu">
@@ -33,12 +31,14 @@
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
   -->
   <script src="bower_components/angular/angular.js"></script>
+  <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
   <script src="bower_components/angular-route/angular-route.js"></script>
   <script src="bower_components/angular-http-auth/src/http-auth-interceptor.js"></script>
   <script src="app.js"></script>
   <script src="view1/view1.js"></script>
   <script src="view2/view2.js"></script>
   <script src="logout/logout.js"></script>
+  <script src="relog/relog.js"></script>
   <script src="components/version/version.js"></script>
   <script src="components/version/version-directive.js"></script>
   <script src="components/version/interpolate-filter.js"></script>
diff --git a/app/relog/relog.html b/app/relog/relog.html
@@ -0,0 +1,9 @@
+<div class="modal-header">
+  <h3 class="modal-title">Session timeout</h3>
+</div>
+<div class="modal-body">
+  Please re-log
+</div>
+<div class="modal-footer">
+  <button class="btn btn-primary" ng-click="relog()">Relog</button>
+</div>
diff --git a/app/relog/relog.js b/app/relog/relog.js
@@ -0,0 +1,9 @@
+'use strict';
+
+angular.module('myApp.relog', [])
+
+.controller('RelogCtrl', function($scope, $window) {
+    $scope.relog = function () {
+	$window.location = "index.php";
+    }
+});
diff --git a/bower.json b/bower.json
@@ -11,6 +11,7 @@
     "angular-loader": "1.2.x",
     "angular-mocks": "~1.2.x",
     "angular-http-auth": "1.2.x",
-    "html5-boilerplate": "~4.3.0"
+    "angular-bootstrap": "*",
+    "bootstrap": "3.x"
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,7 @@`
`11`	`11`	`"angular-loader": "1.2.x",`
`12`	`12`	`"angular-mocks": "~1.2.x",`
`13`	`13`	`"angular-http-auth": "1.2.x",`
`14`		`- "html5-boilerplate": "~4.3.0"`
	`14`	`+ "angular-bootstrap": "*",`
	`15`	`+ "bootstrap": "3.x"`
`15`	`16`	`}`
`16`	`17`	`}`