Skip to content

Redesign identity provider buttons on the login page#50993

Merged
rmartinc merged 1 commit into
keycloak:mainfrom
mabartos:KC-50992
Jul 23, 2026
Merged

Redesign identity provider buttons on the login page#50993
rmartinc merged 1 commit into
keycloak:mainfrom
mabartos:KC-50992

Conversation

@mabartos

@mabartos mabartos commented Jul 17, 2026

Copy link
Copy Markdown
Member

Old vs. New (dark)

Old New
Screenshot From 2026-07-17 15-36-41 Screenshot From 2026-07-22 13-18-15
Screenshot From 2026-07-17 15-37-45 Screenshot From 2026-07-22 13-17-25

Old vs. New (light)

Old New
Screenshot From 2026-07-17 15-37-03 Screenshot From 2026-07-22 13-18-33
Screenshot From 2026-07-17 15-37-29 Screenshot From 2026-07-22 13-17-08

Ligth/dark icons are properly exchanged when OS mode is changed

Screencast.From.2026-07-22.13-12-43.mp4

@keycloak-github-bot keycloak-github-bot Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Unreported flaky test detected, please review

@keycloak-github-bot

Copy link
Copy Markdown

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.oauth.ClientAuthPostMethodTest#testPostAuthenticationNotAllowedWhenBasicRequested

Keycloak CI - Base IT (6)

java.lang.NullPointerException: Cannot read field "features" because the return value of "org.keycloak.common.Profile.getInstance()" is null
	at org.keycloak.common.Profile.isFeatureEnabled(Profile.java:534)
	at org.keycloak.protocol.oidc.OIDCClientSecretConfigWrapper.<init>(OIDCClientSecretConfigWrapper.java:41)
	at org.keycloak.protocol.oidc.OIDCClientSecretConfigWrapper.fromClientRepresentation(OIDCClientSecretConfigWrapper.java:49)
	at org.keycloak.testsuite.oauth.ClientAuthPostMethodTest.testPostAuthenticationNotAllowedWhenBasicRequested(ClientAuthPostMethodTest.java:141)
...

Report flaky test

org.keycloak.testsuite.oauth.ClientAuthPostMethodTest#testBasicAuthenticationNotAllowedWhenPostRequested

Keycloak CI - Base IT (6)

java.lang.NullPointerException: Cannot read field "features" because the return value of "org.keycloak.common.Profile.getInstance()" is null
	at org.keycloak.common.Profile.isFeatureEnabled(Profile.java:534)
	at org.keycloak.protocol.oidc.OIDCClientSecretConfigWrapper.<init>(OIDCClientSecretConfigWrapper.java:41)
	at org.keycloak.protocol.oidc.OIDCClientSecretConfigWrapper.fromClientRepresentation(OIDCClientSecretConfigWrapper.java:49)
	at org.keycloak.testsuite.oauth.ClientAuthPostMethodTest.testBasicAuthenticationNotAllowedWhenPostRequested(ClientAuthPostMethodTest.java:112)
...

Report flaky test

org.keycloak.testsuite.forms.MultipleTabsLoginTest#multipleTabsParallelLoginTestWithAuthSessionExpiredAndRequiredAction

Keycloak CI - Forms IT (chrome)

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.forms.MultipleTabsLoginTest#multipleTabsParallelLoginTestWithAuthSessionExpiredAndRegisterClick

Keycloak CI - Forms IT (chrome)

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.forms.BrowserFlowTest#testUserWithOneAdditionalFactorOtpSuccess

Keycloak CI - Base IT (5)

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

@mabartos
mabartos marked this pull request as ready for review July 22, 2026 11:24
@mabartos
mabartos requested a review from a team as a code owner July 22, 2026 11:24
Copilot AI review requested due to automatic review settings July 22, 2026 11:24
@mabartos
mabartos requested a review from a team as a code owner July 22, 2026 11:24

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

Redesigns Keycloak v2 login-page identity provider buttons with branded icons, clearer labels, and improved layout.

Changes:

  • Adds branded SVG assets with dark-mode variants.
  • Updates provider layout, divider, labels, and styling.
  • Updates tests, release notes, and migration guidance.

