Client secret processing

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

@@ -187,7 +187,65 @@
         },
 
         events:{
-            "click .btn-primary":"saveClient"
+            "click .btn-primary":"saveClient",
+            "change #requireClientSecret":"toggleRequireClientSecret",
+            "change #displayClientSecret":"toggleDisplayClientSecret",
+            "change #generateClientSecret":"toggleGenerateClientSecret"
+        },
+
+        /**
+         * Set up the form based on the current state of the requireClientSecret checkbox parameter
+         * @param event
+         */
+        toggleRequireClientSecret:function(event) {
+        	
+        	if ($('#requireClientSecret input').is(':checked')) {
+        		// client secret is required, show all the bits
+        		$('#clientSecretPanel').show();
+        		// this function sets up the display portions
+        		this.toggleGenerateClientSecret();
+        	} else {
+        		// no client secret, hide all the bits
+        		$('#clientSecretPanel').hide();        		
+        	}
+        },
+        
+        /**
+         * Set up the form based on the "Generate" checkbox
+         * @param event
+         */
+        toggleGenerateClientSecret:function(event) {
+        	
+        	if ($('#generateClientSecret input').is(':checked')) {
+        		// show the "generated" block, hide the "display" checkbox
+        		$('#displayClientSecret').hide();
+        		$('#clientSecret').hide();
+        		$('#clientSecretGenerated').show();
+        		$('#clientSecretHidden').hide();
+        	} else {
+        		// show the display checkbox, fall back to the "display" logic
+        		$('#displayClientSecret').show();
+        		this.toggleDisplayClientSecret(event);
+        	}
+        },
+        
+        /**
+         * Handle whether or not to display the client secret
+         * @param event
+         */
+        toggleDisplayClientSecret:function(event) {
+        	
+        	if ($('#displayClientSecret input').is(':checked')) {
+        		// want to display it
+        		$('#clientSecret').show();
+        		$('#clientSecretHidden').hide();
+        		$('#clientSecretGenerated').hide();
+        	} else {
+        		// want to hide it
+        		$('#clientSecret').hide();
+        		$('#clientSecretHidden').show();
+        		$('#clientSecretGenerated').hide();
+        	}
         },
         
         saveClient:function (event) {
@@ -208,13 +266,13 @@
                 }
             });
 
-            var requireClientSecret = $('#requireClientSecret').is(':checked');
+            var requireClientSecret = $('#requireClientSecret input').is(':checked');
-            var generateClientSecret = $('#generateClientSecret').is(':checked');
+            var generateClientSecret = $('#generateClientSecret input').is(':checked');
             var clientSecret = null;
             
             if (requireClientSecret && !generateClientSecret) {
             	// if it's required but we're not generating it, send the value
-            	clientSecret = $('#clientSecret input').val();
+            	clientSecret = $('#clientSecret').val();
             }
 
             var valid = this.model.set({
@@ -265,7 +323,12 @@
         render:function (eventName) {
 
             $(this.el).html(this.template(this.model.toJSON()));
+            
             return this;
+        },
+        
+        postRender:function() {
+            this.toggleRequireClientSecret();
         }
     });
 
