Fix CSS of social buttons on login screen

forms/common-themes/src/main/resources/theme/login/base/login.ftl

@@ -63,14 +63,6 @@
                      </div>
                 </div>
             </form>
-        <#elseif realm.social>
-            <div id="kc-social-providers">
-                <ul>
-                    <#list social.providers as p>
-                        <li><a href="${p.loginUrl}" class="zocial ${p.id}"> <span class="text">${p.name}</span></a></li>
-                    </#list>
-                </ul>
-            </div>
         </#if>
     <#elseif section = "info" >
         <#if realm.password && realm.registrationAllowed>
@@ -83,7 +75,7 @@
             <div id="kc-social-providers">
                 <ul>
                     <#list social.providers as p>
-                        <li><a href="${p.loginUrl}" class="zocial ${p.id}"> <span class="text">${p.name}</span></a></li>
+                        <li><a href="${p.loginUrl}" id="zocial-${p.id}" class="zocial ${p.providerId}"> <span class="text">${p.name}</span></a></li>
                     </#list>
                 </ul>
             </div>

forms/login-freemarker/src/main/java/org/keycloak/login/freemarker/model/IdentityProviderBean.java

@@ -65,7 +65,7 @@ public class IdentityProviderBean {
 
     private void addIdentityProvider(RealmModel realm, URI baseURI, IdentityProviderModel identityProvider) {
         String loginUrl = Urls.identityProviderAuthnRequest(baseURI, identityProvider.getId(), realm.getName()).toString();
-        providers.add(new IdentityProvider(identityProvider.getId(), identityProvider.getName(), loginUrl));
+        providers.add(new IdentityProvider(identityProvider.getId(), identityProvider.getProviderId(), identityProvider.getName(), loginUrl));
     }
 
     public List<IdentityProvider> getProviders() {
@@ -79,11 +79,13 @@ public class IdentityProviderBean {
     public static class IdentityProvider {
 
         private final String id;
+        private final String providerId; // This refer to providerType (facebook, google, etc.)
         private final String name;
         private final String loginUrl;
 
-        public IdentityProvider(String id, String name, String loginUrl) {
+        public IdentityProvider(String id, String providerId, String name, String loginUrl) {
             this.id = id;
+            this.providerId = providerId;
 
             if (name == null) {
                 name = id;
@@ -105,5 +107,8 @@ public class IdentityProviderBean {
             return loginUrl;
         }
 
+        public String getProviderId() {
+            return providerId;
+        }
     }
 }

testsuite/integration/src/test/java/org/keycloak/testsuite/broker/AbstractIdentityProviderTest.java

@@ -239,7 +239,7 @@ public abstract class AbstractIdentityProviderTest {
         // Provider button is available on login page
         this.driver.navigate().to("http://localhost:8081/test-app/");
         assertTrue(this.driver.getCurrentUrl().startsWith("http://localhost:8081/auth/realms/realm-with-broker/protocol/openid-connect/auth"));
-        this.driver.findElement(By.className(getProviderId()));
+        loginPage.findSocialButton(getProviderId());
 
         // Add identityProvider to client model
         List<ClientIdentityProviderMappingModel> appIdentityProviders = new ArrayList<ClientIdentityProviderMappingModel>();
@@ -251,7 +251,7 @@ public abstract class AbstractIdentityProviderTest {
 
         // Provider button still available on login page
         this.driver.navigate().to("http://localhost:8081/test-app/");
-        this.driver.findElement(By.className(getProviderId()));
+        loginPage.findSocialButton(getProviderId());
     }
 
     @Test
@@ -389,17 +389,7 @@ public abstract class AbstractIdentityProviderTest {
 
         assertNotNull(identityModel.getToken());
 
-        ClientModel clientModel = realm.findClient("test-app");
+        configureRetrieveToken(realm.findClient("test-app"), getProviderId(), false);
-        ClientIdentityProviderMappingModel providerMappingModel = null;
-
-        for (ClientIdentityProviderMappingModel identityProviderMappingModel : clientModel.getIdentityProviders()) {
-            if (identityProviderMappingModel.getIdentityProvider().equals(getProviderId())) {
-                providerMappingModel = identityProviderMappingModel;
-                break;
-            }
-        }
-
-        providerMappingModel.setRetrieveToken(false);
 
         UserSessionStatus userSessionStatus = retrieveSessionStatus();
         String accessToken = userSessionStatus.getAccessTokenString();
@@ -417,7 +407,7 @@ public abstract class AbstractIdentityProviderTest {
 
         assertEquals(Status.BAD_REQUEST.getStatusCode(), response.getStatus());
 
-        providerMappingModel.setRetrieveToken(true);
+        configureRetrieveToken(getRealm().findClient("test-app"), getProviderId(), true);
 
         client = ClientBuilder.newBuilder().register(authFilter).build();
         tokenEndpoint = client.target(tokenEndpointUrl);
@@ -470,14 +460,7 @@ public abstract class AbstractIdentityProviderTest {
         ClientModel clientModel = getRealm().findClient("third-party");
         assertEquals(0, clientModel.getIdentityProviders().size());
 
-        ClientIdentityProviderMappingModel providerMappingModel = new ClientIdentityProviderMappingModel();
+        configureRetrieveToken(clientModel, getProviderId(), true);
-        providerMappingModel.setIdentityProvider(getProviderId());
-        providerMappingModel.setRetrieveToken(true);
-        List<ClientIdentityProviderMappingModel> providerMappingModels = new ArrayList<ClientIdentityProviderMappingModel>();
-        providerMappingModels.add(providerMappingModel);
-        clientModel.updateIdentityProviders(providerMappingModels);
-        brokerServerRule.stopSession(session, true);
-        session = brokerServerRule.startSession();
 
         AccessTokenResponse accessToken = oauth.doAccessTokenRequest(oauth.getCurrentQuery().get(OAuth2Constants.CODE), "password");
         URI tokenEndpointUrl = Urls.identityProviderRetrieveToken(BASE_URI, getProviderId(), getRealm().getName());
@@ -496,6 +479,33 @@ public abstract class AbstractIdentityProviderTest {
         doAssertTokenRetrieval(driver.getPageSource());
     }
 
+    private void configureRetrieveToken(ClientModel clientModel, String providerId, boolean retrieveToken) {
+        List<ClientIdentityProviderMappingModel> providerMappingModels = clientModel.getIdentityProviders();
+        ClientIdentityProviderMappingModel providerMappingModel = null;
+
+        // Check if provider is already linked with this client
+        for (ClientIdentityProviderMappingModel current : providerMappingModels) {
+            if (current.getIdentityProvider().equals(providerId)) {
+                providerMappingModel = current;
+                break;
+            }
+        }
+
+        // Link provider with client if not linked yet
+        if (providerMappingModel == null) {
+            providerMappingModel = new ClientIdentityProviderMappingModel();
+            providerMappingModel.setIdentityProvider(providerId);
+            providerMappingModels.add(providerMappingModel);
+        }
+
+        providerMappingModel.setRetrieveToken(retrieveToken);
+
+        clientModel.updateIdentityProviders(providerMappingModels);
+
+        brokerServerRule.stopSession(session, true);
+        session = brokerServerRule.startSession();
+    }
+
     protected abstract void doAssertTokenRetrieval(String pageSource);
 
     private void assertSuccessfulAuthentication(IdentityProviderModel identityProviderModel, String username) {

testsuite/integration/src/test/java/org/keycloak/testsuite/pages/LoginPage.java

@@ -110,8 +110,14 @@ public class LoginPage extends AbstractPage {
         registerLink.click();
     }
 
-    public void clickSocial(String id) {
+    public void clickSocial(String providerId) {
-        driver.findElement(By.className(id)).click();
+        WebElement socialButton = findSocialButton(providerId);
+        socialButton.click();
+    }
+
+    public WebElement findSocialButton(String providerId) {
+        String id = "zocial-" + providerId;
+        return this.driver.findElement(By.id(id));
     }
 
     public void resetPassword() {