Skip to content

Commit f05b0b1

Browse files
ardetrickardetrick
authored
feat(reference-app): collapse the code and token values behind disclosures (#193)
* feat(reference-app): adopt Pico CSS for the login, logout, and landing pages Vendors Pico v2.1.1 as static/pico.min.css and restyles the pages as a centered card. Login now pre-fills the demo credentials with a caption so they are obvious. Page titles are normalized to h1, and the screenshot viewport is pinned to 576x520 so captures are a uniform, GitHub-column-friendly size. * feat(reference-app): collapse the code and token values behind disclosures The callback page leads with a prominent Exchange button and an honest note that a real app does this server-side; the raw authorization code and the client credentials move into <details> disclosures. The tokens page leads with a success line and tucks the raw token response and decoded claims behind disclosures. This keeps the variable-length, non-deterministic content out of the default view so every screen is a fixed size.
1 parent f67ddf9 commit f05b0b1

3 files changed

Lines changed: 39 additions & 18 deletions

File tree

‎reference-app/src/main/resources/templates/callback.ftlh‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,43 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Callback</title>
6+
<link rel="stylesheet" href="/pico.min.css">
67
</head>
78
<body>
9+
<main class="container"><article>
810
<h1>Callback</h1>
911

1012
<#if error??>
1113
<p>Hydra redirected back with an OAuth error instead of a code:</p>
1214
<pre>${error}<#if errorDescription??>: ${errorDescription}</#if></pre>
1315
<a href="/">Back to start</a>
1416
<#else>
15-
<p>Hydra redirected back with an authorization code:</p>
16-
<pre>${code!""}</pre>
17-
18-
<p>Exchange it for tokens. The client fields are pre-filled for the seeded demo client; change
19-
them if you started the flow with a different client.</p>
17+
<p>Hydra redirected back with an authorization code. Exchange it for tokens to finish the flow.</p>
18+
<p><small>In a real app your server makes this exchange automatically, without the browser ever
19+
seeing the code. Here you click it so you can watch the step happen.</small></p>
2020

2121
<form action="/callback/exchange" method="post">
2222
<input type="hidden" name="code" value="${code!""}" />
2323
<input type="hidden" name="redirectUri" value="${redirectUri}" />
2424

25-
<label for="clientId">Client ID:</label>
26-
<input type="text" id="clientId" name="clientId" value="demo-client" size="40" /><br>
27-
<label for="clientSecret">Client secret:</label>
28-
<input type="text" id="clientSecret" name="clientSecret" value="omit-for-random-secret-1" size="40" /><br>
29-
3025
<input type="submit" id="exchange" name="submit" value="Exchange code for tokens" />
26+
27+
<details>
28+
<summary>View raw code</summary>
29+
<pre>${code!""}</pre>
30+
</details>
31+
32+
<details>
33+
<summary>Client credentials</summary>
34+
<p><small>Pre-filled for the seeded demo client; change them if you started the flow with a
35+
different client.</small></p>
36+
<label for="clientId">Client ID</label>
37+
<input type="text" id="clientId" name="clientId" value="demo-client" />
38+
<label for="clientSecret">Client secret</label>
39+
<input type="text" id="clientSecret" name="clientSecret" value="omit-for-random-secret-1" />
40+
</details>
3141
</form>
3242
</#if>
43+
</article></main>
3344
</body>
3445
</html>

‎reference-app/src/main/resources/templates/tokens.ftlh‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,29 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Token Response</title>
6+
<link rel="stylesheet" href="/pico.min.css">
67
</head>
78
<body>
9+
<main class="container"><article>
810
<h1>Token Response</h1>
11+
<p>Success — Hydra exchanged the code for a real access token, ID token, and refresh token.</p>
912

10-
<p>The raw response from Hydra's token endpoint:</p>
11-
<pre>${tokenResponse}</pre>
13+
<details>
14+
<summary>Raw token response</summary>
15+
<p><small>The raw JSON from Hydra's token endpoint.</small></p>
16+
<pre>${tokenResponse}</pre>
17+
</details>
1218

1319
<#if idTokenClaims??>
14-
<h2>Decoded id_token claims</h2>
15-
<p>The payload of the id_token JWT (signature not verified here — that is the client's job,
16-
against <code>/.well-known/jwks.json</code>):</p>
20+
<details>
21+
<summary>Decoded id_token claims</summary>
22+
<p><small>The payload of the id_token JWT (signature not verified here — that is the client's
23+
job, against <code>/.well-known/jwks.json</code>).</small></p>
1724
<pre>${idTokenClaims}</pre>
25+
</details>
1826
</#if>
1927

20-
<a href="/">Back to start</a>
28+
<p><a href="/">Back to start</a></p>
29+
</article></main>
2130
</body>
2231
</html>

‎reference-app/src/test/java/com/ardetrick/oryhydrareference/OryHydraReferenceApplicationFunctionalTests.java‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -624,8 +624,9 @@ public void quickStartFromLandingPageExchangesTokensInBrowser() {
624624
page.screenshot(screenshotPathProducer.screenshotOptionsForStepName("callback-page"));
625625
assertThat(page.url()).contains("/callback?code=");
626626

627-
// The form pre-fills the seeded demo client's values; this test's client is unique, so
628-
// overwrite them.
627+
// The credentials are tucked behind a disclosure and pre-filled for the seeded demo client;
628+
// this test's client is unique, so expand the section and overwrite them.
629+
page.locator("summary:has-text('Client credentials')").click();
629630
page.locator("input[id=clientId]").fill(clientId);
630631
page.locator("input[id=clientSecret]").fill(clientSecret);
631632
page.locator("input[id=exchange]").click();

0 commit comments

Comments
 (0)