@@ -332,14 +395,27 @@
         },
 
         newClient:function() {
-            this.clientFormView = new ClientFormView({model:new ClientModel()});
+        	var client = new ClientModel();
+        	
+        	// set up this new client to require a secret and have us autogenerate one
+        	client.requireClientSecret = true; 
+        	client.generateClientSecret = true;
+        	
+            this.clientFormView = new ClientFormView({model:client});
             $('#content').html(this.clientFormView.render().el);
+            this.clientFormView.postRender(); // set up the form for the given model data
         },
 
         editClient:function(id) {
             var client = this.clientList.get(id);
+            
+            if (client.clientSecret == null) {
+            	client.requireClientSecret = false;
+            }
+            
             this.clientFormView = new ClientFormView({model:client});
             $('#content').html(this.clientFormView.render().el);
+            this.clientFormView.postRender(); // set up the form for the given model data
         },
 
         whiteList:function () {

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

@@ -49,7 +49,7 @@
                 <label class="control-label">Application name</label>
                 <div class="controls">
                     <input value="<%=applicationName%>" maxlength="100" type="text" class="" placeholder="Type something">
-                    <p class="help-block">Supporting help text</p>
+                    <p class="help-block">Human-readable application name</p>
                 </div>
             </div>
 
@@ -57,7 +57,7 @@
                 <label class="control-label">Client ID</label>
                 <div class="controls">
                     <input value="<%=clientId%>" maxlength="100" type="text" class="" placeholder="Type something">
-                    <p class="help-block">Supporting help text</p>
+                    <p class="help-block">Unique identifier. If you leave this blank it will be automatically generated.</p>
                 </div>
             </div>
 
@@ -75,7 +75,7 @@
                 <div class="controls">
                     <textarea class="input-xlarge" placeholder="Type a description" maxlength="200"
                               rows="3"><%=clientDescription%></textarea>
-                    <p class="help-block">Supporting help text</p>
+                    <p class="help-block">Human-readable text description</p>
                 </div>
             </div>
 
@@ -97,42 +97,46 @@
                 </div>
             </div>
 
-			<div class="control-group">
+			<div class="control-group" id="requireClientSecret">
 				<label class="control-label">Require Client Secret</label>
 				<div class="controls">
 					<label class="checkbox">
-						<input type="checkbox" id="requireClientSecret" <%=(requireClientSecret == true ? 'checked' : '')%>> Require client secret?
+						<input type="checkbox" <%=(requireClientSecret == true ? 'checked' : '')%>> Require client secret?
 					</label>
 				</div>
 			</div>
 
-			<div class="control-group">
+			<div id="clientSecretPanel">
-				<label class="control-label">Generate Client Secret</label>
-				<div class="controls">
-					<label class="checkbox">
-						<input type="checkbox" id="generateClientSecret" <%=(generateClientSecret == true ? 'checked' : '')%>> Generate a new client secret?
-					</label>
-					<p class="help-block">New secret will be generated when you click 'Save'</p>
-				</div>
-			</div>
 
-			<div class="control-group">
+				<div class="control-group" id="generateClientSecret">
-				<label class="control-label">Show Client Secret</label>
+					<label class="control-label">Generate Client Secret</label>
-				<div class="controls">
+					<div class="controls">
-					<label class="checkbox">
+						<label class="checkbox">
-						<input type="checkbox" id="displayClientSecret" <%=(displayClientSecret == true ? 'checked' : '')%>> Display client secret here:
+							<input type="checkbox" <%=(generateClientSecret == true ? 'checked' : '')%>> Generate a new client secret?
-					</label>
+						</label>
+						<p class="help-block">New secret will be generated when you click 'Save'</p>
+					</div>
 				</div>
-			</div>
 	
-            <div class="control-group" id="clientSecret">
+				<div class="control-group" id="displayClientSecret">
-                <label class="control-label">Client Secret</label>
+					<label class="control-label">Show Client Secret</label>
-                <div class="controls">
+					<div class="controls">
-                    <input value="<%=clientSecret%>" maxlength="100" type="text" class=""
+						<label class="checkbox">
-                           placeholder="Type a secret">
+							<input type="checkbox" <%=(displayClientSecret == true ? 'checked' : '')%>> Display client secret here:
-                    <p class="help-block">If you leave this blank a client secret will be generated for you automatically.</p>
+						</label>
-                </div>
+					</div>
-            </div>
+				</div>
+	
+    	        <div class="control-group">
+        	        <label class="control-label">Client Secret</label>
+            	    <div class="controls">
+                	    <input id="clientSecret" value="<%=clientSecret%>" maxlength="100" type="text" placeholder="Type a secret">
+						<input id="clientSecretGenerated" value="Generate on Save" type="text" disabled>
+						<input id="clientSecretHidden" value="************" type="password" disabled>
+	                </div>
+    	        </div>
+
+			</div>
 
             <div class="control-group" id="authorizedGrantTypes">
                 <label class="control-label">Authorized Grant Types</label>