libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases Packages Activity Actions

KEYCLOAK-14137 Upgrade Authentication selector screen

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

Signed-off-by: Peter Zaoral <pzaoral@redhat.com>
This commit is contained in:
Peter Zaoral 2020-10-11 17:02:54 +02:00 committed by Marek Posolda
parent 833bf98643
commit ad940a861a
4 changed files with 93 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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) {

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

@ -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,21 +15,22 @@
<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.kcSelectAuthListItemInfoClass!}" onclick="fillAndSubmit('${authenticationSelection.authExecId}')">
<div class="${properties.kcSelectAuthListItemLeftClass!}">
<span class="${properties['${authenticationSelection.iconCssClass}']!authenticationSelection.iconCssClass}"></span>
<div class="${properties.kcSelectAuthListItemClass!}" onclick="fillAndSubmit('${authenticationSelection.authExecId}')">
<div class="${properties.kcSelectAuthListItemIconClass!}">
<i class="${properties['${authenticationSelection.iconCssClass}']!authenticationSelection.iconCssClass} fa-2x"></i>
</div>
<div class="${properties.kcSelectAuthListItemBodyClass!}">
<div class="${properties.kcSelectAuthListItemDescriptionClass!}">
<div class="${properties.kcSelectAuthListItemHeadingClass!}">
${msg('${authenticationSelection.displayName}')}
</div>
<div class="${properties.kcSelectAuthListItemHelpTextClass!}">
<div class="${properties.kcSelectAuthListItemDescriptionClass!}">
${msg('${authenticationSelection.helpText}')}
</div>
</div>
</div>
<div class="${properties.kcSelectAuthListItemFillClass!}"></div>
<div class="${properties.kcSelectAuthListItemArrowClass!}">
<i class="${properties.kcSelectAuthListItemArrowIconClass!}"></i>
</div>
</div>
</#list>

65
themes/src/main/resources/theme/keycloak/login/resources/css/login.css
View file

@ -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);

17
themes/src/main/resources/theme/keycloak/login/theme.properties
View file

@ -80,14 +80,15 @@ kcInputLargeClass=input-lg
kcSrOnlyClass=sr-only
##### css classes for select-authenticator form
kcSelectAuthListClass=list-group list-view-pf
kcSelectAuthListItemClass=list-group-item list-view-pf-stacked
kcSelectAuthListItemInfoClass=list-view-pf-main-info
kcSelectAuthListItemLeftClass=list-view-pf-left
kcSelectAuthListItemBodyClass=list-view-pf-body
kcSelectAuthListItemDescriptionClass=list-view-pf-description
kcSelectAuthListItemHeadingClass=list-group-item-heading
kcSelectAuthListItemHelpTextClass=list-group-item-text
kcSelectAuthListClass=pf-l-stack select-auth-container
kcSelectAuthListItemClass=pf-l-stack__item select-auth-box-parent pf-l-split
kcSelectAuthListItemIconClass=pf-l-split__item select-auth-box-icon
kcSelectAuthListItemBodyClass=pf-l-split__item pf-l-stack
kcSelectAuthListItemHeadingClass=pf-l-stack__item select-auth-box-headline pf-c-title
kcSelectAuthListItemDescriptionClass=pf-l-stack__item select-auth-box-desc
kcSelectAuthListItemFillClass=pf-l-split__item pf-m-fill
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