blacklist management UI

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

@@ -24,44 +24,46 @@
     * }
     *
      */
+    var ListWidgetChildView = Backbone.View.extend({
+
+        tagName: 'tr',
+
+        events:{
+            "click .btn-delete":function (e) {
+            	e.preventDefault();
+                //this.$el.tooltip('delete');
+                this.model.destroy();
+            }
+        },
+
+        initialize:function () {
+
+            if (!this.template) {
+                this.template = _.template($('#tmpl-list-widget-child').html());
+            }
+
+            this.model.bind('destroy', this.remove, this);
+
+        },
+
+        render:function () {
+            this.$el.html(this.template(this.model.toJSON()));
+
+            if (this.model.get('item').length > 30) {
+                this.$el.tooltip({title:this.model.get('item')});
+            }
+            return this;
+        }
+    });
+
     var ListWidgetView = Backbone.View.extend({
 
         tagName: "table",
 
-        childView: Backbone.View.extend({
+        childView:ListWidgetChildView,
-
-            tagName: 'tr',
-
-            events:{
-                "click .btn":function (e) {
-                	e.preventDefault();
-                    this.$el.tooltip('delete');
-                    this.model.destroy();
-                }
-            },
-
-            initialize:function () {
-
-                if (!this.template) {
-                    this.template = _.template($('#tmpl-list-widget-child').html());
-                }
-
-                this.model.bind('destroy', this.remove, this);
-
-            },
-
-            render:function () {
-                this.$el.html(this.template(this.model.toJSON()));
-
-                if (this.model.get('item').length > 30) {
-                    this.$el.tooltip({title:this.model.get('item')});
-                }
-                return this;
-            }
-        }),
 
         events:{
-            "click .btn":"addItem",
+            "click .btn-add":"addItem",
             "keypress input":function (e) {
             	// trap the enter key
                 if (e.which == 13) {
@@ -124,9 +126,20 @@
 
             return this;
         }
-
+        
     });
 
+    var BlackListModel = Backbone.Model.extend({
+    	idAttribute: 'id',
+    	
+    	urlRoot: 'api/blacklist'
+    });
+    
+    var BlackListCollection = Backbone.Collection.extend({
+    	initialize: function() { },
+
+    	url: "api/blacklist"
+    });
 
     var WhiteListModel = Backbone.Model.extend({
     	
@@ -897,7 +910,81 @@
     	}
     
     });
+    
+    var BlackListListView = Backbone.View.extend({
+    	tagName: 'span',
+    	
+    	initialize:function() {
+    		if (!this.template) {
+    			this.template = _.template($('#tmpl-blacklist-form').html());
+    		}
+    	},
+    	
+    	events: {
+            "click .refresh-table":"refreshTable"    		
+    	},
+    	
+        refreshTable:function() {
+        	var _self = this;
+        	this.model.fetch({
+        		success: function() {
+        			_self.render();
+        		}
+        	});
+        },	
+    	
+    	render:function (eventName) {
+    		
+    		$(this.el).html(this.template(this.model.toJSON()));
+    		
+			$('#blacklist .controls', this.el).html(new BlackListWidgetView({
+				placeholder: 'http://',
+				collection: this.model
+			}).render().el);
+    		
+			return this;
+    	}
+    });
 
+    var BlackListWidgetView = ListWidgetView.extend({
+    	
+    	childView: ListWidgetChildView.extend({
+    		render:function() {
+    			var uri = this.model.get('uri');
+    			
+    			this.$el.html(this.template({item: uri}));
+
+                if (uri.length > 30) {
+                    this.$el.tooltip({title:uri});
+                }
+                return this;
+    			
+    		}
+    	}),
+    	
+    	addItem:function(e) {
+        	e.preventDefault();
+
+        	var input_value = $("input", this.el).val().trim();
+        	
+        	// TODO: URI/pattern validation, check against existing clients
+        	
+        	var item = new BlackListModel({
+        		uri: input_value
+        	});
+        	
+        	var _self = this; // closures...
+        	
+        	item.save(item, {
+        		success:function() {
+        			_self.collection.add(item);
+        		}
+        	});
+
+    	}
+    	
+    });
+    
     // Router
     var AppRouter = Backbone.Router.extend({
 
@@ -910,6 +997,8 @@
             "admin/whitelist/new/:cid":"newWhitelist",
             "admin/whitelist/:id":"editWhitelist",
             
+            "admin/blacklist":"blackList",
+            
             "user/approved":"approvedSites"
             	
         },
@@ -918,11 +1007,13 @@
 
             this.clientList = new ClientCollection();
             this.whiteListList = new WhiteListCollection();
+            this.blackListList = new BlackListCollection();
             this.approvedSiteList = new ApprovedSiteCollection();
 
             this.clientListView = new ClientListView({model:this.clientList});
             this.whiteListListView = new WhiteListListView({model:this.whiteListList});
             this.approvedSiteListView = new ApprovedSiteListView({model:this.approvedSiteList});
+            this.blackListListView = new BlackListListView({model:this.blackListList});
 
             this.breadCrumbView = new BreadCrumbView({
                 collection:new Backbone.Collection()
@@ -1091,9 +1182,23 @@
         		}
         	});
         	
+        },
+        
+        blackList:function() {
+            this.breadCrumbView.collection.reset();
+            this.breadCrumbView.collection.add([
+                {text:"Home", href:""},
+                {text:"Manage Blacklisted Sites", href:"manage/#admin/blacklists"}
+            ]);
+            
+            var view = this.blackListListView;
+            
+            this.blackListList.fetch({success:
+            	function(collection, response, options) {
+            		$('#content').html(view.render().el);
+            	}
+            });
         }
-        
-        
 
 
     });

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

@@ -254,7 +254,7 @@
 
 <script type="text/html" id="tmpl-list-widget-child">
     <td><%=(item.length > 30) ? item.substr(0,27) + '...' : item %></td>
-    <td><a class="btn btn-small" href="#"><i class="icon-minus-sign icon-gray"></i></a></td>
+    <td><a class="btn btn-small btn-delete" href="#"><i class="icon-minus-sign icon-gray"></i></a></td>
 </script>
 
 <script type="text/html" id="tmpl-list-widget">
@@ -262,7 +262,7 @@
     <tr>
         <th class="control-group">
             <input type="text" value="" placeholder="<%=(placeholder) ? placeholder : ''%>"></th>
-        <th><a class="btn btn-small" href="#"><i class="icon-plus-sign icon-gray"></i></a></th>
+        <th><a class="btn btn-small btn-add" href="#"><i class="icon-plus-sign icon-gray"></i></a></th>
     </tr>
     </thead>
 	<tbody>
@@ -426,7 +426,7 @@
     <form class="form-horizontal">
         <fieldset>
             <div class="well">
-                <button class="btn btn-small btn-primary">Save</button>&nbsp;<button class="btn btn-small btn-cancel">Cancel</button>
+				<button class="btn btn-small refresh-table"><i class="icon-refresh"></i></button>
             </div>
 
             <div class="control-group" id="blacklist">
@@ -436,10 +436,10 @@
             </div>
 
             <div class="well">
-                <button class="btn btn-small btn-primary">Save</button>&nbsp;<button class="btn btn-small btn-cancel">Cancel</button>
+				<button class="btn btn-small refresh-table"><i class="icon-refresh"></i></button>
             </div>
 
         </fieldset>
     </form>
 
-</script>
+</script>