clean up time display

openid-connect-server-webapp/src/main/webapp/WEB-INF/views/approve.jsp

@@ -41,7 +41,7 @@
 						<c:choose>
 							<c:when test="${ gras }">
 								<!-- client is "generally recognized as safe, display a more muted block -->
-								<div><p class="alert alert-info"><i class="icon-globe"></i> This client was dynamically registered.</p></div>
+								<div><p class="alert alert-info"><i class="icon-globe"></i> This client was dynamically registered <span id="registrationTime"></span>.</p></div>
 							</c:when>
 							<c:otherwise>
 								<!-- client is dynamically registered -->
@@ -49,7 +49,8 @@
 									<h4>
 										<i class="icon-globe"></i> Caution:
 									</h4>
-									This software was dynamically registered and it has been approved
+									This software was dynamically registered <span id="registrationTime" class="label"></span> 
+									and it has been approved
 									<span class="label"><c:out value="${ count }" /></span>
 									time<c:out value="${ count == 1 ? '' : 's' }"/> previously.
 								</div>
@@ -268,6 +269,24 @@ $(document).ready(function() {
 			}
 		});
 		
+		var creationDate = "<c:out value="${ client.createdAt }" />";
+		var displayCreationDate = "Unknown";
+		var hoverCreationDate = "";
+		if (creationDate == null || !moment(creationDate).isValid()) {
+			displayCreationDate = "Unknown";
+			hoverCreationDate = "";
+		} else {
+			creationDate = moment(creationDate);
+			if (moment().diff(creationDate, 'months') < 6) {
+				displayCreationDate = creationDate.fromNow();
+			} else {
+				displayCreationDate = "on " + creationDate.format("MMMM Do, YYYY");
+			}
+			hoverCreationDate = creationDate.format("MMMM Do, YYYY [at] h:mmA")
+		}
+		
+		$('#registrationTime').html(displayCreationDate);
+		$('#registrationTime').attr('title', hoverCreationDate);
 });
 
 //-->

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

