#727 providers login icons

applications/accounts/disable-theme-cache.cli

@@ -0,0 +1,5 @@
+embed-server --std-out=echo --server-config=standalone-ha.xml
+/subsystem=keycloak-server/theme=defaults/:write-attribute(name=cacheThemes,value=false)
+/subsystem=keycloak-server/theme=defaults/:write-attribute(name=cacheTemplates,value=false)
+/subsystem=keycloak-server/theme=defaults/:write-attribute(name=staticMaxAge,value=-1)
+stop-embedded-server

applications/accounts/docker-compose.yaml

@@ -27,11 +27,11 @@ services:
       - type: bind
         source: ./themes/custom
         target: /opt/jboss/keycloak/themes/custom
-      # disable cache
       - type: bind
-        source: ./standalone.xml
-        target: /opt/jboss/keycloak/standalone/configuration/standalone.xml
-
+        source: ./plugins
+        target: /opt/jboss/keycloak/standalone/deployments
+      # disable cache
+      - ./disable-theme-cache.cli:/opt/jboss/startup-scripts/disable-theme-cache.cli
       # - type: bind
       #   source: ./keycloak
       #   target: /opt/jboss/keycloak/themes/keycloak

applications/accounts/plugins/.gitignore

@@ -0,0 +1 @@
+*.deployed

applications/accounts/themes/custom/login/login.ftl

@@ -12,16 +12,25 @@
      <div id="kc-form" <#if realm.password && social.providers??>class="${properties.kcContentWrapperClass!}"</#if>>
 
         <#if realm.password && social.providers??>
+
             <div id="kc-social-providers" class="${properties.kcFormSocialAccountContentClass!} ${properties.kcFormSocialAccountClass!}">
-                <ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 4>${properties.kcFormSocialAccountDoubleListClass!}</#if>">
+
+
+                <ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
                     <#list social.providers as p>
-                        <li class="${properties.kcFormSocialAccountListLinkClass!}"><a href="${p.loginUrl}" id="zocial-${p.alias}" class="zocial ${p.providerId}"> <span>Sign in with ${p.displayName}</span></a></li>
+                        <li class="${properties.kcFormSocialAccountListLinkClass!}">
+                            <a id="social-${p.alias}"  type="button" href="${p.loginUrl}">
+                                    <i class="${properties.kcCommonLogoIdP!} ${p.iconClasses!}" aria-hidden="true"></i>
+                                    <span class="${properties.kcFormSocialAccountNameClass!} kc-social-icon-text">Sign in with ${p.displayName!}</span>
+                            </a>
+                        </li>
                     </#list>
                 </ul>
             </div>
+            <div id="kc-form-separator" class="separator">or</div>
         </#if>
 
-         <div id="kc-form-separator" class="separator">or</div>
+
 
         <div id="kc-form-wrapper" <#if realm.password && social.providers??>class="${properties.kcFormSocialAccountContentClass!} ${properties.kcFormSocialAccountClass!}"</#if>>
                 <#if realm.password>

applications/accounts/themes/custom/login/resources/css/login.css

@@ -741,7 +741,7 @@ a.zocial {
 
 
 .login-pf-page .login-pf-social-link a:hover {
-  background: rgba(0, 188, 212, .1) !important;
+  background: rgba(255, 255, 255, 0.35);
 }
 
 .login-pf-page.login-pf-page-accounts {
@@ -822,3 +822,15 @@ form#kc-select-back-form div.login-pf-social-section {
 .login-pf-page .separator:not(:empty)::after {
   margin-left: .25em;
 }
+
+.orcid-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+  background-image: url(../img/orcid.svg);
+}
+
+.fa {
+  font-size: 20px;
+  margin-right: 5px;
+}

applications/accounts/themes/custom/login/theme.properties

@@ -3,7 +3,8 @@ import=common/keycloak
 locales=ca,cs,de,en,es,fr,it,ja,lt,nl,no,pl,pt-BR,ru,sk,sv,tr,zh-CN
 
 styles=css/login.css
-stylesCommon=node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css lib/zocial/zocial.css
+stylesCommon=web_modules/@patternfly/react-core/dist/styles/base.css web_modules/@patternfly/react-core/dist/styles/app.css node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css lib/pficon/pficon.css
+
 
 meta=viewport==width=device-width,initial-scale=1
 
@@ -94,4 +95,21 @@ kcAuthenticatorWebAuthnPasswordlessClass=fa fa-key list-view-pf-icon-lg
 kcSelectOTPListClass=card-pf card-pf-view card-pf-view-select card-pf-view-single-select
 kcSelectOTPListItemClass=card-pf-body card-pf-top-element
 kcAuthenticatorOtpCircleClass=fa fa-mobile card-pf-icon-circle
-kcSelectOTPItemHeadingClass=card-pf-title text-center
+kcSelectOTPItemHeadingClass=card-pf-title text-center
+
+
+kcLogoIdP-facebook=fa fa-facebook
+kcLogoIdP-google=fa fa-google
+kcLogoIdP-github=fa fa-github
+kcLogoIdP-linkedin=fa fa-linkedin
+kcLogoIdP-instagram=fa fa-instagram
+## windows instead of microsoft - not included in PF4
+kcLogoIdP-microsoft=fa fa-windows
+kcLogoIdP-bitbucket=fa fa-bitbucket
+kcLogoIdP-gitlab=fa fa-gitlab
+kcLogoIdP-paypal=fa fa-paypal
+kcLogoIdP-stackoverflow=fa fa-stack-overflow
+kcLogoIdP-twitter=fa fa-twitter
+kcLogoIdP-openshift-v4=pf-icon pf-icon-openshift
+kcLogoIdP-openshift-v3=pf-icon pf-icon-openshift
+kcLogoIdP-orcid=orcid-icon