Consolidated client "more info" views

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

@@ -130,6 +130,10 @@ var ClientView = Backbone.View.extend({
         	this.scopeTemplate = _.template($('#tmpl-scope-list').html());
         }
 
+        if (!this.moreInfoTemplate) {
+        	this.moreInfoTemplate = _.template($('#tmpl-client-more-info-block').html());
+        }
+        
         this.model.bind('change', this.render, this);
         
     },
@@ -140,6 +144,8 @@ var ClientView = Backbone.View.extend({
 
         $('.scope-list', this.el).html(this.scopeTemplate({scopes: this.model.get('scope'), systemScopes: this.options.systemScopeList}));
         
+        $('.client-more-info-block', this.el).html(this.moreInfoTemplate({client: this.model.toJSON()}));
+        
         this.$('.dynamically-registered').tooltip({title: 'This client was dynamically registered'});
         
         return this;
@@ -581,6 +587,8 @@ var ClientFormView = Backbone.View.extend({
             	
             	$('#modalAlert .modal-body').html(_self.clientSavedTemplate(_self.model.toJSON()));
             	
+            	$('#modalAlert .modal-body #savedClientSecret').hide();
+            	
             	$('#modalAlert').on('click', '#clientSaveShow', function(event) {
             		event.preventDefault();
             		$('#clientSaveShow').hide();

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

@@ -114,6 +114,10 @@ var ApprovedSiteView = Backbone.View.extend({
         	this.scopeTemplate = _.template($('#tmpl-scope-list').html());
         }
 
+        if (!this.moreInfoTemplate) {
+        	this.moreInfoTemplate = _.template($('#tmpl-client-more-info-block').html());
+        }
+
 	},
 
 	render: function() {
@@ -160,6 +164,8 @@ var ApprovedSiteView = Backbone.View.extend({
 
         $('.scope-list', this.el).html(this.scopeTemplate({scopes: this.model.get('allowedScopes'), systemScopes: this.options.systemScopeList}));
         
+        $('.client-more-info-block', this.el).html(this.moreInfoTemplate({client: this.options.client.toJSON()}));
+        
         this.$('.dynamically-registered').tooltip({title: 'This client was dynamically registered'});
         this.$('.whitelisted-site').tooltip({title: 'This site was whitelisted by an adminstrator'});
         

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

@@ -55,13 +55,18 @@ var AccessTokenView = Backbone.View.extend({
         	this.scopeTemplate = _.template($('#tmpl-scope-list').html());
         }
 
+        if (!this.moreInfoTemplate) {
+        	this.moreInfoTemplate = _.template($('#tmpl-client-more-info-block').html());
+        }
+
         this.model.bind('change', this.render, this);
         
     },
     
     events: {
 		'click .btn-delete':'deleteToken',
-		'click .token-substring':'showTokenValue'
+		'click .token-substring':'showTokenValue',
+		'click .toggleMoreInformation': 'toggleMoreInformation'
 	},
 	
     render:function (eventName) {
@@ -86,6 +91,8 @@ var AccessTokenView = Backbone.View.extend({
 		// show scopes
         $('.scope-list', this.el).html(this.scopeTemplate({scopes: this.model.get('scopes'), systemScopes: this.options.systemScopeList}));	
 		
+        $('.client-more-info-block', this.el).html(this.moreInfoTemplate({client: this.options.client.toJSON()}));
+
         return this;
     },
     
@@ -128,7 +135,21 @@ var AccessTokenView = Backbone.View.extend({
         return false;
     },
     
-    close:function () {
+	toggleMoreInformation:function(event) {
+		event.preventDefault();
+		if ($('.moreInformation', this.el).is(':visible')) {
+			// hide it
+			$('.moreInformation', this.el).hide('fast');
+			$('.toggleMoreInformation i', this.el).attr('class', 'icon-chevron-right');
+		} else {
+			// show it
+			$('.moreInformation', this.el).show('fast');
+			$('.toggleMoreInformation i', this.el).attr('class', 'icon-chevron-down');
+		}
+
+	},
+
+	close:function () {
         $(this.el).unbind();
         $(this.el).empty();
     },
@@ -177,13 +198,18 @@ var RefreshTokenView = Backbone.View.extend({
         	this.scopeTemplate = _.template($('#tmpl-scope-list').html());
         }
 
+        if (!this.moreInfoTemplate) {
+        	this.moreInfoTemplate = _.template($('#tmpl-client-more-info-block').html());
+        }
+
         this.model.bind('change', this.render, this);
         
     },
     
     events: {
 		'click .btn-delete':'deleteToken',
-		'click .token-substring':'showTokenValue'
+		'click .token-substring':'showTokenValue',
+		'click .toggleMoreInformation': 'toggleMoreInformation'
 	},
 	
     render:function (eventName) {
@@ -208,6 +234,8 @@ var RefreshTokenView = Backbone.View.extend({
 		// show scopes
         $('.scope-list', this.el).html(this.scopeTemplate({scopes: this.model.get('scopes'), systemScopes: this.options.systemScopeList}));	
 		
+        $('.client-more-info-block', this.el).html(this.moreInfoTemplate({client: this.options.client.toJSON()}));
+        
         return this;
 
     },
@@ -251,7 +279,21 @@ var RefreshTokenView = Backbone.View.extend({
         return false;
     },
     
-    close:function () {
+	toggleMoreInformation:function(event) {
+		event.preventDefault();
+		if ($('.moreInformation', this.el).is(':visible')) {
+			// hide it
+			$('.moreInformation', this.el).hide('fast');
+			$('.toggleMoreInformation i', this.el).attr('class', 'icon-chevron-right');
+		} else {
+			// show it
+			$('.moreInformation', this.el).show('fast');
+			$('.toggleMoreInformation i', this.el).attr('class', 'icon-chevron-down');
+		}
+
+	},
+
+	close:function () {
         $(this.el).unbind();
         $(this.el).empty();
     },

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

@@ -106,6 +106,10 @@ var WhiteListView = Backbone.View.extend({
         	this.scopeTemplate = _.template($('#tmpl-scope-list').html());
         }
 
+        if (!this.moreInfoTemplate) {
+        	this.moreInfoTemplate = _.template($('#tmpl-client-more-info-block').html());
+        }
+
 		this.model.bind('change', this.render, this);
 	},
 	
@@ -117,6 +121,8 @@ var WhiteListView = Backbone.View.extend({
 
         $('.scope-list', this.el).html(this.scopeTemplate({scopes: this.model.get('allowedScopes'), systemScopes: this.options.systemScopeList}));
         
+        $('.client-more-info-block', this.el).html(this.moreInfoTemplate({client: this.options.client.toJSON()}));
+        
 		this.$('.dynamically-registered').tooltip({title: 'This client was dynamically registered'});
 
         return this;

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

@@ -35,12 +35,29 @@
     </td>
 
     <td>
+		<div class="client-more-info-block"></div>
+		<div class="scope-list"></div>
+    </td>
+
+    <td>
+        <button class="btn btn-edit"><i class="icon-edit"></i> Edit</button> &nbsp;
+		<% if (whiteList != null) { %> 
+			<button class="btn btn-warning btn-whitelist"><i class="icon-wrench icon-white"></i> Whitelist</button> &nbsp;
+		<% } else { %>
+			<button class="btn btn-warning btn-whitelist"><i class="icon-plus-sign icon-white"></i> Whitelist</button> &nbsp;
+		<% } %>
+		<button class="btn btn-danger btn-delete pull-right"><i class="icon-trash icon-white"></i> Delete</button>
+    </td>
+
+</script>
+
+<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="alert alert-info">
 							<%=client.clientDescription%>
 							<% if (client.clientUri || client.policyUri || client.tosUri || client.contacts) { %>
 								<div class="toggleMoreInformation" style="cursor: pointer;">
-									<i class="icon-chevron-right"></i> more information
+									<i class="icon-chevron-right"></i> <small>more information</small>
 								</div>
 								<div class="moreInformation hide">
 									<ul>
@@ -61,19 +78,6 @@
 							<% } %>
 						</div>
 					<% } %>
-		<div class="scope-list"></div>
-    </td>
-
-    <td>
-        <button class="btn btn-edit"><i class="icon-edit"></i> Edit</button> &nbsp;
-		<% if (whiteList != null) { %> 
-			<button class="btn btn-warning btn-whitelist"><i class="icon-wrench icon-white"></i> Whitelist</button> &nbsp;
-		<% } else { %>
-			<button class="btn btn-warning btn-whitelist"><i class="icon-plus-sign icon-white"></i> Whitelist</button> &nbsp;
-		<% } %>
-		<button class="btn btn-danger btn-delete pull-right"><i class="icon-trash icon-white"></i> Delete</button>
-    </td>
-
 </script>
 
 <script type="text/html" id="tmpl-client-table">
@@ -678,11 +682,13 @@
 <script type="text/html" id="tmpl-client-saved">
 
 	<div>
-		<strong>ID:</strong> <code><%= clientId %></code>
+		<strong>ID:</strong> <input type="text" readonly style="cursor: text" class="token-full input-xxlarge" value="<%= clientId %>" />
+
 	</div>
 	<% if (generateClientSecret && clientSecret != null && clientSecret != '') { %>
 	<div>
-		<strong>Secret:</strong> <button class="btn btn-mini" id="clientSaveShow">Show Secret</button><code id="savedClientSecret" class="hide" style="word-wrap: break-word;"><%= clientSecret %></code>
+		<strong>Secret:</strong> <button class="btn btn-mini" id="clientSaveShow">Show Secret</button>
+		<input type="text" id="savedClientSecret" readonly style="cursor: text" class="token-full input-xxlarge" value="<%= clientSecret %>" />
 	</div>
 	<% } else { %>
 	<div>

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

@@ -83,33 +83,7 @@
     <td>
 
         <span title="<%= client.clientId %>"><%= client.clientName != null ? client.clientName : ( client.clientId.substr(0,8) + '...' ) %></span>
-		
+		<div class="client-more-info-block"></div>
-					<% if (client.clientDescription || client.clientUri || client.policyUri || client.tosUri || client.contacts) { %>
-						<div class="alert alert-info">
-							<%=client.clientDescription%>
-							<% if (client.clientUri || client.policyUri || client.tosUri || client.contacts) { %>
-								<div class="toggleMoreInformation" style="cursor: pointer;">
-									<i class="icon-chevron-right"></i> more information
-								</div>
-								<div class="moreInformation hide">
-									<ul>
-										<% if (client.clientUri) { %>
-											<li>Home page: <a href="<%= client.clientUri %>"><%= client.clientUri %></a></li>
-										<% } %>
-										<% if (client.policyUri) { %>
-											<li>Policy: <a href="<%= client.policyUri %>"><%= client.policyUri %></a></li>
-										<% } %>
-										<% if (client.tosUri) { %>
-											<li>Terms of Service: <a href="<%= client.tosUri %>"><%= client.tosUri %></a></li>
-										<% } %>
-										<% if (client.contacts) { %>
-											<li>Administrative Contacts: <%= client.contacts.join(', ') %></li>
-										<% } %>
-									</ul>
-								</div>
-							<% } %>
-						</div>
-					<% } %>
 		<div class="scope-list"></div>
     </td>
 

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

@@ -70,6 +70,7 @@
 <script type="text/html" id="tmpl-access-token">
     <td>
         <span title="<%= client.clientId %>"><%= client.clientName != null ? client.clientName : ( client.clientId.substr(0,8) + '...' ) %></span>
+		<div class="client-more-info-block"></div>
 		<% if (token.refreshTokenId != null) { %>
 		<br />
 		<span class="label label-important" title="This access token was issued with an associated refresh token.">+ <i class="icon-time icon-white"></i> Refresh</span>
@@ -102,7 +103,7 @@
 <script type="text/html" id="tmpl-refresh-token">
     <td>
         <span title="<%= client.clientId %>"><%= client.clientName != null ? client.clientName : ( client.clientId.substr(0,8) + '...' ) %></span>
-
+		<div class="client-more-info-block"></div>
     </td>
 
     <td>

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

@@ -25,32 +25,7 @@
 
     <td>
         <span title="<%= client.clientId %>"><%= client.clientName != null ? client.clientName : ( client.clientId.substr(0,8) + '...' ) %></span>
- 					<% if (client.clientDescription || client.clientUri || client.policyUri || client.tosUri || client.contacts) { %>
+		<div class="client-more-info-block"></div>
-						<div class="alert alert-info">
-							<%=client.clientDescription%>
-							<% if (client.clientUri || client.policyUri || client.tosUri || client.contacts) { %>
-								<div class="toggleMoreInformation" style="cursor: pointer;">
-									<i class="icon-chevron-right"></i> more information
-								</div>
-								<div class="moreInformation hide">
-									<ul>
-										<% if (client.clientUri) { %>
-											<li>Home page: <a href="<%= client.clientUri %>"><%= client.clientUri %></a></li>
-										<% } %>
-										<% if (client.policyUri) { %>
-											<li>Policy: <a href="<%= client.policyUri %>"><%= client.policyUri %></a></li>
-										<% } %>
-										<% if (client.tosUri) { %>
-											<li>Terms of Service: <a href="<%= client.tosUri %>"><%= client.tosUri %></a></li>
-										<% } %>
-										<% if (client.contacts) { %>
-											<li>Administrative Contacts: <%= client.contacts.join(', ') %></li>
-										<% } %>
-									</ul>
-								</div>
-							<% } %>
-						</div>
-					<% } %>
    </td>
 
     <td>