Use custom consent page for device code flow

Issue gh-1189

samples/featured-authorizationserver/src/main/java/sample/config/AuthorizationServerConfig.java

@@ -102,6 +102,9 @@ public class AuthorizationServerConfig {
 			.deviceAuthorizationEndpoint(deviceAuthorizationEndpoint ->
 				deviceAuthorizationEndpoint.verificationUri("/activate")
 			)
+			.deviceVerificationEndpoint(deviceVerificationEndpoint ->
+				deviceVerificationEndpoint.consentPage(CUSTOM_CONSENT_PAGE_URI)
+			)
 			.clientAuthentication(clientAuthentication ->
 				clientAuthentication
 					.authenticationConverter(deviceClientAuthenticationConverter)

samples/featured-authorizationserver/src/main/java/sample/web/AuthorizationConsentController.java

@@ -52,7 +52,8 @@ public class AuthorizationConsentController {
 	public String consent(Principal principal, Model model,
 			@RequestParam(OAuth2ParameterNames.CLIENT_ID) String clientId,
 			@RequestParam(OAuth2ParameterNames.SCOPE) String scope,
-			@RequestParam(OAuth2ParameterNames.STATE) String state) {
+			@RequestParam(OAuth2ParameterNames.STATE) String state,
+			@RequestParam(name = OAuth2ParameterNames.USER_CODE, required = false) String userCode) {
 
 		// Remove scopes that were already approved
 		Set<String> scopesToApprove = new HashSet<>();
@@ -82,6 +83,12 @@ public class AuthorizationConsentController {
 		model.addAttribute("scopes", withDescription(scopesToApprove));
 		model.addAttribute("previouslyApprovedScopes", withDescription(previouslyApprovedScopes));
 		model.addAttribute("principalName", principal.getName());
+		model.addAttribute("userCode", userCode);
+		if (StringUtils.hasText(userCode)) {
+			model.addAttribute("requestURI", "/oauth2/device_verification");
+		} else {
+			model.addAttribute("requestURI", "/oauth2/authorize");
+		}
 
 		return "consent";
 	}

samples/featured-authorizationserver/src/main/resources/templates/consent.html

@@ -28,15 +28,24 @@
             </p>
         </div>
     </div>
+    <div th:if="${userCode}" class="row">
+        <div class="col text-center">
+            <p class="alert alert-warning">You have provided the code
+                <span class="font-weight-bold" th:text="${userCode}"></span>.
+                Verify that this code matches what is shown on your device.
+            </p>
+        </div>
+    </div>
     <div class="row pb-3">
         <div class="col text-center"><p>The following permissions are requested by the above app.<br/>Please review
             these and consent if you approve.</p></div>
     </div>
     <div class="row">
         <div class="col text-center">
-            <form name="consent_form" method="post" th:action="@{/oauth2/authorize}">
+            <form name="consent_form" method="post" th:action="${requestURI}">
                 <input type="hidden" name="client_id" th:value="${clientId}">
                 <input type="hidden" name="state" th:value="${state}">
+                <input th:if="${userCode}" type="hidden" name="user_code" th:value="${userCode}">
 
                 <div th:each="scope: ${scopes}" class="form-group form-check py-1">
                     <input class="form-check-input"