src/main/resources/templates/consent.jte

@@ -30,10 +30,7 @@
             </li>
             @for (var scope : scopes)
                 <li class="list-group-item">
-                    <input class="form-check-input" type="checkbox" name="scope" value="${scope}" id="scope_${scope}" checked>
+                    @template.consent_scope(scope = scope)
-                    <label class="form-check-label" for="scope_${scope}">
-                        ${scope}
-                    </label>
                 </li>
             @endfor
         </ul>

src/main/resources/templates/consent_scope.jte

@@ -0,0 +1,31 @@
+@import java.util.Objects
+
+@param String scope
+
+<label class="d-flex gap-3">
+    <input class="form-check-input flex-shrink-0" type="checkbox" name="scope" value="${scope}" id="scope_${scope}" checked aria-label="${scope}">
+    @if (Objects.equals("profile", scope))
+        <dl>
+            <dt>Given name</dt>
+            <dd>...</dd>
+
+            <dt>Family name</dt>
+            <dd>...</dd>
+
+            <dt>Display name</dt>
+            <dd>...</dd>
+        </dl>
+    @elseif (Objects.equals("email", scope))
+        <dl>
+            <dt>E-mail address</dt>
+            <dd>...</dd>
+        </dl>
+    @elseif (Objects.equals("offline_access", scope))
+        <div>Maintain access after you leave the application</div>
+    @else
+        <div>${scope}</div>
+    @endif
+    <div class="ms-auto">
+        <small class="text-muted">scope: ${scope}</small>
+    </div>
+</label>