Align Keycloak v3 login pages with PatternFly 6 by mabartos · Pull Request #55115 · keycloak/keycloak

mabartos · 2026-11-12T14:39:30Z

Closes Broken background and styling issues after post-upgrade version #55114

For instance, new OTP form (instead of "unnamed", there's the localized "Default"):

@edewit @kathari00 @vaceksimon Please review

Closes keycloak#55114 Signed-off-by: kathari00 <katharina.eiserfey1@gmail.com> Signed-off-by: Martin Bartoš <mabartos@redhat.com>

Copilot

🔵 Needs a closer look

The snapshot lacks the bundled PatternFly 6 CSS, so browser validation with the built theme is needed to confirm OTP hit targets and selected states, clipboard expansion styling, and responsive recovery-code buttons.

No open issues 🎉

What changed in this PR

Aligns Keycloak v3 login pages with PatternFly 6 to address the background, OTP selector, and button styling issues reported in #55114.

Changes:

Replaces OTP tiles with shared radio-button cards and adds a localized “Default” label for unnamed credentials.
Adjusts backgrounds, buttons, alerts, clipboard controls, and supporting layouts.
Updates UI page selectors and OTP tests, including coverage that user-provided credential labels remain unchanged.

File	Description
`themes/src/main/resources/theme/keycloak.v3/login/theme.properties`	Updates PatternFly classes and adds OTP card styling mappings.
`themes/src/main/resources/theme/keycloak.v3/login/resources/css/styles.css`	Adjusts background sizing and social-button text wrapping.
`themes/src/main/resources/theme/base/login/otp-credential.ftl`	Adds shared OTP selection cards with native radio inputs.
`themes/src/main/resources/theme/base/login/messages/messages_en.properties`	Adds OTP headings and the default credential label.
`themes/src/main/resources/theme/base/login/login-reset-otp.ftl`	Uses shared OTP cards and standard action grouping.
`themes/src/main/resources/theme/base/login/login-recovery-authn-code-config.ftl`	Uses default button widths for recovery-code actions.
`themes/src/main/resources/theme/base/login/login-otp.ftl`	Adopts OTP cards and removes custom selection JavaScript.
`themes/src/main/resources/theme/base/login/login-oid4vp.ftl`	Adjusts expired-code messaging layout and link wrapping.
`themes/src/main/resources/theme/base/login/frontchannel-logout.ftl`	Applies form, list, and full-width button styling.
`themes/src/main/resources/theme/base/login/field.ftl`	Repositions password errors and revises clipboard markup.
`themes/src/main/resources/theme/base/login/delete-account-confirm.ftl`	Uses form-specific alert styling with a fallback.
`testsuite/integration-arquillian/tests/base/src/test/java/org/keycloak/testsuite/forms/LevelOfAssuranceFlowTest.java`	Updates the expected unnamed OTP label.
`testsuite/integration-arquillian/tests/base/src/test/java/org/keycloak/testsuite/forms/BrowserFlowTest.java`	Updates label expectations and tests literal user-label rendering.
`testsuite/integration-arquillian/tests/base/src/main/java/org/keycloak/testsuite/pages/ResetOtpPage.java`	Selects OTP credentials through radio labels.
`testsuite/integration-arquillian/tests/base/src/main/java/org/keycloak/testsuite/pages/LoginTotpPage.java`	Updates selectors for radio-based OTP cards.
`test-framework/ui/src/main/java/org/keycloak/testframework/ui/page/LoginTotpPage.java`	Updates framework selectors for the new OTP markup.
`services/src/main/java/org/keycloak/forms/login/freemarker/model/TotpLoginBean.java`	Preserves raw credential labels for template-level fallback handling.
`services/src/main/java/org/keycloak/authentication/authenticators/browser/OTPFormAuthenticator.java`	Removes the hard-coded unnamed credential label constant.

_{Review effort: Balanced}

…atting Signed-off-by: Martin Bartoš <mabartos@redhat.com>

Copilot

🔵 Needs a closer look

The selectable-card and clipboard markup depends on PatternFly 6 CSS missing from this checkout, leaving keyboard selection, focus indicators, and responsive layouts pending browser validation.

No open issues 🎉

_{Review effort: Balanced}

PatternFly 6 buttons keep their label on one line, so in narrow layouts (320px wide, or 1280px at 400% zoom) longer labels get clipped, e.g. "Send verification email" on login-verify-email, and some locales overflow horizontally on recovery codes config and IdP link confirm pages (WCAG 1.4.10 Reflow). Allow the labels of form action buttons to wrap, with hyphenation for long words. Signed-off-by: kathari00 <katharina.eiserfey1@gmail.com>

Copilot

🔵 Needs a closer look

The OTP cards and clipboard markup require browser validation against the bundled PatternFly 6 CSS, absent from this snapshot, to confirm selection hit areas, expanded states, and responsive rendering.

No open issues 🎉

_{Review effort: Balanced}

Signed-off-by: Martin Bartoš <mabartos@redhat.com>

Copilot

🔵 Needs a closer look

The shared login template changes need browser validation for OTP selection, keyboard interaction, and narrow or localized layouts, but the required PF6 assets are unavailable in this checkout.

No open issues 🎉

_{Review effort: Balanced}

keycloak-github-bot

Unreported flaky test detected, please review

keycloak-github-bot · 2026-11-13T08:19:06Z

Unreported flaky test detected

If the flaky tests below are affected by the changes, please review and update the changes accordingly. Otherwise, a maintainer should report the flaky tests prior to merging the PR.

org.keycloak.testsuite.adapter.servlet.SAMLServletAdapterTest#salesPostSigEmailTest

Keycloak CI - Adapter IT

org.opentest4j.AssertionFailedError: expected: <true> but was: <false>
	at org.junit.jupiter.api.AssertionFailureBuilder.build(AssertionFailureBuilder.java:151)
	at org.junit.jupiter.api.AssertionFailureBuilder.buildAndThrow(AssertionFailureBuilder.java:132)
	at org.junit.jupiter.api.AssertTrue.failNotTrue(AssertTrue.java:63)
	at org.junit.jupiter.api.AssertTrue.assertTrue(AssertTrue.java:36)
...

Report flaky test

org.keycloak.testsuite.adapter.servlet.SAMLServletAdapterTest#testReloginWithInvalidAuthSessionCookie

Keycloak CI - Adapter IT

org.opentest4j.AssertionFailedError: Expected page 'login-login' to be loaded, but currently on page 'null' after timeout
	at org.junit.jupiter.api.AssertionUtils.fail(AssertionUtils.java:38)
	at org.junit.jupiter.api.Assertions.fail(Assertions.java:138)
	at org.keycloak.testsuite.pages.AbstractPage.waitForPage(AbstractPage.java:63)
	at org.keycloak.testsuite.pages.AbstractPage.assertCurrent(AbstractPage.java:48)
...

Report flaky test

org.keycloak.testsuite.adapter.servlet.SAMLServletAdapterTest#testUserAttributeStatementMapperUserGroupsNoAggregate

Keycloak CI - Adapter IT

java.lang.AssertionError: 

Expected: ["user-value1"] 
     but: no item was "user-value1"
	at org.hamcrest.MatcherAssert.assertThat(MatcherAssert.java:20)
...

Report flaky test

org.keycloak.testsuite.adapter.servlet.SAMLServletAdapterTest#idpInitiatedLoginTest

Keycloak CI - Adapter IT

org.openqa.selenium.TimeoutException: 
Expected condition failed: waiting for wrapped: text ('principal=bburke') to be present in text in element found by By.xpath: //body
(tried for 5 seconds with 500 milliseconds interval)
Build info: version: '4.46.0', revision: 'df5a634 df5a6341cbb5f8f06b836bd595752775627c80dc'
System info: os.name: 'Linux', os.arch: 'amd64', os.version: '7.0.0-1019-azure', java.version: '21.0.13'
...

Report flaky test

mabartos · 2026-11-13T09:45:51Z

@edewit @kathari00 @vaceksimon Could you please review? Thanks!

Align Keycloak v3 login pages with PatternFly 6

a0ea075

Closes keycloak#55114 Signed-off-by: kathari00 <katharina.eiserfey1@gmail.com> Signed-off-by: Martin Bartoš <mabartos@redhat.com>

mabartos requested review from a team as code owners November 12, 2026 14:39

Copilot AI balanced review requested due to automatic review settings November 12, 2026 14:39

keycloak-github-bot Bot added the team/core-authn label Nov 12, 2026

Copilot started reviewing on behalf of mabartos November 12, 2026 14:40

View session

mabartos requested review from edewit and vaceksimon November 12, 2026 14:40

mabartos marked this pull request as draft November 12, 2026 14:40

Copilot AI reviewed Nov 12, 2026

View reviewed changes

edewit previously approved these changes Nov 12, 2026

View reviewed changes

Unify logout other sessions checkbox, instruction padding, terms form…

6ddfa8c

…atting Signed-off-by: Martin Bartoš <mabartos@redhat.com>

mabartos dismissed edewit’s stale review via 6ddfa8c November 12, 2026 15:22

mabartos requested a review from edewit November 12, 2026 15:22

mabartos marked this pull request as ready for review November 12, 2026 15:23

Copilot AI balanced review requested due to automatic review settings November 12, 2026 15:23

Copilot started reviewing on behalf of mabartos November 12, 2026 15:23

View session

Copilot AI reviewed Nov 12, 2026

View reviewed changes

edewit previously approved these changes Nov 12, 2026

View reviewed changes

kathari00 reviewed Nov 12, 2026

View reviewed changes

Comment thread themes/src/main/resources/theme/base/login/login-otp.ftl Resolved

kathari00 mentioned this pull request Nov 12, 2026

Let v3 action button labels wrap on narrow viewports mabartos/keycloak#1183

Merged

mabartos dismissed edewit’s stale review via fc3d87e November 13, 2026 07:13

Copilot AI balanced review requested due to automatic review settings November 13, 2026 07:13

Copilot started reviewing on behalf of mabartos November 13, 2026 07:14

View session

Copilot AI reviewed Nov 13, 2026

View reviewed changes

OTP always autofocus on the input

9e7240b

Signed-off-by: Martin Bartoš <mabartos@redhat.com>

Copilot AI balanced review requested due to automatic review settings November 13, 2026 07:29

Copilot started reviewing on behalf of mabartos November 13, 2026 07:29

View session

Copilot AI reviewed Nov 13, 2026

View reviewed changes

keycloak-github-bot Bot added the flaky-test label Nov 13, 2026

keycloak-github-bot Bot reviewed Nov 13, 2026

View reviewed changes

mabartos requested review from edewit and kathari00 November 13, 2026 09:45

edewit approved these changes Nov 13, 2026

View reviewed changes

Navigation Menu

Repository navigation

Align Keycloak v3 login pages with PatternFly 6 - #55115

Align Keycloak v3 login pages with PatternFly 6#55115
mabartos wants to merge 4 commits into
keycloak:mainfrom
mabartos:KC-55114

mabartos commented Nov 12, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

keycloak-github-bot Bot left a comment

Uh oh!

keycloak-github-bot Bot commented Nov 13, 2026

Uh oh!

mabartos commented Nov 13, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

mabartos commented Nov 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Uh oh!

keycloak-github-bot Bot left a comment

Choose a reason for hiding this comment

Uh oh!

keycloak-github-bot Bot commented Nov 13, 2026

Unreported flaky test detected

org.keycloak.testsuite.adapter.servlet.SAMLServletAdapterTest#salesPostSigEmailTest

org.keycloak.testsuite.adapter.servlet.SAMLServletAdapterTest#testReloginWithInvalidAuthSessionCookie

org.keycloak.testsuite.adapter.servlet.SAMLServletAdapterTest#testUserAttributeStatementMapperUserGroupsNoAggregate

org.keycloak.testsuite.adapter.servlet.SAMLServletAdapterTest#idpInitiatedLoginTest

Uh oh!

mabartos commented Nov 13, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mabartos commented Nov 12, 2026 •

edited

Loading