whitelist editing

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

@@ -62,6 +62,7 @@
         events:{
             "click button":"addItem",
             "keypress input":function (e) {
+            	// trap the enter key
                 if (e.which == 13) {
                     this.addItem();
                     e.preventDefault();
@@ -215,11 +216,18 @@
         },
 
         model:ClientModel,
-        url:"api/clients"
+        url:"api/clients",
+        
+        getByClientId: function(clientId) {
+			var clients = this.where({clientId: clientId});
+			if (clients.length == 1) {
+				return clients[0];
+			} else {
+				return null;
+			}
+        }
     });
 
-
-
     var BreadCrumbView = Backbone.View.extend({
 
         tagName: 'ul',
@@ -601,7 +609,7 @@
     		_.each(this.model.models, function (whitelist) {
     			
     			// look up client
-    			var client = app.clientList.where({clientId: whitelist.get('clientId')})[0]; // TODO: bulletproofing
+    			var client = app.clientList.getByClientId(whitelist.get('clientId'));
     			
     			$('#whitelist-table', this.el).append(new WhiteListView({model: whitelist, client: client}).render().el);
     		}, this);
@@ -666,6 +674,76 @@
     	}
     });
     
+    var WhiteListFormView = Backbone.View.extend({
+    	tagName: 'span',
+    	
+    	initialize:function () {
+    		if (!this.template) {
+    			this.template = _.template($('#tmpl-whitelist-form').html());
+    		}
+    		
+    		this.scopeCollection = new Backbone.Collection();
+    	},
+    
+    	events:{
+    		'click .btn-primary':'saveWhiteList',
+    		'click .btn-cancel':'cancelWhiteList',
+    		
+    	},
+    	
+    	saveWhiteList:function (event) {
+    		$('.control-group').removeClass('error');
+    		
+    		// process allowed scopes
+            var allowedScopes = this.scopeCollection.pluck("item");
+    		
+    		var valid = this.model.set({
+    			clientId:$('#clientId input').val(),
+    			allowedScopes: allowedScopes
+    		});
+    		
+            if (valid) {
+                var _self = this;
+                this.model.save(this.model, {
+                    success:function () {
+                        app.whiteListList.add(_self.model);
+                        app.navigate('admin/whitelists', {trigger:true});
+                    },
+                    error:function (model,resp) {
+                        console.error("Oops! The object didn't save correctly.",resp);
+                    }
+                });
+            }
+
+            return false;
+    		
+    	},
+    	
+    	render:function (eventName) {
+    		
+    		var json = {whitelist: this.model.toJSON(), client: this.options.client.toJSON()};
+    		
+    		this.$el.html(this.template(json));
+    		
+    		
+            var _self = this;
+            // build and bind scopes
+            _.each(this.model.get("scope"), function (scope) {
+                _self.scopeCollection.add(new Backbone.Model({item:scope}));
+            });
+
+            $("#scope .controls",this.el).html(new ListWidgetView({placeholder: 'new scope here'
+                , autocomplete: _.uniq(_.flatten(app.clientList.pluck("scope")))
+                , collection: this.scopeCollection}).render().el);
+
+    		
+    		
+    		return this;
+
+    	}
+    
+    });
+
     // Router
     var AppRouter = Backbone.Router.extend({
 
@@ -694,7 +772,7 @@
 
             this.breadCrumbView.render();
 
-            this.startAfter([this.clientList]);
+            this.startAfter([this.clientList, this.whiteListList]);
 
         },
 
@@ -775,14 +853,32 @@
         },
 
         whiteList:function () {
+            this.breadCrumbView.collection.reset();
+            this.breadCrumbView.collection.add([
+                {text:"Home", href:""},
+                {text:"Manage Whitelisted Sites", href:"manage/#admin/whitelists"}
+            ]);
+            
             $('#content').html(this.whiteListListView.render().el);
+            this.whiteListListView.delegateEvents();
         },
         
         newWhitelist:function() {
         	
         },
         
-        editWhitelist:function() {
+        editWhitelist:function(id) {
+            this.breadCrumbView.collection.reset();
+            this.breadCrumbView.collection.add([
+                {text:"Home", href:""},
+                {text:"Manage Whitelisted Sites", href:"manage/#admin/whitelists"},
+                {text:"Manage Whitelisted Sites", href:"manage/#admin/whitelist/" + id}
+            ]);
+            
+            var whiteList = this.whiteListList.get(id);
+            var client = app.clientList.getByClientId(whitelist.get('clientId'));
+            
+            this.whiteListFormView = new WhiteListFormView({model: whiteList, client: client});
         	
         }
 

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

@@ -302,3 +302,40 @@
         <button class="btn btn-small btn-primary">New Whitelisted Site</button>
     </div>
 </script>
+
+<script type="text/html" id="tmpl-whitelist-form">
+
+    <h1><%=(whitelist.id == null ? 'New' : 'Edit')%> Whitelisted Site</h1>
+
+
+    <form class="form-horizontal">
+        <fieldset>
+            <legend>Details</legend>
+
+            <div class="well">
+                <button class="btn btn-small btn-primary">Save</button>&nbsp;<button class="btn btn-small btn-cancel">Cancel</button>
+            </div>
+
+			<div class="control-group">
+				<label class="control-label">Client</label>
+				<div class="controls">
+					<input type="hidden" id="clientId" name="clientId" value="<%= client.clientId %> />
+					<%= client.applicationName != null ? client.applicationName : client.clientId %>
+				</div>
+			</div>
+
+            <div class="control-group" id="scope">
+                <label class="control-label">Allowed Scope</label>
+                <div class="controls">
+                </div>
+            </div>
+
+            <div class="well">
+                <button class="btn btn-small btn-primary">Save</button>&nbsp;<button class="btn btn-small btn-cancel">Cancel</button>
+            </div>
+
+        </fieldset>
+    </form>
+
+</script>
+