Start of token management UI (runs)
Justin Richer
parent
b989af0da9
commit
0137f182ff
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -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>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
Loading…
Reference in New Issue