From f7c88d784cbe12c83b1da6c00e4207b345419a3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Barto=C5=A1?= Date: Thu, 16 Jul 2026 18:46:44 +0200 Subject: [PATCH] Redesign identity provider buttons on the login page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes #50992 Signed-off-by: Martin Bartoš --- docs/documentation/release_notes/index.adoc | 3 + .../release_notes/topics/26_8_0.adoc | 10 ++ .../topics/changes/changes-26_8_0.adoc | 8 ++ .../keycloak/tests/i18n/LoginPageTest.java | 6 +- .../login/messages/messages_en.properties | 3 + .../login/resources/css/styles.css | 42 +++++-- .../login/resources/img/social/bitbucket.svg | 3 + .../resources/img/social/default-light.svg | 3 + .../login/resources/img/social/default.svg | 3 + .../login/resources/img/social/facebook.svg | 3 + .../resources/img/social/github-light.svg | 3 + .../login/resources/img/social/github.svg | 3 + .../login/resources/img/social/gitlab.svg | 6 + .../login/resources/img/social/google.svg | 1 + .../resources/img/social/instagram-light.svg | 3 + .../login/resources/img/social/instagram.svg | 3 + .../img/social/linkedin-openid-connect.svg | 3 + .../login/resources/img/social/microsoft.svg | 6 + .../resources/img/social/openshift-v4.svg | 8 ++ .../login/resources/img/social/paypal.svg | 5 + .../resources/img/social/stackoverflow.svg | 3 + .../resources/img/social/twitter-light.svg | 3 + .../login/resources/img/social/twitter.svg | 3 + .../keycloak.v2/login/social-providers.ftl | 108 +++++++----------- .../theme/keycloak.v2/login/theme.properties | 5 +- 25 files changed, 167 insertions(+), 80 deletions(-) create mode 100644 docs/documentation/release_notes/topics/26_8_0.adoc create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/bitbucket.svg create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/default-light.svg create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/default.svg create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/facebook.svg create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/github-light.svg create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/github.svg create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/gitlab.svg create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/google.svg create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/instagram-light.svg create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/instagram.svg create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/linkedin-openid-connect.svg create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/microsoft.svg create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/openshift-v4.svg create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/paypal.svg create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/stackoverflow.svg create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/twitter-light.svg create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/twitter.svg diff --git a/docs/documentation/release_notes/index.adoc b/docs/documentation/release_notes/index.adoc index 226e2eb2247e..c967141475d7 100644 --- a/docs/documentation/release_notes/index.adoc +++ b/docs/documentation/release_notes/index.adoc @@ -13,6 +13,9 @@ include::topics/templates/document-attributes.adoc[] :release_header_latest_link: {releasenotes_link_latest} include::topics/templates/release-header.adoc[] +== {project_name_full} 26.8.0 +include::topics/26_8_0.adoc[leveloffset=2] + == {project_name_full} 26.7.0 include::topics/26_7_0.adoc[leveloffset=2] diff --git a/docs/documentation/release_notes/topics/26_8_0.adoc b/docs/documentation/release_notes/topics/26_8_0.adoc new file mode 100644 index 000000000000..bf46dfa6f647 --- /dev/null +++ b/docs/documentation/release_notes/topics/26_8_0.adoc @@ -0,0 +1,10 @@ +// Release notes should contain only headline-worthy new features, +// assuming that people who migrate will read the upgrading guide anyway. + += Themes + +== Redesigned identity provider buttons on the login page + +The social identity provider section on the login page has been refreshed with updated icons, a new divider layout, and improved button labels. + +If you have a custom login theme, see the link:{upgradingguide_link}[{upgradingguide_name}] for details on what changed. diff --git a/docs/documentation/upgrading/topics/changes/changes-26_8_0.adoc b/docs/documentation/upgrading/topics/changes/changes-26_8_0.adoc index be158f37c3af..cd75258e203c 100644 --- a/docs/documentation/upgrading/topics/changes/changes-26_8_0.adoc +++ b/docs/documentation/upgrading/topics/changes/changes-26_8_0.adoc @@ -22,6 +22,14 @@ When calling {project_name}'s experimental AuthZEN endpoints, the caller now nee The Admin REST API endpoints for listing client sessions (`GET /admin/realms/\{realm}/clients/\{id}/user-sessions` and `GET /admin/realms/\{realm}/clients/\{id}/offline-sessions`) now filter out sessions belonging to users that the caller does not have permission to view. Previously, any caller with the `view-clients` role could see all user sessions for a client, potentially exposing user identities to callers without the `view-users` role. After upgrading, callers without `view-users` permission will see fewer results from these endpoints. +=== Redesigned identity provider buttons on the login page + +The social identity provider section on the login page has been redesigned with updated icons and layout. +For details, see the https://github.com/keycloak/keycloak/issues/50992[GitHub issue]. +Custom login themes that override `social-providers.ftl` or apply CSS targeting the identity provider icons may render incorrectly after upgrading. + +Test your custom login theme to ensure the identity provider buttons display correctly. + // ------------------------ Deprecated features ------------------------ // == Deprecated features diff --git a/tests/base/src/test/java/org/keycloak/tests/i18n/LoginPageTest.java b/tests/base/src/test/java/org/keycloak/tests/i18n/LoginPageTest.java index 671a99283281..aa9927eeda83 100644 --- a/tests/base/src/test/java/org/keycloak/tests/i18n/LoginPageTest.java +++ b/tests/base/src/test/java/org/keycloak/tests/i18n/LoginPageTest.java @@ -185,9 +185,9 @@ public void acceptLanguageHeader() throws IOException { public void testIdentityProviderCapitalization(){ oauth.openLoginForm(); // contains even name of sub-item - svg element in this case - assertThat(loginPage.findSocialButton("github").getText(), is("GitHub")); - assertThat(loginPage.findSocialButton("mysaml").getText(), is("mysaml")); - assertThat(loginPage.findSocialButton("myoidc").getText(), is("MyOIDC")); + assertThat(loginPage.findSocialButton("github").getText(), is("Sign in with GitHub")); + assertThat(loginPage.findSocialButton("mysaml").getText(), is("Sign in with mysaml")); + assertThat(loginPage.findSocialButton("myoidc").getText(), is("Sign in with MyOIDC")); } diff --git a/themes/src/main/resources/theme/base/login/messages/messages_en.properties b/themes/src/main/resources/theme/base/login/messages/messages_en.properties index c90449d4c807..d5aa0ac319e5 100644 --- a/themes/src/main/resources/theme/base/login/messages/messages_en.properties +++ b/themes/src/main/resources/theme/base/login/messages/messages_en.properties @@ -529,6 +529,9 @@ naturalPersonScopeConsentText=Natural person verifiable credential # Identity provider identity-provider-redirector=Connect with another Identity Provider identity-provider-login-label=Or sign in with +identity-provider-login-label-divider=or sign in with +identity-provider-login-label-short=or +signInWithProvider=Sign in with {0} idp-email-verification-display-name=Email Verification idp-email-verification-help-text=Link your account by validating your email. idp-username-password-form-display-name=Username and password diff --git a/themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css b/themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css index 277561b1c6ff..febbded9469b 100644 --- a/themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css +++ b/themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css @@ -119,18 +119,44 @@ hr { margin-bottom: var(--pf-v5-global--spacer--md); } -#kc-social-providers svg:not(.google) { - filter: invert(47%) sepia(88%) saturate(7486%) hue-rotate(199deg) brightness(91%) contrast(101%); -} +/* Social/identity providers */ -#kc-social-providers svg { +#kc-social-providers img, +#kc-social-providers picture { height: var(--pf-v5-global--FontSize--xl); + width: var(--pf-v5-global--FontSize--xl); + object-fit: contain; } -@media (prefers-color-scheme: dark) { - #kc-social-providers svg:not(.google) { - filter: invert(54%) sepia(96%) saturate(2028%) hue-rotate(174deg) brightness(99%) contrast(97%); - } +/* Remove bottom padding when no info section follows (e.g. registration disabled) */ +#kc-social-providers:last-child .pf-v5-c-login__main-body { + padding-bottom: 0 !important; +} + +/* Use a gray border instead of the tertiary default (near-black in light theme) */ +#kc-social-providers .pf-v5-c-button.pf-m-tertiary { + --pf-v5-c-button--m-tertiary--after--BorderColor: var(--pf-v5-global--BorderColor--100); + --pf-v5-c-button--m-tertiary--hover--after--BorderColor: var(--pf-v5-global--BorderColor--200); +} + +#kc-social-providers ul > li:last-child { + padding-bottom: 0 !important; +} + +/* Named divider */ + +.kc-social-providers-divider { + display: flex; + align-items: center; + gap: var(--pf-v5-global--spacer--md); + margin: var(--pf-v5-global--spacer--md) 0 var(--pf-v5-global--spacer--md); +} + +.kc-social-providers-divider::before, +.kc-social-providers-divider::after { + content: ''; + flex: 1; + border-bottom: 1px solid var(--pf-v5-global--BorderColor--100); } @media (min-width: 768px) { diff --git a/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/bitbucket.svg b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/bitbucket.svg new file mode 100644 index 000000000000..e6495812cfc1 --- /dev/null +++ b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/bitbucket.svg @@ -0,0 +1,3 @@ + + + diff --git a/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/default-light.svg b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/default-light.svg new file mode 100644 index 000000000000..123e5a828523 --- /dev/null +++ b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/default-light.svg @@ -0,0 +1,3 @@ + + + diff --git a/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/default.svg b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/default.svg new file mode 100644 index 000000000000..c9d84b587291 --- /dev/null +++ b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/default.svg @@ -0,0 +1,3 @@ + + + diff --git a/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/facebook.svg b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/facebook.svg new file mode 100644 index 000000000000..6b4ef917bd70 --- /dev/null +++ b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/github-light.svg b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/github-light.svg new file mode 100644 index 000000000000..f3c174fadbd3 --- /dev/null +++ b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/github-light.svg @@ -0,0 +1,3 @@ + + + diff --git a/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/github.svg b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/github.svg new file mode 100644 index 000000000000..df4cd8cfb41d --- /dev/null +++ b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/gitlab.svg b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/gitlab.svg new file mode 100644 index 000000000000..34d55f3d0459 --- /dev/null +++ b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/gitlab.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/google.svg b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/google.svg new file mode 100644 index 000000000000..8ab1351b939a --- /dev/null +++ b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/google.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/instagram-light.svg b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/instagram-light.svg new file mode 100644 index 000000000000..08ded19f0ff9 --- /dev/null +++ b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/instagram-light.svg @@ -0,0 +1,3 @@ + + + diff --git a/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/instagram.svg b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/instagram.svg new file mode 100644 index 000000000000..d35f6a653bcd --- /dev/null +++ b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/linkedin-openid-connect.svg b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/linkedin-openid-connect.svg new file mode 100644 index 000000000000..4f4f035343e6 --- /dev/null +++ b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/linkedin-openid-connect.svg @@ -0,0 +1,3 @@ + + + diff --git a/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/microsoft.svg b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/microsoft.svg new file mode 100644 index 000000000000..673784d5fb43 --- /dev/null +++ b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/microsoft.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/openshift-v4.svg b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/openshift-v4.svg new file mode 100644 index 000000000000..ab115de082cc --- /dev/null +++ b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/openshift-v4.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/paypal.svg b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/paypal.svg new file mode 100644 index 000000000000..a4b5272a66c4 --- /dev/null +++ b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/paypal.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/stackoverflow.svg b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/stackoverflow.svg new file mode 100644 index 000000000000..7b85f0fd814f --- /dev/null +++ b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/stackoverflow.svg @@ -0,0 +1,3 @@ + + + diff --git a/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/twitter-light.svg b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/twitter-light.svg new file mode 100644 index 000000000000..a048635ad9a7 --- /dev/null +++ b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/twitter-light.svg @@ -0,0 +1,3 @@ + + + diff --git a/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/twitter.svg b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/twitter.svg new file mode 100644 index 000000000000..9cf5e1cf1b8f --- /dev/null +++ b/themes/src/main/resources/theme/keycloak.v2/login/resources/img/social/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/themes/src/main/resources/theme/keycloak.v2/login/social-providers.ftl b/themes/src/main/resources/theme/keycloak.v2/login/social-providers.ftl index f526f3bec0ec..f7a34c7a82da 100644 --- a/themes/src/main/resources/theme/keycloak.v2/login/social-providers.ftl +++ b/themes/src/main/resources/theme/keycloak.v2/login/social-providers.ftl @@ -1,91 +1,65 @@ <#macro show social> -
- - ${msg("identity-provider-login-label")} + <#assign useGrid = (social.providers?size gt 3)> +
+ + <#if useGrid> + ${msg("identity-provider-login-label-divider")} + <#else> + ${msg("identity-provider-login-label-short")} +
-