Promoted IdPs change in WAYF

rciam · Jun 17, 2024 · 98ef2f2 · 98ef2f2
1 parent acf1353
commit 98ef2f2
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 31 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 For Keycloak upstream changelog please see https://www.keycloak.org/docs/latest/release_notes/index.html.
   Full Keycloak upstream jira issue can be shown if filtered by Fix version. For example [Keycloak jira issue for 15.0.2 version](https://issues.redhat.com/browse/KEYCLOAK-19161?jql=project%20%3D%20keycloak%20and%20fixVersion%20%3D%2015.0.2)
 
+## [5.2.0] - 2024-06-17
+### Changed
+- Promoted IdPs change in WAYF
+
 ## [5.1.1] - 2024-06-13
 ### Changed
 - Simplify WAYF IdPs search (addition)

diff --git a/pom.xml b/pom.xml
@@ -6,7 +6,7 @@
 
     <groupId>org.rciam.keycloak</groupId>
     <artifactId>keycloak-theme-vanilla</artifactId>
-    <version>5.1.1</version>
+    <version>5.2.0</version>
     <packaging>jar</packaging>
 
     <properties>

diff --git a/src/main/resources/theme/rciam/login/login-username.ftl b/src/main/resources/theme/rciam/login/login-username.ftl
@@ -132,6 +132,24 @@
                 padding-left: 30px; /* Adjust based on icon size */
                 box-sizing: border-box;
         }
+
+        .hr-sect {
+               display: flex;
+               flex-basis: 100%;
+               align-items: center;
+               color: rgba(0, 0, 0, 0.35);
+               margin: 8px 0px;
+        }
+        .hr-sect:before,
+        .hr-sect:after {
+               content: "";
+               flex-grow: 1;
+               background: rgba(0, 0, 0, 0.35);
+               height: 1px;
+               font-size: 0px;
+               line-height: 0px;
+               margin: 0px 8px;
+        }
     </style>
 
 <@layout.registrationLayout displayMessage=!messagesPerField.existsError('username') displayInfo=(realm.password && realm.registrationAllowed && !registrationDisabled??); section>
@@ -197,21 +215,6 @@
 
         <div ng-app="angularLoginPart" ng-controller="idpListing">
 
-            <div ng-if="promotedIdps!=null && promotedIdps.length>0" id="kc-social-providers" class="${properties.kcFormSocialAccountSectionClass!}">
-                <hr/>
-                <h4>${msg("general-identity-providers")}</h4>
-                <ul class="${properties.kcFormSocialAccountListClass!} ">
-                    <a ng-repeat="idp in promotedIdps" id="social-{{idp.alias}}" class="${properties.kcFormSocialAccountListButtonClass!}" ng-class="{ '${properties.kcFormSocialAccountGridItem!}' : promotedIdps.length > 3 }" type="button" href="{{idp.loginUrl}}">
-                        <div ng-if="idp.iconClasses!=null">
-                            <i class="${properties.kcCommonLogoIdP!}" ng-class="{ '{{idp.iconClasses}}' : idp.iconClasses!=null}" aria-hidden="true"></i>
-                            <span class="${properties.kcFormSocialAccountNameClass!}">{{idp.displayName}}</span>
-                        </div>
-                        <div ng-if="idp.iconClasses==null">
-                            <span class="${properties.kcFormSocialAccountNameClass!}">{{idp.displayName}}</span>
-                        </div>
-                    </a>
-                </ul>
-            </div>
             <div ng-if="(idps!=null && idps.length>0) || fetchParams.keyword!=null" id="kc-social-providers" class="${properties.kcFormSocialAccountSectionClass!}">
                 <hr/>
                 <h4>${msg("identity-provider-login-label")}</h4>
@@ -233,6 +236,23 @@
                       </a>
                    </ul>
                 </div>
+
+                <div ng-if="promotedIdps!=null && promotedIdps.length>0 && && (idps.length >= maxIdPsWithoutSearch || fetchParams.keyword!=null)" id="kc-social-providers" class="${properties.kcFormSocialAccountSectionClass!}">
+                    <div class="hr-sect">
+                        <h4>${msg("general-identity-providers")}</h4>
+                    </div>
+                    <ul class="${properties.kcFormSocialAccountListClass!} ">
+                        <a ng-repeat="idp in promotedIdps" id="social-{{idp.alias}}" class="${properties.kcFormSocialAccountListButtonClass!}" ng-class="{ '${properties.kcFormSocialAccountGridItem!}' : promotedIdps.length > 3 }" type="button" href="{{idp.loginUrl}}">
+                            <div ng-if="idp.iconClasses!=null">
+                                <i class="${properties.kcCommonLogoIdP!}" ng-class="{ '{{idp.iconClasses}}' : idp.iconClasses!=null}" aria-hidden="true"></i>
+                                <span class="${properties.kcFormSocialAccountNameClass!}">{{idp.displayName}}</span>
+                            </div>
+                            <div ng-if="idp.iconClasses==null">
+                                <span class="${properties.kcFormSocialAccountNameClass!}">{{idp.displayName}}</span>
+                            </div>
+                        </a>
+                    </ul>
+                </div>
             </div>
         </div>
 

