From f8e82037fe62881c20899c2352a86178f99d020a Mon Sep 17 00:00:00 2001
From: Justin Richer <jricher@mit.edu>
Date: Sun, 2 Mar 2014 01:03:15 +0000
Subject: [PATCH] client display improvements

---
 .../src/main/webapp/resources/js/client.js    | 18 +++++-
 .../src/main/webapp/resources/js/grant.js     | 17 +++++-
 .../src/main/webapp/resources/js/whitelist.js | 16 +++++-
 .../webapp/resources/template/client.html     | 37 +++++++++---
 .../main/webapp/resources/template/grant.html | 57 +++++++++++++------
 .../main/webapp/resources/template/scope.html | 17 ++++--
 .../main/webapp/resources/template/token.html |  6 +-
 .../webapp/resources/template/whitelist.html  | 43 ++++++++++----
 8 files changed, 163 insertions(+), 48 deletions(-)

diff --git a/openid-connect-server-webapp/src/main/webapp/resources/js/client.js b/openid-connect-server-webapp/src/main/webapp/resources/js/client.js
index 7deec7ac2..fdb29028b 100644
--- a/openid-connect-server-webapp/src/main/webapp/resources/js/client.js
+++ b/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();
     }
diff --git a/openid-connect-server-webapp/src/main/webapp/resources/js/grant.js b/openid-connect-server-webapp/src/main/webapp/resources/js/grant.js
index 6706aa1c2..9dc501fc5 100644
--- a/openid-connect-server-webapp/src/main/webapp/resources/js/grant.js
+++ b/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();
diff --git a/openid-connect-server-webapp/src/main/webapp/resources/js/whitelist.js b/openid-connect-server-webapp/src/main/webapp/resources/js/whitelist.js
index a8c7ca96b..f4089e47f 100644
--- a/openid-connect-server-webapp/src/main/webapp/resources/js/whitelist.js
+++ b/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();
diff --git a/openid-connect-server-webapp/src/main/webapp/resources/template/client.html b/openid-connect-server-webapp/src/main/webapp/resources/template/client.html
index 8c0dc9790..36a2fd265 100644
--- a/openid-connect-server-webapp/src/main/webapp/resources/template/client.html
+++ b/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) { %>
-        <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>
-        <!--expandable future information-->
     </td>
 
     <td>
@@ -63,8 +84,8 @@
         <thead>
         <tr>
 			<th></th>
-            <th>ID</th>
-            <th>Name</th>
+            <th>Client</th>
+            <th>Information</th>
             <th></th>
         </tr>
         </thead>
diff --git a/openid-connect-server-webapp/src/main/webapp/resources/template/grant.html b/openid-connect-server-webapp/src/main/webapp/resources/template/grant.html
index 51c07a3c6..cb95832cf 100644
--- a/openid-connect-server-webapp/src/main/webapp/resources/template/grant.html
+++ b/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>Last Accessed</th>
-			<th>Expires</th>
+			<th></th>
             <th></th>
         </tr>
         </thead>
@@ -59,9 +57,7 @@
         <tr>
 			<th></th>
             <th>Application</th>
-			<th>Created</th>
-			<th>Last Accessed</th>
-			<th>Expires</th>
+			<th></th>
             <th></th>
         </tr>
         </thead>
@@ -85,10 +81,35 @@
 	</td>
 
     <td>
-        <%= client.clientName != null ? client.clientName : client.clientId %>
-		<% if (client.clientDescription) { %>
-        <blockquote><small><%=client.clientDescription%></small></blockquote>
-		<% } %>
+
+        <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="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 %>
-	</td>
+		<div>
+			<i>Authorized:</i> <%= formattedDate.creationDate %>
+		</div>
 
-	<td>
-		<%= formattedDate.accessDate %>
-	</td>
+		<div>
+			<i>Last accessed:</i> <%= formattedDate.accessDate %>
+		</div>
 
-	<td>
-		<%= formattedDate.timeoutDate %>
+		<div>
+			<i>Expires:</i> <%= formattedDate.timeoutDate %>
+		</div>
 	</td>
 
     <td>
diff --git a/openid-connect-server-webapp/src/main/webapp/resources/template/scope.html b/openid-connect-server-webapp/src/main/webapp/resources/template/scope.html
index d06532e64..a817bb00e 100644
--- a/openid-connect-server-webapp/src/main/webapp/resources/template/scope.html
+++ b/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' : '' %>"
-<% if (ss && ss.get('description')) { %>
+	<span class="badge badge-info" 
+<% 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>
+<%
+	}
+
 });
 %>
 
diff --git a/openid-connect-server-webapp/src/main/webapp/resources/template/token.html b/openid-connect-server-webapp/src/main/webapp/resources/template/token.html
index b9ce9d8b9..ccb0ee369 100644
--- a/openid-connect-server-webapp/src/main/webapp/resources/template/token.html
+++ b/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>
diff --git a/openid-connect-server-webapp/src/main/webapp/resources/template/whitelist.html b/openid-connect-server-webapp/src/main/webapp/resources/template/whitelist.html
index 8df3d0fc5..a31a1b408 100644
--- a/openid-connect-server-webapp/src/main/webapp/resources/template/whitelist.html
+++ b/openid-connect-server-webapp/src/main/webapp/resources/template/whitelist.html
@@ -24,16 +24,37 @@
 	</td>
 
     <td>
-        <%=whiteList.clientId%>
-		<% if (client.clientDescription) { %>
-        <blockquote><small><%=client.clientDescription%></small></blockquote>
-		<% } %>
-		<div class="scope-list"></div>
-    </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="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>
-        <%=client.clientName%>
-        <!--expandable future information-->
+		<div class="scope-list"></div>
     </td>
 
     <td>
@@ -56,8 +77,8 @@
         <thead>
         <tr>
 			<th></th>
-            <th>ID</th>
-            <th>Name</th>
+            <th>Client</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>