External-Mirrors/keycloak
2
0
Fork 0
mirror of https://github.com/keycloak/keycloak.git synced 2026-01-10 15:32:05 -03:30
Code Issues Packages Projects Releases Wiki Activity

Login[v2]: Improve login screens (#38229)

Browse Source 
* Login[v2]: Improve login screens

Closes #38120

Closes #38121

Signed-off-by: Martin Bartoš <mabartos@redhat.com>

* Remove kc-card CSS property

Signed-off-by: Martin Bartoš <mabartos@redhat.com>

---------

Signed-off-by: Martin Bartoš <mabartos@redhat.com>
This commit is contained in:
Martin Bartoš 2025-03-25 07:22:17 +01:00 committed by GitHub
parent c0da146873
commit dbecdd8ae2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 91 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
themes/src/main/resources/theme/keycloak.v2/login/field.ftl
View File

@ -2,8 +2,8 @@
<div class="${properties.kcFormGroupClass}">
<div class="${properties.kcFormGroupLabelClass}">
<label for="${name}" class="${properties.kcFormGroupLabelClass}">
<span class="${properties.kcFormGroupLabelTextClass}">
<label for="${name}" class="${properties.kcFormLabelClass}">
<span class="${properties.kcFormLabelTextClass}">
${label}
</span>
<#if required>
@ -70,17 +70,20 @@
</button>
</div>
</div>
<#if forgotPassword>
<div class="${properties.kcFormHelperTextClass}" aria-live="polite">
<div class="${properties.kcInputHelperTextClass}">
<div class="${properties.kcFormHelperTextClass}" aria-live="polite">
<div class="${properties.kcInputHelperTextClass}">
<#-- Additional helper items -->
<#nested>
<#if forgotPassword>
<div class="${properties.kcInputHelperTextItemClass}">
<span class="${properties.kcInputHelperTextItemTextClass}">
<a href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a>
</span>
<span class="${properties.kcInputHelperTextItemTextClass}">
<a href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a>
</span>
</div>
</div>
</#if>
</div>
</#if>
</div>
</@group>
</#macro>

3
themes/src/main/resources/theme/keycloak.v2/login/footer.ftl Normal file
View File

@ -0,0 +1,3 @@
<#macro content>
<#-- The footer at the bottom of the "login-box". You can override this file in your custom theme to declare a custom login footer element -->
</#macro>

12
themes/src/main/resources/theme/keycloak.v2/login/login-reset-password.ftl
View File

@ -18,10 +18,12 @@
</form>
<#elseif section = "info" >
<#if realm.duplicateEmailsAllowed>
${msg("emailInstructionUsername")}
<#else>
${msg("emailInstruction")}
</#if>
<span class="${properties.kcLoginMainFooterHelperText!}">
<#if realm.duplicateEmailsAllowed>
${msg("emailInstructionUsername")}
<#else>
${msg("emailInstruction")}
</#if>
</span>
</#if>
</@layout.registrationLayout>

34
themes/src/main/resources/theme/keycloak.v2/login/login.ftl
View File

@ -17,35 +17,37 @@
<#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if>
</#assign>
<@field.input name="username" label=label error=kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc autofocus=true autocomplete="username" value=login.username!'' />
<@field.password name="password" label=msg("password") error="" forgotPassword=realm.resetPasswordAllowed autofocus=usernameHidden?? autocomplete="current-password" />
<@field.password name="password" label=msg("password") error="" forgotPassword=realm.resetPasswordAllowed autofocus=usernameHidden?? autocomplete="current-password">
<#if realm.rememberMe && !usernameHidden??>
<@field.checkbox name="rememberMe" label=msg("rememberMe") value=login.rememberMe?? />
</#if>
</@field.password>
<#else>
<@field.password name="password" label=msg("password") forgotPassword=realm.resetPasswordAllowed autofocus=usernameHidden?? autocomplete="current-password" />
<@field.password name="password" label=msg("password") forgotPassword=realm.resetPasswordAllowed autofocus=usernameHidden?? autocomplete="current-password">
<#if realm.rememberMe && !usernameHidden??>
<@field.checkbox name="rememberMe" label=msg("rememberMe") value=login.rememberMe?? />
</#if>
</@field.password>
</#if>
<div class="${properties.kcFormGroupClass!}">
<#if realm.rememberMe && !usernameHidden??>
<@field.checkbox name="rememberMe" label=msg("rememberMe") value=login.rememberMe?? />
</#if>
</div>
<input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
<@buttons.loginButton />
</form>
</#if>
</div>
</div>
<#elseif section = "info" >
<#if realm.password && realm.registrationAllowed && !registrationDisabled??>
<div id="kc-registration-container" class="${properties.kcLoginFooterBand!}">
<div id="kc-registration" class="${properties.kcLoginFooterBandItem!}">
<span>${msg("noAccount")} <a href="${url.registrationUrl}">${msg("doRegister")}</a></span>
</div>
</div>
</#if>
<#elseif section = "socialProviders" >
<#if realm.password && social.providers?? && social.providers?has_content>
<@identityProviders.show social=social/>
</#if>
<#elseif section = "info" >
<#if realm.password && realm.registrationAllowed && !registrationDisabled??>
<div id="kc-registration-container">
<div id="kc-registration">
<span>${msg("noAccount")} <a href="${url.registrationUrl}">${msg("doRegister")}</a></span>
</div>
</div>
</#if>
</#if>
</@layout.registrationLayout>

21
themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css
View File

@ -3,6 +3,7 @@
--keycloak-bg-logo-url: url("../img/keycloak-bg-darken.svg");
--keycloak-logo-height: 63px;
--keycloak-logo-width: 300px;
--keycloak-card-top-color: var(--pf-v5-global--palette--blue-400);
}
.pf-v5-c-login__container {
@ -11,6 +12,20 @@
"main"
}
.pf-v5-c-login__main-header {
border-top: 4px solid var(--keycloak-card-top-color);
}
/* Info section - top margin + bottom padding */
.pf-v5-c-login__main-footer-band:first-child {
margin-block-start: var(--pf-v5-global--spacer--lg);
}
.pf-v5-c-login__main-footer-band:last-child {
padding-bottom: 0;
}
/* Info section */
.login-pf body {
background: var(--keycloak-bg-logo-url) no-repeat center center fixed;
background-size: cover;
@ -104,11 +119,7 @@ hr {
}
#kc-social-providers svg {
height: var(--pf-v5-global--FontSize--sm);
}
#kc-social-providers li {
padding-bottom: var(--pf-v5-global--spacer--sm);
height: var(--pf-v5-global--FontSize--xl);
}
@media (prefers-color-scheme: dark) {

8
themes/src/main/resources/theme/keycloak.v2/login/social-providers.ftl
View File

@ -1,13 +1,13 @@
<#macro show social>
<div class="pf-v5-c-login__main-footer-band">
<p class="pf-v5-c-login__main-footer-band-item">
<div class="${properties.kcLoginMainFooterBand!}">
<span class="${properties.kcLoginMainFooterBandItem!} ${properties.kcLoginMainFooterHelperText!}">
${msg("identity-provider-login-label")}
</p>
</span>
</div>
<div id="kc-social-providers" class="${properties.kcFormSocialAccountSectionClass!}">
<ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
<#list social.providers as p>
<li class="${properties.kcFormSocialAccountListItemClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if>">
<li class="<#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}<#else>${properties.kcFormSocialAccountListItemClass!}</#if>">
<a id="social-${p.alias}" class="${properties.kcFormSocialAccountListButtonClass!}" aria-label="${p.displayName}"
type="button" href="${p.loginUrl}">
<#if p.iconClasses?has_content>

29
themes/src/main/resources/theme/keycloak.v2/login/template.ftl
View File

@ -215,20 +215,23 @@
</form>
</#if>
<#if displayInfo>
<div id="kc-info" class="${properties.kcSignUpClass!}">
<div id="kc-info-wrapper" class="${properties.kcInfoAreaWrapperClass!}">
<#nested "info">
</div>
</div>
</#if>
</div>
<div class="pf-v5-c-login__main-footer">
<#nested "socialProviders">
</div>
</main>
<div class="${properties.kcLoginMainFooter!}">
<#nested "socialProviders">
<@loginFooter.content/>
<#if displayInfo>
<div id="kc-info" class="${properties.kcLoginMainFooterBand!} ${properties.kcFormClass}">
<div id="kc-info-wrapper" class="${properties.kcLoginMainFooterBandItem!}">
<#nested "info">
</div>
</div>
</#if>
</div>
</div>
<div class="${properties.kcLoginMainFooter!}">
<@loginFooter.content/>
</div>
</main>
</div>
</div>
</body>

23
themes/src/main/resources/theme/keycloak.v2/login/theme.properties
View File

@ -7,11 +7,15 @@ stylesCommon=vendor/patternfly-v5/patternfly.min.css vendor/patternfly-v5/patter
darkMode=true
kcFormGroupClass=pf-v5-c-form__group
kcFormGroupLabelClass=pf-v5-c-form__group-label pf-v5-u-pb-xs
kcFormLabelClass=pf-v5-c-form__label
kcFormLabelTextClass=pf-v5-c-form__label-text
kcLabelClass=pf-v5-c-form__label
kcInputClass=pf-v5-c-form-control
kcInputGroup=pf-v5-c-input-group
kcFormHelperTextClass=pf-v5-c-form__helper-text
kcInputHelperTextClass=pf-v5-c-helper-text
kcInputHelperTextClass=pf-v5-c-helper-text pf-v5-u-display-flex pf-v5-u-justify-content-space-between
kcInputHelperTextItemClass=pf-v5-c-helper-text__item
kcInputHelperTextItemTextClass=pf-v5-c-helper-text__item-text
kcInputGroupItemClass=pf-v5-c-input-group__item
@ -36,10 +40,8 @@ kcAlertTitleClass=pf-v5-c-alert__title
kcAlertDescriptionClass=pf-v5-c-alert__description
kcFormPasswordVisibilityButtonClass=pf-v5-c-button pf-m-control
kcFormControlToggleIcon=pf-v5-c-form-control__toggle-icon
kcFormActionGroupClass=pf-v5-c-form__actions
kcFormActionGroupClass=pf-v5-c-form__actions pf-v5-u-pt-xs
kcFormReadOnlyClass=pf-m-readonly
kcFormGroupLabelClass=pf-v5-c-form__label
kcFormGroupLabelTextClass=pf-v5-c-form__label-text
kcPanelClass=pf-v5-c-panel pf-m-raised
kcPanelMainClass=pf-v5-c-panel__main
@ -52,14 +54,13 @@ kcButtonSecondaryClass=pf-v5-c-button pf-m-secondary
kcButtonBlockClass=pf-m-block
kcButtonLinkClass=pf-v5-c-button pf-m-link
kcCommonLogoIdP=pf-v5-c-login__main-footer-links-item
kcFormSocialAccountListClass=pf-v5-c-login__main-body
kcFormSocialAccountListItemClass=
kcFormSocialAccountListButtonClass=pf-v5-c-button pf-m-secondary pf-m-block
kcFormSocialAccountListClass=pf-v5-c-login__main-body pf-v5-u-pl-0 pf-v5-u-pr-0
kcFormSocialAccountListItemClass=pf-v5-u-pb-sm
kcFormSocialAccountNameClass=pf-v5-u-m-auto
kcFormSocialAccountListButtonClass=pf-v5-c-button pf-m-secondary pf-m-block pf-v5-u-display-flex pf-v5-u-align-items-center pf-v5-u-justify-content-space-between
kcFormSocialAccountListGridClass=pf-v5-l-grid pf-m-gutter pf-m-all-6-col-on-xl pf-m-all-6-col-on-sm
kcFormSocialAccountGridItem=pf-v5-l-grid__item
kcLogoIdP-linkedin-openid-connect=fa fa-linkedin
kcLoginClass=pf-v5-c-login__main
kcFormClass=pf-v5-c-form
kcFormCardClass=card-pf
@ -80,6 +81,10 @@ kcLogin=pf-v5-c-login
kcLoginContainer=pf-v5-c-login__container
kcLoginMain=pf-v5-c-login__main
kcLoginMainHeader=pf-v5-c-login__main-header
kcLoginMainFooter=pf-v5-c-login__main-footer
kcLoginMainFooterBand=pf-v5-c-login__main-footer-band
kcLoginMainFooterBandItem=pf-v5-c-login__main-footer-band-item
kcLoginMainFooterHelperText=pf-v5-u-font-size-sm pf-v5-u-color-200
kcLoginMainTitle=pf-v5-c-title pf-m-3xl
kcLoginMainHeaderUtilities=pf-v5-c-login__main-header-utilities
kcLoginMainBody=pf-v5-c-login__main-body