[OID4VP] Improve cross-device login page layout - #51452
Conversation
8877a77 to
fb4c9b5
Compare
There was a problem hiding this comment.
Pull request overview
Improves Keycloak v2 cross-device login layouts and unifies QR code and divider rendering.
Changes:
- Adds reusable QR code and divider macros.
- Reorders OID4VP actions and updates TOTP/OID4VC layouts.
- Adds shared styling and localized labels.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
theme.properties |
Defines shared component classes. |
social-providers.ftl |
Uses the shared divider. |
styles.css |
Styles dividers and QR codes. |
qr-code.ftl |
Adds the QR code macro. |
oid4vc-credential-offer.ftl |
Adopts shared QR and button macros. |
login-oid4vp.ftl |
Prioritizes QR-based login. |
login-config-totp.ftl |
Uses the shared QR macro. |
divider.ftl |
Adds the divider macro. |
messages_en.properties |
Updates English labels. |
messages_pt_BR.properties |
Updates Portuguese divider text. |
messages_fr.properties |
Updates French divider text. |
c2d8c80 to
1ba047b
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 11 out of 11 changed files in this pull request and generated no new comments.
Suppressed comments (2)
themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css:177
- The linked issue requires QR-code inversion to be enabled only when the theme's
darkModesetting is active, but this rule neither inverts the image nor checks thepf-v5-theme-darkclass thattemplate.ftlconditionally adds. As written, dark-mode QR codes retain their light rendering, while child themes withdarkMode=falsestill lose the border and shadow based solely on the OS preference.
@media (prefers-color-scheme: dark) {
.kc-qr-code img {
border: none;
box-shadow: none;
}
themes/src/main/resources/theme/keycloak.v2/login/oid4vc-credential-offer.ftl:15
- This visible alt text is hard-coded in English, so non-English credential-offer pages expose an untranslated description to screen-reader users. Add a credential-offer-specific message key to the bundles and pass it through
msg(...), as the TOTP and OID4VP QR-code call sites do.
<@qr.qrCode id="kc-credential-offer-qr-code" content=credentialOffer.qrCode alt="QR code to claim a credential with a wallet">
1ba047b to
62eb67e
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 11 out of 11 changed files in this pull request and generated no new comments.
Suppressed comments (1)
themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css:177
- The dark-mode rule never inverts the QR image as required by #51450, and using the media query directly bypasses the
darkModetemplate-variable gate. Target the class thattemplate.ftladds only when dark mode is enabled and apply the inversion there.
@media (prefers-color-scheme: dark) {
.kc-qr-code img {
border: none;
box-shadow: none;
}
Unify QR code and divider components in the login theme Unify OTP setup buttons to use shared buttons macro Closes keycloak#51451 Closes keycloak#51450 Closes keycloak#51455 Signed-off-by: Martin Bartoš <mabartos@redhat.com>
62eb67e to
e3e7867
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 13 out of 13 changed files in this pull request and generated no new comments.
Suppressed comments (1)
themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css:177
- The dark-mode rule is driven directly by the OS media query and never inverts the QR image, so it is neither gated by Keycloak's
darkModesetting nor does it meet the linked issues' QR inversion requirement. Target the class thattemplate.ftladds only when dark mode is enabled and apply the inversion there.
@media (prefers-color-scheme: dark) {
.kc-qr-code img {
border: none;
box-shadow: none;
}
edewit
left a comment
There was a problem hiding this comment.
I like it very nice with the "components" for divider and qr-code
Translation Changes NotificationLanguage maintainers: Please review the translation changes in your language in Weblate. The following languages have been updated in this PR: French (
|
buttonsmacro #51455Before / After
OID4VP
Before
Screencast.From.2026-08-05.11-17-10.mp4
After
Screencast.From.2026-08-05.12-54-37.mp4
OID4VCI
Before
Screencast.From.2026-08-05.11-15-22.mp4
After
Screencast.From.2026-08-05.12-53-01.mp4
OTP
Before
Screencast.From.2026-08-05.11-21-46.mp4
After
Screencast.From.2026-08-05.13-09-36.mp4