added paginator to the token page

openid-connect-server-webapp/src/main/webapp/resources/js/client.js

@@ -304,7 +304,7 @@ var ClientListView = Backbone.View.extend({
         "click .refresh-table":"refreshTable",
         'keyup .search-query':'searchTable',
         'click .form-search button':'clearSearch',
-        'page #paginator':'changePage'
+        'page .paginator':'changePage'
     },
 
     newClient:function (e) {
@@ -328,13 +328,13 @@ var ClientListView = Backbone.View.extend({
         // set up pagination
         var numPages = Math.ceil(this.filteredModel.length / 10);
         if (numPages > 1) {
-        	$('#paginator').show();
+        	$('.paginator', this.el).show();
-        	$('#paginator', this.el).bootpag({
+        	$('.paginator', this.el).bootpag({
         		total: numPages,
         		page: 1
         	});        	
         } else {
-        	$('#paginator', this.el).hide();
+        	$('.paginator', this.el).hide();
         }
 
         // render the rows
@@ -377,9 +377,7 @@ var ClientListView = Backbone.View.extend({
 	},
 	
 	changePage:function(event, num) {
-		this.page = num;
 		$('#client-table tbody tr', this.el).each(function(index, element) {
-			console.log([num, index]);
 			if (Math.ceil((index + 1) / 10) != num) {
             	$(element).hide();
             } else {

openid-connect-server-webapp/src/main/webapp/resources/js/token.js

@@ -290,10 +290,12 @@ var RefreshTokenView = Backbone.View.extend({
 			// hide it
 			$('.moreInformation', this.el).hide('fast');
 			$('.toggleMoreInformation i', this.el).attr('class', 'icon-chevron-right');
+			$('.moreInformationContainer', this.el).removeClass('alert').removeClass('alert-info').addClass('muted');
 		} else {
 			// show it
 			$('.moreInformation', this.el).show('fast');
 			$('.toggleMoreInformation i', this.el).attr('class', 'icon-chevron-down');
+			$('.moreInformationContainer', this.el).addClass('alert').addClass('alert-info').removeClass('muted');
 		}
 
 	},
@@ -314,7 +316,9 @@ var TokenListView = Backbone.View.extend({
 	tagName: 'span',
 	
 	events:{
-		"click .refresh-table":"refreshTable"
+		"click .refresh-table":"refreshTable",
+        'page .paginator-access':'changePageAccess',
+        'page .paginator-refresh':'changePageRefresh'
 	},
 
     load:function(callback) {
@@ -344,6 +348,28 @@ var TokenListView = Backbone.View.extend({
     	
     },
 
+	changePageAccess:function(event, num) {
+		$('.paginator-access', this.el).bootpag({page: num});
+		$('#access-token-table tbody tr', this.el).each(function(index, element) {
+			if (Math.ceil((index + 1) / 10) != num) {
+            	$(element).hide();
+            } else {
+            	$(element).show();
+            }
+		});
+	},
+	
+	changePageRefresh:function(event, num) {
+		$('.paginator-refresh', this.el).bootpag({page: num});
+		$('#refresh-token-table tbody tr', this.el).each(function(index, element) {
+			if (Math.ceil((index + 1) / 10) != num) {
+            	$(element).hide();
+            } else {
+            	$(element).show();
+            }
+		});
+	},
+	
     refreshTable:function(e) {
     	e.preventDefault();
     	$('#loadingbox').sheet('show');
@@ -387,19 +413,49 @@ var TokenListView = Backbone.View.extend({
 	
 		var _self = this;
 		
-		_.each(this.model.access.models, function (token) {
+        // set up pagination
+        var numPagesAccess = Math.ceil(this.model.access.length / 10);
+        if (numPagesAccess > 1) {
+        	$('.paginator-access', this.el).show();
+        	$('.paginator-access', this.el).bootpag({
+        		total: numPagesAccess,
+        		page: 1
+        	});        	
+        } else {
+        	$('.paginator-access', this.el).hide();
+        }
+
+        _.each(this.model.access.models, function (token, index) {
 			// look up client
 			var client = _self.options.clientList.getByClientId(token.get('clientId'));
-			
+			var element = new AccessTokenView({model: token, client: client, systemScopeList: _self.options.systemScopeList}).render().el;
-			$('#access-token-table', _self.el).append(new AccessTokenView({model: token, client: client, systemScopeList: _self.options.systemScopeList}).render().el);
+			$('#access-token-table', _self.el).append(element);
+            if (Math.ceil((index + 1) / 10) != 1) {
+            	$(element).hide();
+            }
 
 		});
 		
-		_.each(this.model.refresh.models, function (token) {
+        // set up pagination
+        var numPagesRefresh = Math.ceil(this.model.refresh.length / 10);
+        if (numPagesRefresh > 1) {
+        	$('.paginator-refresh', this.el).show();
+        	$('.paginator-refresh', this.el).bootpag({
+        		total: numPagesRefresh,
+        		page: 1
+        	});        	
+        } else {
+        	$('.paginator-refresh', this.el).hide();
+        }
+
+        _.each(this.model.refresh.models, function (token, index) {
 			// look up client
 			var client = _self.options.clientList.getByClientId(token.get('clientId'));
-			
+			var element = new RefreshTokenView({model: token, client: client, systemScopeList: _self.options.systemScopeList}).render().el;
-			$('#refresh-token-table', _self.el).append(new RefreshTokenView({model: token, client: client, systemScopeList: _self.options.systemScopeList}).render().el);
+			$('#refresh-token-table', _self.el).append(element);
+            if (Math.ceil((index + 1) / 10) != 1) {
+            	$(element).hide();
+            }
 
 		});
 		

openid-connect-server-webapp/src/main/webapp/resources/template/client.html

@@ -54,12 +54,12 @@
 <script type="text/html" id="tmpl-client-more-info-block">
 					<% if (client.clientDescription || client.clientUri || client.policyUri || client.tosUri || client.contacts != null && client.contacts.length > 0) { %>
 						<div class="muted moreInformationContainer">
-							<%=client.clientDescription%>
 							<% if (client.clientUri || client.policyUri || client.tosUri || client.contacts) { %>
 								<div class="toggleMoreInformation" style="cursor: pointer;">
 									<i class="icon-chevron-right"></i> <small>more information</small>
 								</div>
 								<div class="moreInformation hide">
+									<%=client.clientDescription%>
 									<ul>
 										<% if (client.clientUri) { %>
 											<li>Home page: <a href="<%= client.clientUri %>"><%= client.clientUri %></a></li>
@@ -114,7 +114,7 @@
         </tbody>
     </table>
 
-	<div id="paginator" class="pagination"> </div>
+	<div class="pagination paginator"></div>
 
     <div class="well well-small">
 		<button class="btn btn-small refresh-table"><i class="icon-refresh"></i> Refresh</button> &nbsp; 

openid-connect-server-webapp/src/main/webapp/resources/template/token.html

@@ -28,6 +28,8 @@
 		There are no active access tokens.
 	</div>
 
+	<div class="pagination paginator-access"></div>
+
     <table id="access-token-table" class="table table-hover table-striped">
         <thead>
         <tr>
@@ -41,6 +43,8 @@
         </tbody>
     </table>
 
+	<div class="pagination paginator-access"></div>
+
 	<h2>Refresh Tokens</h2>
 
 	<div><p>Refresh tokens are usually long-lived and provide clients with the ability to get new access tokens without end-user involvement.</p></div>
@@ -49,6 +53,8 @@
 		There are no active refresh tokens.
 	</div>
 
+	<div class="pagination paginator-refresh"></div>
+
     <table id="refresh-token-table" class="table table-hover table-striped">
         <thead>
         <tr>
@@ -62,6 +68,8 @@
         </tbody>
     </table>
 
+	<div class="pagination paginator-refresh"></div>
+
     <div class="well well-small">
 		<button class="btn btn-small refresh-table"><i class="icon-refresh"></i> Refresh</button> &nbsp; 
     </div>