Start of token management UI (runs)

openid-connect-server-webapp/src/main/webapp/WEB-INF/tags/footer.tag

@@ -27,6 +27,7 @@
 	<script type="text/javascript" src="resources/js/scope.js"></script>
 	<script type="text/javascript" src="resources/js/whitelist.js"></script>
 	<script type="text/javascript" src="resources/js/dynreg.js"></script>
+	<script type="text/javascript" src="resources/js/token.js"></script>
 	<script type="text/javascript" src="resources/js/admin.js"></script>
 </c:if>
 </body>

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

@@ -371,7 +371,7 @@ var AppRouter = Backbone.Router.extend({
         "admin/scope/:id":"editScope",
         
         "user/approved":"approvedSites",
-        "user/tokens":"notImplemented",
+        "user/tokens":"tokens",
         "user/profile":"profile",
         
         "dev/dynreg":"dynReg",
@@ -398,6 +398,8 @@ var AppRouter = Backbone.Router.extend({
         this.approvedSiteList = new ApprovedSiteCollection();
         this.systemScopeList = new SystemScopeCollection();
         this.clientStats = new StatsModel(); 
+        this.accessTokensList = new AccessTokenCollection();
+        this.refreshTokensList = new RefreshTokenCollection();
 
         
         this.clientListView = new ClientListView({model:this.clientList, stats: this.clientStats});
@@ -405,6 +407,7 @@ var AppRouter = Backbone.Router.extend({
         this.approvedSiteListView = new ApprovedSiteListView({model:this.approvedSiteList});
         this.blackListListView = new BlackListListView({model:this.blackListList});
         this.systemScopeListView = new SystemScopeListView({model:this.systemScopeList});
+        this.tokensListView = new TokenListView({model: {access: this.accessTokensList, refresh: this.refreshTokensList}});
         
         this.breadCrumbView = new BreadCrumbView({
             collection:new Backbone.Collection()
@@ -648,6 +651,27 @@ var AppRouter = Backbone.Router.extend({
     	
     },
 
+    tokens:function() {
+    	this.breadCrumbView.collection.reset();
+        this.breadCrumbView.collection.add([
+            {text:"Home", href:""},
+            {text:"Manage Active Tokens", href:"manage/#user/tokens"}
+        ]);
+        
+        var view = this.tokensListView;
+        
+        app.accessTokensList.fetch({
+        	success:function(collection, response, options) {
+        		app.refreshTokensList.fetch({
+        			success:function(collection, response, options) {
+        				$('#content').html(view.render().el);
+        				setPageTitle("Manage Active Tokens");
+        			}
+        		});
+        	}
+        });
+    },
+    
     notImplemented:function(){
         this.breadCrumbView.collection.reset();
         this.breadCrumbView.collection.add([
@@ -819,7 +843,8 @@ $(function () {
     $.get('resources/template/scope.html', _load);
     $.get('resources/template/whitelist.html', _load);
     $.get('resources/template/dynreg.html', _load);
-
+    $.get('resources/template/token.html', _load);
+    
     jQuery.ajaxSetup({async:true});
     app = new AppRouter();
 

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

@@ -0,0 +1,253 @@
+/*******************************************************************************
+ * Copyright 2014 The MITRE Corporation 
+ *   and the MIT Kerberos and Internet Trust Consortium
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ******************************************************************************/
+
+var AccessTokenModel = Backbone.Model.extend({
+	idAttribute: 'id',
+
+	defaults:{
+		id:null,
+		value:null,
+		idTokenId:null,
+		refreshTokenId:null,
+		scopes:[],
+		clientId:null,
+		userId:null,
+		expiration:null
+	},
+	
+	urlRoot: 'api/tokens/access'
+});
+
+var AccessTokenCollection = Backbone.Collection.extend({
+	idAttribute: 'id',
+	
+	model: AccessTokenModel,
+	
+	url: 'api/tokens/access'
+	
+});
+
+var AccessTokenView = Backbone.View.extend({
+	
+	tagName: 'tr',
+	
+    initialize:function () {
+
+        if (!this.template) {
+            this.template = _.template($('#tmpl-access-token').html());
+        }
+
+        this.model.bind('change', this.render, this);
+        
+    },
+    
+    events: {
+		'click .btn-delete':'deleteToken'
+	},
+	
+    render:function (eventName) {
+        this.$el.html(this.template(this.model.toJSON()));
+
+        return this;
+    },
+    
+    deleteToken:function () {
+
+        if (confirm("Are you sure sure you would like to revoke this token?")) {
+        	
+            var self = this;
+
+            this.model.destroy({
+                success:function () {
+                	
+                    self.$el.fadeTo("fast", 0.00, function () { //fade
+                        $(this).slideUp("fast", function () { //slide up
+                            $(this).remove(); //then remove from the DOM
+                            app.tokenListView.togglePlaceholder();
+                        });
+                    });
+                },
+            	error:function (error, response) {
+            		
+					//Pull out the response text.
+					var responseJson = JSON.parse(response.responseText);
+            		
+            		//Display an alert with an error message
+            		$('#modalAlert div.modal-body').html(responseJson.errorMessage);
+            		
+        			 $("#modalAlert").modal({ // wire up the actual modal functionality and show the dialog
+        				 "backdrop" : "static",
+        				 "keyboard" : true,
+        				 "show" : true // ensure the modal is shown immediately
+        			 });
+            	}
+            });
+
+            app.tokenListView.delegateEvents();
+        }
+
+        return false;
+    },
+    
+    close:function () {
+        $(this.el).unbind();
+        $(this.el).empty();
+    }
+});
+
+var RefreshTokenModel = Backbone.Model.extend({
+	idAttribute: 'id',
+
+	defaults:{
+		id:null,
+		value:null,
+		scopes:[],
+		clientId:null,
+		userId:null,
+		expiration:null
+	},
+	
+	urlRoot: 'api/tokens/refresh'
+});
+
+var RefreshTokenCollection = Backbone.Collection.extend({
+	idAttribute: 'id',
+	
+	model: RefreshTokenModel,
+	
+	url: 'api/tokens/refresh'
+	
+});
+
+var RefreshTokenView = Backbone.View.extend({
+	
+	tagName: 'tr',
+	
+    initialize:function () {
+
+        if (!this.template) {
+            this.template = _.template($('#tmpl-refresh-token').html());
+        }
+
+        this.model.bind('change', this.render, this);
+        
+    },
+    
+    events: {
+		'click .btn-delete':'deleteToken'
+	},
+	
+    render:function (eventName) {
+        this.$el.html(this.template(this.model.toJSON()));
+
+        return this;
+    },
+    
+    deleteToken:function () {
+
+        if (confirm("Are you sure sure you would like to revoke this token?")) {
+        	
+            var self = this;
+
+            this.model.destroy({
+                success:function () {
+                	
+                    self.$el.fadeTo("fast", 0.00, function () { //fade
+                        $(this).slideUp("fast", function () { //slide up
+                            $(this).remove(); //then remove from the DOM
+                            app.tokenListView.togglePlaceholder();
+                        });
+                    });
+                },
+            	error:function (error, response) {
+            		
+					//Pull out the response text.
+					var responseJson = JSON.parse(response.responseText);
+            		
+            		//Display an alert with an error message
+            		$('#modalAlert div.modal-body').html(responseJson.errorMessage);
+            		
+        			 $("#modalAlert").modal({ // wire up the actual modal functionality and show the dialog
+        				 "backdrop" : "static",
+        				 "keyboard" : true,
+        				 "show" : true // ensure the modal is shown immediately
+        			 });
+            	}
+            });
+
+            app.tokenListView.delegateEvents();
+        }
+
+        return false;
+    },
+    
+    close:function () {
+        $(this.el).unbind();
+        $(this.el).empty();
+    }
+});
+
+var TokenListView = Backbone.View.extend({
+	tagName: 'span',
+	
+	events:{
+		"click .refresh-table":"refreshTable"
+	},
+
+	refreshTable:function() {
+		var _self = this;
+		this.model.fetch({
+			success: function() {
+				_self.render();
+			}
+		});
+	},
+	
+	togglePlaceholder:function() {
+		if (this.model.access.length > 0) {
+			$('#access-token-table', this.el).show();
+			$('#access-token-table-empty', this.el).hide();
+		} else {
+			$('#access-token-table', this.el).hide();
+			$('#access-token-table-empty', this.el).show();
+		}
+		if (this.model.refresh.length > 0) {
+			$('#refresh-token-table', this.el).show();
+			$('#refresh-token-table-empty', this.el).hide();
+		} else {
+			$('#refresh-token-table', this.el).hide();
+			$('#refresh-token-table-empty', this.el).show();
+		}
+	},
+	
+	render: function (eventName) {
+		
+		// append and render the table structure
+		$(this.el).html($('#tmpl-token-table').html());
+		
+/*
+		_.each(this.model.models, function (scope) {
+			$("#scope-table", this.el).append(new SystemScopeView({model: scope}).render().el);
+		}, this);
+*/
+		
+		this.togglePlaceholder();
+		
+		return this;
+	}
+});
+

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

@@ -0,0 +1,80 @@
+<!-- 
+ Copyright 2014 The MITRE Corporation 
+   and the MIT Kerberos and Internet Trust Consortium
+ 
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ 
+   http://www.apache.org/licenses/LICENSE-2.0
+ 
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+ 
+ <script type="text/html" id="tmpl-token-table">
+    <div class="well well-small">
+		<button class="btn btn-small refresh-table"><i class="icon-refresh"></i> Refresh</button> &nbsp;
+    </div>
+
+	<div id="access-token-table-empty" class="alert alert-info">
+		There are no active access tokens.
+	</div>
+
+    <table id="access-token-table" class="table table-hover table-striped">
+        <thead>
+        <tr>
+            <th>Client</th>
+            <th>Token Information</th>
+            <th></th>
+        </tr>
+        </thead>
+        <tbody>
+        </tbody>
+    </table>
+
+	<div id="refresh-token-table-empty" class="alert alert-info">
+		There are no active refresh tokens.
+	</div>
+
+    <table id="refresh-token-table" class="table table-hover table-striped">
+        <thead>
+        <tr>
+            <th>Client</th>
+            <th>Token Information</th>
+            <th></th>
+        </tr>
+        </thead>
+        <tbody>
+        </tbody>
+    </table>
+
+    <div class="well well-small">
+		<button class="btn btn-small refresh-table"><i class="icon-refresh"></i> Refresh</button> &nbsp; 
+    </div>
+</script>
+
+<script type="text/html" id="tmpl-access-token">
+    <td>
+        <%= client.clientName != null ? client.clientName : client.clientId %>
+    </td>
+
+    <td>
+		<div class="token-value">
+			<code class="token-substring"><%= token.value.substr(0,27) %> ...</code>
+			<code class="token-full hidden"><%= token.value %></code>
+			<button class="btn btn-mini">Show Full Token Value</button>
+		</div>
+		<div class="scope-list"></div>
+        <!--expandable future information-->
+    </td>
+
+    <td>
+		<button class="btn btn-danger btn-delete pull-right"><i class="icon-trash icon-white"></i> Delete</button>
+    </td>
+
+</script>
+