Skip to content

[OID4VP] Improve cross-device login page layout - #51452

Merged
rmartinc merged 1 commit into
keycloak:mainfrom
mabartos:qr-codes-divider
Aug 6, 2026
Merged

[OID4VP] Improve cross-device login page layout#51452
rmartinc merged 1 commit into
keycloak:mainfrom
mabartos:qr-codes-divider

Conversation

@mabartos

@mabartos mabartos commented Aug 5, 2026

Copy link
Copy Markdown
Member

Before / 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

@mabartos
mabartos marked this pull request as ready for review August 5, 2026 10:28
@mabartos
mabartos requested review from a team as code owners August 5, 2026 10:28
Copilot AI balanced review requested due to automatic review settings August 5, 2026 10:28
@mabartos
mabartos marked this pull request as draft August 5, 2026 10:28

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread themes/src/main/resources/theme/keycloak.v2/login/divider.ftl
Comment thread themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css Outdated
Comment thread themes/src/main/resources/theme/keycloak.v2/login/oid4vc-credential-offer.ftl Outdated
@mabartos
mabartos force-pushed the qr-codes-divider branch 2 times, most recently from c2d8c80 to 1ba047b Compare August 5, 2026 11:04
@mabartos
mabartos marked this pull request as ready for review August 5, 2026 11:04
Copilot AI review requested due to automatic review settings August 5, 2026 11:04
@mabartos
mabartos marked this pull request as draft August 5, 2026 11:04

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 darkMode setting is active, but this rule neither inverts the image nor checks the pf-v5-theme-dark class that template.ftl conditionally adds. As written, dark-mode QR codes retain their light rendering, while child themes with darkMode=false still 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">

@mabartos
mabartos marked this pull request as ready for review August 5, 2026 11:11
Copilot AI review requested due to automatic review settings August 5, 2026 11:11
@mabartos
mabartos marked this pull request as draft August 5, 2026 11:11

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 darkMode template-variable gate. Target the class that template.ftl adds 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>
@mabartos mabartos changed the title Improve cross-device login page layout [OID4VP] Improve cross-device login page layout Aug 5, 2026
@mabartos
mabartos marked this pull request as ready for review August 5, 2026 14:01
@mabartos
mabartos requested review from a team as code owners August 5, 2026 14:01
Copilot AI review requested due to automatic review settings August 5, 2026 14:01

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 darkMode setting nor does it meet the linked issues' QR inversion requirement. Target the class that template.ftl adds 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 edewit left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like it very nice with the "components" for divider and qr-code

@mabartos

mabartos commented Aug 5, 2026

Copy link
Copy Markdown
Member Author

@edewit Thanks for the review!

@rmartinc Could you please check it? Thanks

@rmartinc rmartinc left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @mabartos and @edewit! LGTM too!

@rmartinc
rmartinc merged commit 8c7dfd3 into keycloak:main Aug 6, 2026
147 of 149 checks passed
@github-actions

github-actions Bot commented Aug 6, 2026

Copy link
Copy Markdown

Translation Changes Notification

Language maintainers: Please review the translation changes in your language in Weblate.

The following languages have been updated in this PR:

French (fr)

@Dodouce, @GitSpoon

Changes waiting for approval.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

4 participants