UI for managing device code flow

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

@@ -93,6 +93,7 @@ var ClientModel = Backbone.Model.extend({
         dynamicallyRegistered:false,
         allowIntrospection:false,
         idTokenValiditySeconds: null,
+        deviceCodeValiditySeconds: null,
         createdAt:null,
 
         allowRefresh:false,
@@ -790,7 +791,8 @@ var ClientFormView = Backbone.View.extend({
     	'implicit': 'implicit',
     	'client_credentials': 'client_credentials',
     	'redelegate': 'urn:ietf:params:oauth:grant_type:redelegate',
-    	'refresh_token': 'refresh_token'
+    	'refresh_token': 'refresh_token',
+    	'device': 'urn:ietf:params:oauth:grant-type:device_code'
     },
     
     // maps from a form-friendly name to the real response type parameter name
@@ -863,7 +865,9 @@ var ClientFormView = Backbone.View.extend({
         	accessTokenValiditySeconds = this.getFormTokenNumberValue($('#accessTokenValidityTime input[type=text]').val(), $('#accessTokenValidityTime select').val()); 
         }
         
-        var idTokenValiditySeconds = this.getFormTokenNumberValue($('#idTokenValidityTime input[type=text]').val(), $('#idTokenValidityTime select').val()); 
+        var idTokenValiditySeconds = this.getFormTokenNumberValue($('#idTokenValidityTime input[type=text]').val(), $('#idTokenValidityTime select').val());
+        
+        var deviceCodeValiditySeconds = this.getFormTokenNumberValue($('#deviceCodeValidityTime input[type=text]').val, $('#deviceCodeValidityTime select').val());
         
         var refreshTokenValiditySeconds = null;
         if ($('#allowRefresh').is(':checked')) {
@@ -928,6 +932,7 @@ var ClientFormView = Backbone.View.extend({
             accessTokenValiditySeconds: accessTokenValiditySeconds,
             refreshTokenValiditySeconds: refreshTokenValiditySeconds,
             idTokenValiditySeconds: idTokenValiditySeconds,
+            deviceCodeValiditySeconds: deviceCodeValiditySeconds,
             allowRefresh: $('#allowRefresh').is(':checked'),
             allowIntrospection: $('#allowIntrospection input').is(':checked'), // <-- And here? --^
             scope: scopes,
@@ -1235,6 +1240,7 @@ ui.routes.push({path: "admin/client/new", name: "newClient", callback:
 	        		accessTokenValiditySeconds:3600,
 	        		refreshTokenValiditySeconds:24*3600,
 	        		idTokenValiditySeconds:300,
+	        		deviceCodeValiditySeconds:30*60,
 	        		grantTypes: ["authorization_code"],
 	        		responseTypes: ["code"],
 	        		subjectType: "PUBLIC",
@@ -1252,6 +1258,7 @@ ui.routes.push({path: "admin/client/new", name: "newClient", callback:
 	        		scope: _.uniq(_.flatten(app.systemScopeList.defaultScopes().pluck("value"))),
 	        		accessTokenValiditySeconds:3600,
 	        		idTokenValiditySeconds:600,
+	        		deviceCodeValiditySeconds:30*60,
 	        		grantTypes: ["authorization_code"],
 	        		responseTypes: ["code"],
 	        		subjectType: "PUBLIC",

openid-connect-server-webapp/src/main/webapp/resources/js/locale/en/messages.json

@@ -64,6 +64,8 @@
                 "rsa1-5": "RSAES-PKCS1-V1_5"
             },
             "cryptography": "Crypto",
+            "device": "device",
+            "device-code-timeout": "Device Code Timeout",
             "display-secret": "Display/edit client secret:",
             "edit": "Edit Client",
             "generate-new-secret": "Generate a new client secret?",

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

@@ -359,7 +359,13 @@
                             <%-($.inArray("urn:ietf:params:oauth:grant_type:redelegate", client.grantTypes) > -1 ? 'checked' : '')%>> 
                         <label for="grantTypes-redelegate" class="checkbox" data-i18n="client.client-form.redelegation">redelegate</label>
                     </div>
-                </div>
+ 
+                    <div>
+                        <input id="grantTypes-device" type="checkbox"
+                            <%-($.inArray("urn:ietf:params:oauth:grant-type:device_code", client.grantTypes) > -1 ? 'checked' : '')%>> 
+                        <label for="grantTypes-device" class="checkbox" data-i18n="client.client-form.device">device</label>
+                    </div>
+               </div>
             </div>
 
 			<div class="control-group" id="responseTypes">
@@ -611,6 +617,22 @@
                     <p class="help-block" data-i18n="client.client-form.token-timeout-help">Enter this time in seconds, minutes, or hours.</p>
                 </div>
             </div>
+
+            <div class="control-group" id="deviceCodeValidityTime">
+                <label class="control-label" data-i18n="client.client-form.device-code-timeout">Device Code Timeout</label>
+                <div class="controls">
+                    <div>
+                        <input type="text" class="" value="<%-(client.deviceCodeValiditySeconds == null ? '' : client.deviceCodeValiditySeconds)%>" id="device-code-timeout-time" size="16" style="width:8em;">
+						<select id="device-code-timeout-unit" style="width:8em;">
+							<option data-i18n="client.client-form.seconds">seconds</option>
+							<option data-i18n="client.client-form.minutes">minutes</option>
+							<option data-i18n="client.client-form.hours">hours</option>
+						</select>
+                    </div>
+                    <p class="help-block" data-i18n="client.client-form.token-timeout-help">Enter this time in seconds, minutes, or hours.</p>
+                </div>
+            </div>
+
 	</div>
 
 	<div class="tab-pane" id="client-crypto-tab">