client display improvements

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

@@ -148,7 +148,8 @@ var ClientView = Backbone.View.extend({
     events:{
         "click .btn-edit":"editClient",
         "click .btn-delete":"deleteClient",
-        "click .btn-whitelist":"whiteListClient"
+        "click .btn-whitelist":"whiteListClient",
+		'click .toggleMoreInformation': 'toggleMoreInformation'
     },
 
     editClient:function () {
@@ -203,7 +204,20 @@ var ClientView = 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/grant.js

@@ -167,7 +167,8 @@ var ApprovedSiteView = Backbone.View.extend({
 	},
 	
 	events: {
-		'click .btn-delete': 'deleteApprovedSite'
+		'click .btn-delete': 'deleteApprovedSite',
+		'click .toggleMoreInformation': 'toggleMoreInformation'
 	},
 	
 	deleteApprovedSite:function() {
@@ -206,6 +207,20 @@ var ApprovedSiteView = Backbone.View.extend({
 		return false;
 	},
 	
+	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

@@ -124,7 +124,8 @@ var WhiteListView = Backbone.View.extend({
 	
 	events:{
 		'click .btn-edit': 'editWhitelist',
-		'click .btn-delete': 'deleteWhitelist'
+		'click .btn-delete': 'deleteWhitelist',
+		'click .toggleMoreInformation': 'toggleMoreInformation'
 	},
 	
 	editWhitelist:function() {
@@ -169,6 +170,19 @@ var WhiteListView = Backbone.View.extend({
 		return false;
 	},
 	
+	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/template/client.html

@@ -29,16 +29,37 @@
 	</td>
 
     <td>
-        <%=client.clientId%>
+        <span title="<%= client.clientId %>"><%= client.clientName != null ? client.clientName : ( client.clientId.substr(0,8) + '...' ) %></span>
     </td>
 
     <td>
-        <%=client.clientName%>
+					<% if (client.clientDescription || client.clientUri || client.policyUri || client.tosUri || client.contacts) { %>
-		<% if (client.clientDescription) { %>
+						<div class="alert alert-info">
-        <blockquote><small><%=client.clientDescription%></small></blockquote>
+							<%=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>
-        <!--expandable future information-->
     </td>
 
     <td>
@@ -63,8 +84,8 @@
         <thead>
         <tr>
 			<th></th>
-            <th>ID</th>
+            <th>Client</th>
-            <th>Name</th>
+            <th>Information</th>
             <th></th>
         </tr>
         </thead>

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

@@ -35,9 +35,7 @@
         <tr>
 			<th></th>
             <th>Application</th>
-			<th>Created</th>
+			<th></th>
-			<th>Last Accessed</th>
-			<th>Expires</th>
             <th></th>
         </tr>
         </thead>
@@ -59,9 +57,7 @@
         <tr>
 			<th></th>
             <th>Application</th>
-			<th>Created</th>
+			<th></th>
-			<th>Last Accessed</th>
-			<th>Expires</th>
             <th></th>
         </tr>
         </thead>
@@ -85,10 +81,35 @@
 	</td>
 
     <td>
-        <%= client.clientName != null ? client.clientName : client.clientId %>
+
-		<% if (client.clientDescription) { %>
+        <span title="<%= client.clientId %>"><%= client.clientName != null ? client.clientName : ( client.clientId.substr(0,8) + '...' ) %></span>
-        <blockquote><small><%=client.clientDescription%></small></blockquote>
+		
-		<% } %>
+					<% 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>
 
@@ -96,15 +117,17 @@
 	<!-- TODO: make these dates collapsable/expandable -->
 
 	<td>
-		<%= formattedDate.creationDate %>
+		<div>
-	</td>
+			<i>Authorized:</i> <%= formattedDate.creationDate %>
+		</div>
 
-	<td>
+		<div>
-		<%= formattedDate.accessDate %>
+			<i>Last accessed:</i> <%= formattedDate.accessDate %>
-	</td>
+		</div>
 
-	<td>
+		<div>
-		<%= formattedDate.timeoutDate %>
+			<i>Expires:</i> <%= formattedDate.timeoutDate %>
+		</div>
 	</td>
 
     <td>

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

@@ -191,18 +191,27 @@
 <% 
 _.each(scopes, function(s) {
 	var ss = systemScopes.getByValue(s);
+	
+	if (ss) {
 %>
-	<span class="badge<%= (ss) ? ' badge-info' : '' %>"
+	<span class="badge badge-info" 
-<% if (ss && ss.get('description')) { %>
+<% if (ss.get('description')) { %>
 	title="<%= ss.get('description') %>"
 <% } %>
->
+
-<% if (ss && ss.get('icon')) { %>
+style="cursor: default;" >
+<% if (ss.get('icon')) { %>
 	<i class="icon-<%=ss.get('icon')%> icon-white"></i>
 <% } %>
 <%=s%>
 </span>
 <%
+	} else {
+%>
+	<span class="badge" style="cursor: default;"><%=s%></span>
+<%
+	}
+
 });
 %>
 

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

@@ -69,7 +69,7 @@
 
 <script type="text/html" id="tmpl-access-token">
     <td>
-        <span title="<%= client.clientId %>"><%= client.clientName != null ? client.clientName : ( client.clientId.substr(0,15) + '...' ) %></span>
+        <span title="<%= client.clientId %>"><%= client.clientName != null ? client.clientName : ( client.clientId.substr(0,8) + '...' ) %></span>
 		<% 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>
@@ -87,7 +87,6 @@
 			<input type="text" readonly style="cursor: text" class="token-full input-xxlarge" value="<%= token.value %>" />
 		</div>
 		<div class="scope-list"></div>
-        <!--expandable future information-->
     </td>
 
 	<td>
@@ -102,7 +101,7 @@
 
 <script type="text/html" id="tmpl-refresh-token">
     <td>
-        <span title="<%= client.clientId %>"><%= client.clientName != null ? client.clientName : ( client.clientId.substr(0,15) + '...' ) %></span>
+        <span title="<%= client.clientId %>"><%= client.clientName != null ? client.clientName : ( client.clientId.substr(0,8) + '...' ) %></span>
 
     </td>
 
@@ -112,7 +111,6 @@
 			<input type="text" readonly style="cursor: text" class="token-full input-xxlarge" value="<%= token.value %>" />
 		</div>
 		<div class="scope-list"></div>
-        <!--expandable future information-->
     </td>
 
 	<td>

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

@@ -24,16 +24,37 @@
 	</td>
 
     <td>
-        <%=whiteList.clientId%>
+        <span title="<%= client.clientId %>"><%= client.clientName != null ? client.clientName : ( client.clientId.substr(0,8) + '...' ) %></span>
-		<% if (client.clientDescription) { %>
+ 					<% if (client.clientDescription || client.clientUri || client.policyUri || client.tosUri || client.contacts) { %>
-        <blockquote><small><%=client.clientDescription%></small></blockquote>
+						<div class="alert alert-info">
-		<% } %>
+							<%=client.clientDescription%>
-		<div class="scope-list"></div>
+							<% if (client.clientUri || client.policyUri || client.tosUri || client.contacts) { %>
-    </td>
+								<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>
-        <%=client.clientName%>
+		<div class="scope-list"></div>
-        <!--expandable future information-->
     </td>
 
     <td>
@@ -56,8 +77,8 @@
         <thead>
         <tr>
 			<th></th>
-            <th>ID</th>
+            <th>Client</th>
-            <th>Name</th>
+            <th>Scopes</th>
             <th></th>
         </tr>
         </thead>
@@ -87,7 +108,7 @@
 				<label class="control-label">Client</label>
 				<div class="controls">
 					<input type="hidden" name="clientId" value="<%= client.clientId %>" />
-					<%= client.clientName != null ? client.clientName : client.clientId %>
+			        <span title="<%= client.clientId %>"><%= client.clientName != null ? client.clientName : ( client.clientId.substr(0,8) + '...' ) %></span>
 				</div>
 			</div>