Reviewed changes

Copilot reviewed 8 out of 25 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
themes/.../login/theme.properties Updates button and divider classes.
themes/.../login/social-providers.ftl Refactors provider rendering and labels.
themes/.../social/twitter.svg Adds Twitter/X icon.
themes/.../social/twitter-light.svg Adds dark-mode Twitter/X icon.
themes/.../social/stackoverflow.svg Adds Stack Overflow icon.
themes/.../social/paypal.svg Adds PayPal icon.
themes/.../social/openshift-v4.svg Adds OpenShift icon.
themes/.../social/microsoft.svg Adds Microsoft icon.
themes/.../social/linkedin-openid-connect.svg Adds LinkedIn icon.
themes/.../social/instagram.svg Adds Instagram icon.
themes/.../social/instagram-light.svg Adds dark-mode Instagram icon.
themes/.../social/google.svg Adds Google icon.
themes/.../social/gitlab.svg Adds GitLab icon.
themes/.../social/github.svg Adds GitHub icon.
themes/.../social/github-light.svg Adds dark-mode GitHub icon.
themes/.../social/facebook.svg Adds Facebook icon.
themes/.../social/default.svg Adds default provider icon.
themes/.../social/default-light.svg Adds dark-mode default icon.
themes/.../social/bitbucket.svg Adds Bitbucket icon.
themes/.../resources/css/styles.css Styles icons, buttons, and divider.
themes/.../messages/messages_en.properties Adds improved provider labels.
tests/base/.../LoginPageTest.java Updates expected button text.
docs/.../changes-26_8_0.adoc Documents migration impact.
docs/.../topics/26_8_0.adoc Adds release notes.
docs/.../release_notes/index.adoc Includes the 26.8 release notes.

Comment thread themes/src/main/resources/theme/keycloak.v2/login/social-providers.ftl Outdated
Copilot AI review requested due to automatic review settings July 22, 2026 11: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

Copilot reviewed 8 out of 25 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

themes/src/main/resources/theme/keycloak.v2/login/social-providers.ftl:24

  • The anchor's existing aria-label still exposes only the provider name, overriding this new descriptive visible label for assistive technologies. Use the translated “Sign in with …” text for the anchor's accessible name as well.
                                    ${msg("signInWithProvider", p.displayName!)}

Comment thread themes/src/main/resources/theme/base/login/messages/messages_en.properties Outdated
Closes keycloak#50992

Signed-off-by: Martin Bartoš <mabartos@redhat.com>
Copilot AI review requested due to automatic review settings July 22, 2026 11:49

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 8 out of 25 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

themes/src/main/resources/theme/keycloak.v2/login/social-providers.ftl:17

  • With more than three providers, this sets each link's accessible name to only the provider name, so screen-reader users do not get the new “Sign in with …” action conveyed by the button. Keep the compact visible grid label if needed, but always use the descriptive localized label for aria-label.
                          class="${properties.kcFormSocialAccountListButtonClass!}" aria-label="<#if useGrid>${p.displayName!}<#else>${msg("signInWithProvider", p.displayName!)}</#if>"

Comment thread themes/src/main/resources/theme/keycloak.v2/login/theme.properties

@keycloak-github-bot keycloak-github-bot Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Unreported flaky test detected, please review

@keycloak-github-bot

Copy link
Copy Markdown

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.forms.BruteForceTest#testExceedMaxTemporaryLockouts

Keycloak CI - Base IT (5)

org.opentest4j.AssertionFailedError: Expected error event ==> 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

1 similar comment
@keycloak-github-bot

Copy link
Copy Markdown

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.forms.BruteForceTest#testExceedMaxTemporaryLockouts

Keycloak CI - Base IT (5)

org.opentest4j.AssertionFailedError: Expected error event ==> 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

@keycloak-github-bot keycloak-github-bot Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Unreported flaky test detected, please review

@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!

@rmartinc
rmartinc merged commit 388b0db into keycloak:main Jul 23, 2026
147 of 149 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Redesign identity provider buttons on the login page

3 participants