diff --git a/src/main/resources/theme/rciam/login/login.ftl b/src/main/resources/theme/rciam/login/login.ftl
@@ -98,6 +98,7 @@
             getPromotedIdps();
 
 
+
             $scope.scrollCallback = function ($event, $direct) {
                 if($scope.reachedEndPage==true || $event.target.lastElementChild==null)
                     return;
@@ -149,6 +150,24 @@
                 padding-left: 30px; /* Adjust based on icon size */
                 box-sizing: border-box;
             }
+
+            .hr-sect {
+                display: flex;
+                flex-basis: 100%;
+                align-items: center;
+                color: rgba(0, 0, 0, 0.35);
+                margin: 8px 0px;
+            }
+            .hr-sect:before,
+            .hr-sect:after {
+                content: "";
+                flex-grow: 1;
+                background: rgba(0, 0, 0, 0.35);
+                height: 1px;
+                font-size: 0px;
+                line-height: 0px;
+                margin: 0px 8px;
+            }
       </style>
 
 <@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; section>
@@ -224,21 +243,6 @@
             <img id='spinner' src='${url.resourcesPath}/img/spinner.svg' ng-class="{'hidden' : !isSearching }" style="position: relative; transform: translate(-50%, -50%); width:100px; height:100px;" />
         </div>
 
-        <div ng-if="promotedIdps!=null && promotedIdps.length>0" id="kc-social-providers" class="${properties.kcFormSocialAccountSectionClass!}">
-            <hr/>
-            <h4>${msg("general-identity-providers")}</h4>
-            <ul class="${properties.kcFormSocialAccountListClass!} ">
-                <a ng-repeat="idp in promotedIdps" id="social-{{idp.alias}}" class="${properties.kcFormSocialAccountListButtonClass!}" ng-class="{ '${properties.kcFormSocialAccountGridItem!}' : promotedIdps.length > 3 }" type="button" href="{{idp.loginUrl}}">
-                    <div ng-if="idp.iconClasses!=null">
-                        <i class="${properties.kcCommonLogoIdP!}" ng-class="{ '{{idp.iconClasses}}' : idp.iconClasses!=null}" aria-hidden="true"></i>
-                        <span class="${properties.kcFormSocialAccountNameClass!}">{{idp.displayName}}</span>
-                    </div>
-                    <div ng-if="idp.iconClasses==null">
-                        <span class="${properties.kcFormSocialAccountNameClass!}">{{idp.displayName}}</span>
-                    </div>
-                </a>
-            </ul>
-        </div>
         <div ng-if="(idps!=null && idps.length>0) || fetchParams.keyword!=null" id="kc-social-providers" class="${properties.kcFormSocialAccountSectionClass!}">
 <#--
             <hr/>
@@ -261,6 +265,23 @@
                   </a>
                </ul>
             </div>
+
+            <div ng-if="promotedIdps!=null && promotedIdps.length>0 && (idps.length >= maxIdPsWithoutSearch || fetchParams.keyword!=null)" id="kc-social-providers" class="${properties.kcFormSocialAccountSectionClass!}">
+                <div class="hr-sect">
+                    <h4>${msg("general-identity-providers")}</h4>
+                </div>
+                <ul class="${properties.kcFormSocialAccountListClass!} ">
+                    <a ng-repeat="idp in promotedIdps" id="social-{{idp.alias}}" class="${properties.kcFormSocialAccountListButtonClass!}" ng-class="{ '${properties.kcFormSocialAccountGridItem!}' : promotedIdps.length > 3 }" type="button" href="{{idp.loginUrl}}">
+                        <div ng-if="idp.iconClasses!=null">
+                            <i class="${properties.kcCommonLogoIdP!}" ng-class="{ '{{idp.iconClasses}}' : idp.iconClasses!=null}" aria-hidden="true"></i>
+                            <span class="${properties.kcFormSocialAccountNameClass!}">{{idp.displayName}}</span>
+                        </div>
+                        <div ng-if="idp.iconClasses==null">
+                             <span class="${properties.kcFormSocialAccountNameClass!}">{{idp.displayName}}</span>
+                        </div>
+                    </a>
+                </ul>
+            </div>
         </div>
       </div>
 

diff --git a/src/main/resources/theme/rciam/login/messages/messages_en.properties b/src/main/resources/theme/rciam/login/messages/messages_en.properties
@@ -11,3 +11,4 @@ acceptTermsTxt=I agree to the
 loginProfileTitle=Welcome! Sign up
 loginProfileDescription=Please take a minute to sign up. To make the sign-up process quicker and easier, some information has been pre-filled based on your authentication provider. Please review, complete any missing details, and confirm your information.
 doSignUp=Sign Up
+general-identity-providers=or