JWK Set by value UI added to dynamic registration

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

@@ -31,7 +31,10 @@ var DynRegClient = Backbone.Model.extend({
         grant_types:[],
         response_types:[],
         policy_uri:null,
+        
         jwks_uri:null,
+        jwks:null,
+        jwksType:'URI',
         
         application_type:null,
         sector_identifier_uri:null,
@@ -138,6 +141,16 @@ var DynRegRootView = Backbone.View.extend({
     		client.set({
     			contacts: contacts
     		}, { silent: true });
+    		
+	        if (client.get("jwks")) {
+	        	client.set({
+	        		jwksType: "VAL"
+	        	}, { silent: true });
+	        } else {
+	        	client.set({
+	        		jwksType: "URI"
+	        	}, { silent: true });
+	        }
 			
 	    	var view = new DynRegEditView({model: client, systemScopeList: app.systemScopeList}); 
 	    	
@@ -203,7 +216,8 @@ var DynRegEditView = Backbone.View.extend({
         "click .btn-cancel":"cancel",
         "click .btn-delete":"deleteClient",
         "change #logoUri input":"previewLogo",
-        "change #tokenEndpointAuthMethod input:radio":"toggleClientCredentials"
+        "change #tokenEndpointAuthMethod input:radio":"toggleClientCredentials",
+        "change #jwkSelector input:radio":"toggleJWKSetType"
     },
 
     cancel:function(e) {
@@ -272,6 +286,25 @@ var DynRegEditView = Backbone.View.extend({
         }
     },
     
+    /**
+     * Set up the form based on the JWK Set selector 
+     */
+    toggleJWKSetType:function() {
+    	var jwkSelector = $('#jwkSelector input:radio', this.el).filter(':checked').val();
+    	
+    	if (jwkSelector == 'URI') {
+    		$('#jwksUri', this.el).show();
+    		$('#jwks', this.el).hide();
+    	} else if (jwkSelector == 'VAL') {
+    		$('#jwksUri', this.el).hide();
+    		$('#jwks', this.el).show();
+    	} else {
+    		$('#jwksUri', this.el).hide();
+    		$('#jwks', this.el).hide();
+    	}
+    	
+    },
+
     disableUnsupportedJOSEItems:function(serverSupported, query) {
         var supported = ['default'];
         if (serverSupported) {
@@ -354,7 +387,39 @@ var DynRegEditView = Backbone.View.extend({
         	}
         }
 
-        var attrs = {
+        // process the JWKS
+        var jwksUri = null;
+        var jwks = null;
+        var jwkSelector = $('#jwkSelector input:radio', this.el).filter(':checked').val();
+    	
+    	if (jwkSelector == 'URI') {
+            jwksUri = $('#jwksUri input').val();
+    		jwks = null;
+    	} else if (jwkSelector == 'VAL') {
+    		jwksUri = null;
+    		try {
+    			jwks = JSON.parse($('#jwks textarea').val());
+    		} catch (e) {
+        		console.log("An error occurred when parsing the JWK Set");
+
+        		//Display an alert with an error message
+				$('#modalAlert div.modal-header').html("JWK Set Error");
+        		$('#modalAlert div.modal-body').html("There was an error parsing the public key from the JSON Web Key set. Check the value and try again.");
+        		
+    			 $("#modalAlert").modal({ // wire up the actual modal functionality and show the dialog
+    				 "backdrop" : "static",
+    				 "keyboard" : true,
+    				 "show" : true // ensure the modal is shown immediately
+    			 });
+    			 
+    			 return false;
+    		}
+    	} else {
+    		jwksUri = null;
+    		jwks = null;
+    	}
+
+    	var attrs = {
             client_name:$('#clientName input').val(),
             redirect_uris: this.redirectUrisCollection.pluck("item"),
             logo_uri:$('#logoUri input').val(),
@@ -365,7 +430,8 @@ var DynRegEditView = Backbone.View.extend({
             policy_uri: $('#policyUri input').val(),
             client_uri: $('#clientUri input').val(),
             application_type: $('#applicationType input').filter(':checked').val(),
-            jwks_uri: $('#jwksUri input').val(),
+            jwks_uri: jwksUri,
+            jwks: jwks,
             subject_type: $('#subjectType input').filter(':checked').val(),
             token_endpoint_auth_method: $('#tokenEndpointAuthMethod input').filter(':checked').val(),
             response_types: responseTypes,
@@ -410,6 +476,16 @@ var DynRegEditView = Backbone.View.extend({
         			contacts: contacts
         		}, { silent: true });
 
+    	        if (_self.model.get("jwks")) {
+    	        	_self.model.set({
+    	        		jwksType: "VAL"
+    	        	}, { silent: true });
+    	        } else {
+    	        	_self.model.set({
+    	        		jwksType: "URI"
+    	        	}, { silent: true });
+    	        }
+        		
         		var view = new DynRegEditView({model: _self.model, systemScopeList: _self.options.systemScopeList});
     			
     			view.load(function() {
@@ -527,6 +603,7 @@ var DynRegEditView = Backbone.View.extend({
 
         this.toggleClientCredentials();
         this.previewLogo();
+        this.toggleJWKSetType();
         
         // disable unsupported JOSE algorithms
         this.disableUnsupportedJOSEItems(app.serverConfiguration.request_object_signing_alg_values_supported, '#requestObjectSigningAlg option');

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

@@ -355,12 +355,24 @@
                 </div>
             </div>
 
-			<div class="control-group" id="jwksUri">
+			<div class="control-group">
-                <label class="control-label" data-i18n="client.client-form.jwk-set">JWK Set</label>
+				<label class="control-label" data-i18n="client.client-form.jwk-set">Public Key Set</label>
-                <div class="controls">
+				<div class="controls" id="jwkSelector">
-                    <input placeholder="https://" value="<%-client.jwks_uri ? client.jwks_uri : ''%>" maxlength="1000" type="text" class=""/>
+					<div>
-                    <p class="help-block" data-i18n="client.client-form.jwk-set-help">URL for the client's JSON Web Key set</p>
+                        <input id="jwkstype-uri" type="radio" name="jwksType" value="URI" <%-(client.jwksType == 'URI' ? 'checked' : '')%>>
-                </div>
+                        <label for="jwkstype-uri" class="radio inline" data-i18n="client.client-form.jwks-by-uri">By URI</label>
+                        <input id="jwkstype-value" type="radio" name="jwksType" value="VAL" <%-(client.jwksType == 'VAL' ? 'checked' : '')%>>
+                        <label for="jwkstype-value" class="radio inline" data-i18n="client.client-form.jwks-by-value">By Value</label>
+					</div>
+				</div>
+				<div class="controls" id="jwksUri">
+					<input placeholder="https://" value="<%-client.jwks_uri%>" maxlength="1000" type="text" class=""/>
+					<p class="help-block" data-i18n="client.client-form.jwk-set-help">URL for the client's JSON Web Key set (must be reachable by the server)</p>
+				</div>
+				<div class="controls" id="jwks">
+					<textarea  class="input-xlarge" placeholder="{ &quot;keys&quot: [ ] }" maxlength="4000" type="text" rows="8"><%- (client.jwks != null ? JSON.stringify(client.jwks, null, '  ') : "") %></textarea>
+					<p class="help-block" data-i18n="client.client-form.jwk-set-value-help">JSON Web Key set</p>
+				</div>
 			</div>
 	</div>