@@ -169,7 +169,26 @@ var ClientView = Backbone.View.extend({
     },
 
     render:function (eventName) {
-    	var json = {client: this.model.toJSON(), count: this.options.count, whiteList: this.options.whiteList};
+    	
+    	var creationDate = this.model.get('createdAt');
+		var displayCreationDate = "Unknown";
+		var hoverCreationDate = "";
+		if (creationDate == null || !moment(creationDate).isValid()) {
+			displayCreationDate = "Unknown";
+			hoverCreationDate = "";
+		} else {
+			creationDate = moment(creationDate);
+			if (moment().diff(creationDate, 'months') < 6) {
+				displayCreationDate = creationDate.fromNow();
+			} else {
+				displayCreationDate = "on " + creationDate.format("MMMM Do, YYYY");
+			}
+			hoverCreationDate = creationDate.format("MMMM Do, YYYY [at] h:mmA");
+		}
+
+    	
+    	var json = {client: this.model.toJSON(), count: this.options.count, whiteList: this.options.whiteList, 
+    			displayCreationDate: displayCreationDate, hoverCreationDate: hoverCreationDate};
         this.$el.html(this.template(json));
 
         $('.scope-list', this.el).html(this.scopeTemplate({scopes: this.model.get('scope'), systemScopes: this.options.systemScopeList}));
@@ -770,7 +789,6 @@ var ClientFormView = Backbone.View.extend({
 
         $(this.el).html(this.template(this.model.toJSON()));
         
-        
         var _self = this;
 
         // build and bind registered redirect URI collection and view

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

@@ -158,37 +158,58 @@ var ApprovedSiteView = Backbone.View.extend({
 		var accessDate = this.model.get("accessDate");
 		var timeoutDate = this.model.get("timeoutDate");
 		
+		var displayCreationDate = "Unknown";
+		var hoverCreationDate = "";
 		if (creationDate == null || !moment(creationDate).isValid()) {
-			creationDate = "Unknown";
+			displayCreationDate = "Unknown";
+			hoverCreationDate = "";
 		} else {
 			creationDate = moment(creationDate);
 			if (moment().diff(creationDate, 'months') < 6) {
-				creationDate = creationDate.fromNow();
+				displayCreationDate = creationDate.fromNow();
 			} else {
-				creationDate = creationDate.format("MMMM Do, YYYY");
+				displayCreationDate = creationDate.format("MMMM Do, YYYY");
 			}
+			hoverCreationDate = creationDate.format("MMMM Do, YYYY [at] h:mmA");
 		}
 
+		var displayAccessDate = "Unknown";
+		var hoverAccessDate = "";
 		if (accessDate == null || !moment(accessDate).isValid()) {
-			accessDate = "Unknown";
+			displayAccessDate = "Unknown";
+			hoverAccessDate = "";
 		} else {
 			accessDate = moment(accessDate);
 			if (moment().diff(accessDate, 'months') < 6) {
-				accessDate = accessDate.fromNow();
+				displayAccessDate = accessDate.fromNow();
 			} else {
-				accessDate = accessDate.format("MMMM Do, YYYY");
+				displayAccessDate = accessDate.format("MMMM Do, YYYY");
 			}
+			hoverAccessDate = accessDate.format("MMMM Do, YYYY [at] h:mmA");
 		}
 
+		var displayTimeoutDate = "Unknown";
+		var hoverTimeoutDate = "";
 		if (timeoutDate == null) {
-			timeoutDate = "Never";
+			displayTimeoutDate = "Never";
+			hoverTimeoutDate = "";
 		} else if(!moment(timeoutDate).isValid()) {
-			timeoutDate = "Unknown";
+			displayTimeoutDate = "Unknown";
+			hoverTimeoutDate = "";
 		} else {
-			timeoutDate = moment(timeoutDate).calendar();
+			timeoutDate = moment(timeoutDate);
+			if (moment().diff(timeoutDate, 'months') < 6) {
+				displayTimeoutDate = timeoutDate.fromNow();
+			} else {
+				displayTimeoutDate = timeoutDate.format("MMMM Do, YYYY");
+			}
+			hoverTimeoutDate = timeoutDate.format("MMMM Do, YYYY [at] h:mmA");
 		}
 
-		var formattedDate = {creationDate: creationDate, accessDate: accessDate, timeoutDate: timeoutDate};
+		
+		var formattedDate = {displayCreationDate: displayCreationDate, hoverCreationDate: hoverCreationDate,
+				displayAccessDate: displayAccessDate, hoverAccessDate: hoverAccessDate, 
+				displayTimeoutDate: displayTimeoutDate, hoverTimeoutDate: hoverTimeoutDate};
 		
 		var json = {grant: this.model.toJSON(), client: this.options.client.toJSON(), formattedDate: formattedDate};
 		

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

@@ -23,15 +23,20 @@
 		<% } else if (count != null) { %>
 			<span class="label label-info"><%= count %></span>
 		<% } else { %>
-			<!-- hold for count -->
+			<span class="label label-warning">?</span>
-		<% } %>
-		<% if (client.dynamicallyRegistered) { %>
-			<span class="label label-inverse dynamically-registered"><i class="icon-globe icon-white"></i></span>
 		<% } %>
 	</td>
 
     <td>
+		<div>
 	        <span title="<%= client.clientId %>"><%= client.clientName != null ? client.clientName : ( client.clientId.substr(0,8) + '...' ) %></span>
+		</div>
+		<div>
+			<% if (client.dynamicallyRegistered) { %>
+				<span class="label label-inverse dynamically-registered"><i class="icon-globe icon-white"></i></span>
+			<% } %>
+			<small class="muted" title="<%= hoverCreationDate %>">Registered <%= displayCreationDate %></small>
+		</div>
     </td>
 
     <td>
@@ -149,6 +154,13 @@
 <div class="tab-content">
 	<div class="tab-pane active" id="client-main-tab">
 
+			<div class="control-group" id="createdAt">
+				<label class="control-label">Registered at</label>
+				<div class="controls">
+					<%=createdAt%>
+				</div>
+			</div>
+
             <div class="control-group" id="clientName">
                 <label class="control-label">Client name</label>
                 <div class="controls">

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

@@ -88,19 +88,17 @@
     </td>
 
 
-	<!-- TODO: make these dates collapsable/expandable -->
-
 	<td>
 		<div>
-			<i>Authorized:</i> <%= formattedDate.creationDate %>
+			<i>Authorized:</i> <span title="<%= formattedDate.hoverCreationDate %>"><%= formattedDate.displayCreationDate %></span>
 		</div>
 
 		<div>
-			<i>Last accessed:</i> <%= formattedDate.accessDate %>
+			<i>Last accessed:</i> <span title="<%= formattedDate.hoverAccessDate %>"><%= formattedDate.displayAccessDate %></span>
 		</div>
 
 		<div>
-			<i>Expires:</i> <%= formattedDate.timeoutDate %>
+			<i>Expires:</i> <span title="<%= formattedDate.hoverTimeoutDate %>"><%= formattedDate.displayTimeoutDate %></span>
 		</div>
 	</td>