added placeholder blocks in place of empty tables, addresses #244

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

@@ -389,6 +389,7 @@
                         self.$el.fadeTo("fast", 0.00, function () { //fade
                             $(this).slideUp("fast", function () { //slide up
                                 $(this).remove(); //then remove from the DOM
+                                app.clientListView.togglePlaceholder();
                             });
                         });
                     }
@@ -433,9 +434,21 @@
                 $("#client-table",this.el).append(new ClientView({model:client}).render().el);
             }, this);
 
+            this.togglePlaceholder();
+            
             return this;
         },
         
+    	togglePlaceholder:function() {
+    		if (this.model.length > 0) {
+    			$('#client-table', this.el).show();
+    			$('#client-table-empty', this.el).hide();
+    		} else {
+    			$('#client-table', this.el).hide();
+    			$('#client-table-empty', this.el).show();
+    		}
+    	},
+    	
         refreshTable:function() {
         	var _self = this;
         	this.model.fetch({
@@ -735,9 +748,39 @@
     			
     		}, this);
     		
+    		this.togglePlaceholder();
+    		
     		return this;
     	},
     	
+    	togglePlaceholder:function() {
+    		// count the whitelisted and non-whitelisted entries
+    		var wl = 0;
+    		var gr = 0;
+    		for (var i = 0; i < this.model.length; i++) {
+    			if (this.model.at(i).get('whitelistedSite') != null) {
+    				wl += 1;
+    			} else {
+    				gr += 1;
+    			}
+    		}
+    		
+    		if (wl > 0) {
+    			$('#grant-whitelist-table', this.el).show();
+    			$('#grant-whitelist-table-empty', this.el).hide();
+    		} else {
+    			$('#grant-whitelist-table', this.el).hide();
+    			$('#grant-whitelist-table-empty', this.el).show();
+    		}
+    		if (gr > 0) {
+    			$('#grant-table', this.el).show();
+    			$('#grant-table-empty', this.el).hide();
+    		} else {
+    			$('#grant-table', this.el).hide();
+    			$('#grant-table-empty', this.el).show();
+    		}
+    	},
+    	
         refreshTable:function() {
         	var _self = this;
         	this.model.fetch({
@@ -788,6 +831,7 @@
                         self.$el.fadeTo("fast", 0.00, function () { //fade
                             $(this).slideUp("fast", function () { //slide up
                                 $(this).remove(); //then remove from the DOM
+                                app.approvedSiteListView.togglePlaceholder();
                             });
                         });
                     }
@@ -830,10 +874,22 @@
     			}
     			
     		}, this);
+
+    		this.togglePlaceholder();
     		
     		return this;
     	},
     
+    	togglePlaceholder:function() {
+    		if (this.model.length > 0) {
+    			$('#whitelist-table', this.el).show();
+    			$('#whitelist-table-empty', this.el).hide();
+    		} else {
+    			$('#whitelist-table', this.el).hide();
+    			$('#whitelist-table-empty', this.el).show();
+    		}
+    	},
+    	
         refreshTable:function() {
         	var _self = this;
         	this.model.fetch({
@@ -891,6 +947,8 @@
                         self.$el.fadeTo("fast", 0.00, function () { //fade
                             $(this).slideUp("fast", function () { //slide up
                                 $(this).remove(); //then remove from the DOM
+                                // check the placeholder in case it's empty now
+                                app.whiteListListView.togglePlaceholder();
                             });
                         });
                     }
@@ -1100,6 +1158,7 @@
                         self.$el.fadeTo("fast", 0.00, function () { //fade
                             $(this).slideUp("fast", function () { //slide up
                                 $(this).remove(); //then remove from the DOM
+                                app.systemScopeListView.togglePlaceholder();
                             });
                         });
                     }
@@ -1139,6 +1198,16 @@
     		});
     	},
     	
+    	togglePlaceholder:function() {
+    		if (this.model.length > 0) {
+    			$('#scope-table', this.el).show();
+    			$('#scope-table-empty', this.el).hide();
+    		} else {
+    			$('#scope-table', this.el).hide();
+    			$('#scope-table-empty', this.el).show();
+    		}
+    	},
+    	
     	render: function (eventName) {
     		
     		// append and render the table structure
@@ -1148,6 +1217,8 @@
     			$("#scope-table", this.el).append(new SystemScopeView({model: scope}).render().el);
     		}, this);
     		
+    		this.togglePlaceholder();
+    		
     		return this;
     	}
     });

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

@@ -34,6 +34,10 @@
         <button class="btn btn-small btn-primary new-client"><i class="icon-plus icon-white"></i> New Client</button>
     </div>
 
+	<div id="client-table-empty" class="alert alert-info">
+		There are no registered clients on this server.
+	</div>
+
     <table id="client-table" class="table table-hover table-striped">
         <thead>
         <tr>
@@ -368,6 +372,10 @@
 		<button class="btn btn-small refresh-table"><i class="icon-refresh"></i> Refresh</button>
     </div>
 
+	<div id="whitelist-table-empty" class="alert alert-info">
+		There are no whitelisted sites. Use the <strong>whitelist</strong> button on the client management page to create one.
+	</div>
+
     <table id="whitelist-table" class="table table-hover table-striped">
         <thead>
         <tr>
@@ -435,6 +443,10 @@
 
 	<h3>Sites you have manually approved</h3>
 
+	<div id="grant-table-empty" class="alert alert-info">
+		You have not approved any sites.
+	</div>
+
     <table id="grant-table" class="table table-hover table-striped">
         <thead>
         <tr>
@@ -455,6 +467,10 @@
 	<h3>Sites that have been whitelisted by an administrator</h3>
 	<p>If you revoke them here, they will automatically be re-approved on your next visit.</p>
 
+	<div id="grant-whitelist-table-empty" class="alert alert-info">
+		You have not accessed any whitelisted sites.
+	</div>
+
     <table id="grant-whitelist-table" class="table table-hover table-striped">
         <thead>
         <tr>
@@ -546,6 +562,10 @@
         <button class="btn btn-small btn-primary new-scope"><i class="icon-plus icon-white"></i> New Scope</button>
     </div>
 
+	<div id="scope-table-empty" class="alert alert-info">
+		There are no system scopes defined. Clients may still have custom scopes.
+	</div>
+
     <table id="scope-table" class="table table-hover table-striped">
         <thead>
         <tr>
@@ -625,7 +645,7 @@
 
 					<div id="iconSelector" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="iconSelectorLabel" aria-hidden="true">
 						<div class="modal-header">
-							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 							<h3 id="iconSelectorLabel">Select an Icon</h3>
 						</div>
 						<div class="modal-body">