KEYCLOAK-14137 Upgrade Authentication selector screen

* edited related css and ftl theme resources
* added IE11 compatibility support
* fixed affected tests

Signed-off-by: Peter Zaoral <pzaoral@redhat.com>

testsuite/integration-arquillian/tests/base/src/main/java/org/keycloak/testsuite/pages/SelectAuthenticatorPage.java

@@ -13,6 +13,7 @@ import org.openqa.selenium.support.FindBy;
  * Login page with the list of authentication mechanisms, which are available to the user (Password, OTP, WebAuthn...)
  *
  * @author <a href="mailto:mposolda@redhat.com">Marek Posolda</a>
+ * @author <a href="mailto:pzaoral@redhat.com">Peter Zaoral</a>
  */
 public class SelectAuthenticatorPage extends LanguageComboboxAwarePage {
 
@@ -22,11 +23,6 @@ public class SelectAuthenticatorPage extends LanguageComboboxAwarePage {
     // Corresponds to the OTPFormAuthenticator
     public static final String AUTHENTICATOR_APPLICATION = "Authenticator Application";
 
-
-    @FindBy(id = "authenticators-choice")
-    private WebElement authenticatorsSelect;
-
-
     /**
      * Return list of names like for example [ "Password", "Authenticator Application", "Security Key" ]
      */
@@ -57,16 +53,16 @@ public class SelectAuthenticatorPage extends LanguageComboboxAwarePage {
      * @return
      */
     public String getLoginMethodHelpText(String loginMethodName) {
-        return getLoginMethodRowByName(loginMethodName).findElement(By.className("list-group-item-text")).getText();
+        return getLoginMethodRowByName(loginMethodName).findElement(By.className("select-auth-box-desc")).getText();
     }
 
 
     private List<WebElement> getLoginMethodsRows() {
-        return driver.findElements(By.className("list-view-pf-main-info"));
+        return driver.findElements(By.className("select-auth-box-parent"));
     }
 
     private String getLoginMethodNameFromRow(WebElement loginMethodRow) {
-        return loginMethodRow.findElement(By.className("list-group-item-heading")).getText();
+        return loginMethodRow.findElement(By.className("select-auth-box-headline")).getText();
     }
 
     private WebElement getLoginMethodRowByName(String loginMethodName) {

themes/src/main/resources/theme/base/login/select-authenticator.ftl

@@ -1,5 +1,5 @@
 <#import "template.ftl" as layout>
-<@layout.registrationLayout displayInfo=true; section>
+<@layout.registrationLayout displayInfo=false; section>
     <#if section = "header" || section = "show-username">
         <script type="text/javascript">
             function fillAndSubmit(authExecId) {
@@ -15,22 +15,23 @@
         <form id="kc-select-credential-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
             <div class="${properties.kcSelectAuthListClass!}">
                 <#list auth.authenticationSelections as authenticationSelection>
-                    <div class="${properties.kcSelectAuthListItemClass!}">
+                    <div class="${properties.kcSelectAuthListItemClass!}" onclick="fillAndSubmit('${authenticationSelection.authExecId}')">
-                        <div class="${properties.kcSelectAuthListItemInfoClass!}" onclick="fillAndSubmit('${authenticationSelection.authExecId}')">
+
-                            <div class="${properties.kcSelectAuthListItemLeftClass!}">
+                        <div class="${properties.kcSelectAuthListItemIconClass!}">
-                                <span class="${properties['${authenticationSelection.iconCssClass}']!authenticationSelection.iconCssClass}"></span>
+                            <i class="${properties['${authenticationSelection.iconCssClass}']!authenticationSelection.iconCssClass} fa-2x"></i>
+                        </div>
+                        <div class="${properties.kcSelectAuthListItemBodyClass!}">
+                            <div class="${properties.kcSelectAuthListItemHeadingClass!}">
+                                ${msg('${authenticationSelection.displayName}')}
                             </div>
-                            <div class="${properties.kcSelectAuthListItemBodyClass!}">
+                            <div class="${properties.kcSelectAuthListItemDescriptionClass!}">
-                                <div class="${properties.kcSelectAuthListItemDescriptionClass!}">
+                                ${msg('${authenticationSelection.helpText}')}
-                                    <div class="${properties.kcSelectAuthListItemHeadingClass!}">
-                                        ${msg('${authenticationSelection.displayName}')}
-                                    </div>
-                                    <div class="${properties.kcSelectAuthListItemHelpTextClass!}">
-                                        ${msg('${authenticationSelection.helpText}')}
-                                    </div>
-                                </div>
                             </div>
                         </div>
+                        <div class="${properties.kcSelectAuthListItemFillClass!}"></div>
+                        <div class="${properties.kcSelectAuthListItemArrowClass!}">
+                            <i class="${properties.kcSelectAuthListItemArrowIconClass!}"></i>
+                        </div>
                     </div>
                 </#list>
                 <input type="hidden" id="authexec-hidden-input" name="authenticationExecution" />

themes/src/main/resources/theme/keycloak/login/resources/css/login.css

@@ -574,6 +574,71 @@ ul#kc-totp-supported-apps {
     width: 40%;
 }
 
+/* Internet Explorer 11 compatibility workaround for select-authenticator screen */
+@media all and (-ms-high-contrast: none),
+(-ms-high-contrast: active) {
+    .select-auth-box-parent {
+        border-top: 1px solid #f0f0f0;
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+        cursor: pointer;
+    }
+
+    .select-auth-box-headline {
+        font-size: 16px;
+        color: #06c;
+        font-weight: bold;
+    }
+
+    .select-auth-box-desc {
+        font-size: 14px;
+    }
+
+    .pf-l-stack {
+        flex-basis: 100%;
+    }
+}
+/* End of IE11 workaround for select-authenticator screen */
+
+.select-auth-box-arrow{
+    display: flex;
+    align-items: center;
+    margin-right: 2rem;
+}
+
+.select-auth-box-icon{
+    display: flex;
+    flex: 0 0 2em;
+    justify-content: center;
+    margin-right: 1rem;
+    margin-left: 3rem;
+}
+
+.select-auth-box-parent{
+    border-top: 1px solid var(--pf-global--palette--black-200);
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    cursor: pointer;
+}
+
+.select-auth-box-parent:hover{
+    background-color: #f7f8f8;
+}
+
+.select-auth-container {
+    padding-bottom: 0px !important;
+}
+
+.select-auth-box-headline {
+    font-size: var(--pf-global--FontSize--md);
+    color: var(--pf-global--primary-color--100);
+    font-weight: bold;
+}
+
+.select-auth-box-desc {
+    font-size: var(--pf-global--FontSize--sm);
+}
+
 .card-pf {
     margin: 0 auto;
     box-shadow: var(--pf-global--BoxShadow--lg);

themes/src/main/resources/theme/keycloak/login/theme.properties

@@ -80,14 +80,15 @@ kcInputLargeClass=input-lg
 kcSrOnlyClass=sr-only
 
 ##### css classes for select-authenticator form
-kcSelectAuthListClass=list-group list-view-pf
+kcSelectAuthListClass=pf-l-stack select-auth-container
-kcSelectAuthListItemClass=list-group-item list-view-pf-stacked
+kcSelectAuthListItemClass=pf-l-stack__item select-auth-box-parent pf-l-split
-kcSelectAuthListItemInfoClass=list-view-pf-main-info
+kcSelectAuthListItemIconClass=pf-l-split__item select-auth-box-icon
-kcSelectAuthListItemLeftClass=list-view-pf-left
+kcSelectAuthListItemBodyClass=pf-l-split__item pf-l-stack
-kcSelectAuthListItemBodyClass=list-view-pf-body
+kcSelectAuthListItemHeadingClass=pf-l-stack__item select-auth-box-headline pf-c-title
-kcSelectAuthListItemDescriptionClass=list-view-pf-description
+kcSelectAuthListItemDescriptionClass=pf-l-stack__item select-auth-box-desc
-kcSelectAuthListItemHeadingClass=list-group-item-heading
+kcSelectAuthListItemFillClass=pf-l-split__item pf-m-fill
-kcSelectAuthListItemHelpTextClass=list-group-item-text
+kcSelectAuthListItemArrowClass=pf-l-split__item select-auth-box-arrow
+kcSelectAuthListItemArrowIconClass=fa fa-angle-right fa-lg
 
 ##### css classes for the authenticators
 kcAuthenticatorDefaultClass=fa list-view-pf-icon-lg