diff --git a/themes/src/main/resources/theme/keycloak.v2/login/field.ftl b/themes/src/main/resources/theme/keycloak.v2/login/field.ftl index 03b892530c3..3e3c9e2e5cb 100644 --- a/themes/src/main/resources/theme/keycloak.v2/login/field.ftl +++ b/themes/src/main/resources/theme/keycloak.v2/login/field.ftl @@ -2,8 +2,8 @@
-
- <#if forgotPassword> -
-
+
+
+ <#-- Additional helper items --> + <#nested> + <#if forgotPassword>
- - ${msg("doForgotPassword")} - + + ${msg("doForgotPassword")} +
-
+
- +
+ diff --git a/themes/src/main/resources/theme/keycloak.v2/login/footer.ftl b/themes/src/main/resources/theme/keycloak.v2/login/footer.ftl new file mode 100644 index 00000000000..0a440a30df1 --- /dev/null +++ b/themes/src/main/resources/theme/keycloak.v2/login/footer.ftl @@ -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 --> + diff --git a/themes/src/main/resources/theme/keycloak.v2/login/login-reset-password.ftl b/themes/src/main/resources/theme/keycloak.v2/login/login-reset-password.ftl index f67d9351718..c23c2b7c55c 100644 --- a/themes/src/main/resources/theme/keycloak.v2/login/login-reset-password.ftl +++ b/themes/src/main/resources/theme/keycloak.v2/login/login-reset-password.ftl @@ -18,10 +18,12 @@ <#elseif section = "info" > - <#if realm.duplicateEmailsAllowed> - ${msg("emailInstructionUsername")} - <#else> - ${msg("emailInstruction")} - + + <#if realm.duplicateEmailsAllowed> + ${msg("emailInstructionUsername")} + <#else> + ${msg("emailInstruction")} + + \ No newline at end of file diff --git a/themes/src/main/resources/theme/keycloak.v2/login/login.ftl b/themes/src/main/resources/theme/keycloak.v2/login/login.ftl index c53bc3c48ee..e00b4813a0b 100755 --- a/themes/src/main/resources/theme/keycloak.v2/login/login.ftl +++ b/themes/src/main/resources/theme/keycloak.v2/login/login.ftl @@ -17,35 +17,37 @@ <#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")} <@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?? /> + + <#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 realm.rememberMe && !usernameHidden??> - <@field.checkbox name="rememberMe" label=msg("rememberMe") value=login.rememberMe?? /> - -
- value="${auth.selectedCredential}"/> <@buttons.loginButton />
- <#elseif section = "info" > - <#if realm.password && realm.registrationAllowed && !registrationDisabled??> -
-
- ${msg("noAccount")} ${msg("doRegister")} -
-
- <#elseif section = "socialProviders" > <#if realm.password && social.providers?? && social.providers?has_content> <@identityProviders.show social=social/> + <#elseif section = "info" > + <#if realm.password && realm.registrationAllowed && !registrationDisabled??> +
+
+ ${msg("noAccount")} ${msg("doRegister")} +
+
+ diff --git a/themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css b/themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css index 4a3e28c4a26..dbdcf7f8fa0 100644 --- a/themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css +++ b/themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css @@ -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) { diff --git a/themes/src/main/resources/theme/keycloak.v2/login/social-providers.ftl b/themes/src/main/resources/theme/keycloak.v2/login/social-providers.ftl index 13fe0013be4..52db329c9f9 100644 --- a/themes/src/main/resources/theme/keycloak.v2/login/social-providers.ftl +++ b/themes/src/main/resources/theme/keycloak.v2/login/social-providers.ftl @@ -1,13 +1,13 @@ <#macro show social> -
-

+

+ ${msg("identity-provider-login-label")} -

+
- - +
+ <#nested "socialProviders"> - <@loginFooter.content/> + <#if displayInfo> +
+
+ <#nested "info"> +
+
+ +
+
+ +
+ <@loginFooter.content/> +
+ diff --git a/themes/src/main/resources/theme/keycloak.v2/login/theme.properties b/themes/src/main/resources/theme/keycloak.v2/login/theme.properties index 49ead1ddc73..0da45834887 100644 --- a/themes/src/main/resources/theme/keycloak.v2/login/theme.properties +++ b/themes/src/main/resources/theme/keycloak.v2/login/theme.properties @@ -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