Allow users to customize the footer of a login theme (#31391)

Closes  #31390

Signed-off-by: Thomas Darimont <thomas.darimont@googlemail.com>
This commit is contained in:
Thomas Darimont 2024-07-23 09:29:38 +02:00 committed by GitHub
parent 65d4b74758
commit dbd4079f92
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 43 additions and 2 deletions

View file

@ -50,7 +50,14 @@ The `java-keystore` key provider, which allows loading a realm key from an exter
For more information about this subject, see link:{adminguide_link}#realm_keys[Configuring realm keys]. For more information about this subject, see link:{adminguide_link}#realm_keys[Configuring realm keys].
= Deprecating `keycloak` login theme = Customizable Footer in login Themes
The `template.ftl` file in the `base/login` and the `keycloak.v2/login` theme now allows to customize the footer
of the login box. This can be used to show common links or include custom scripts at the end of the page.
The new `footer.ftl` template provides a `content` macro that is rendered at the bottom of the "login box".
= Deprecating `keycloak` login Theme
The `keycloak` login theme has been deprecated in favour of the new `keycloak.v2` and will be removed in a future version. The `keycloak` login theme has been deprecated in favour of the new `keycloak.v2` and will be removed in a future version.
While it remains the default for the new realms for compatibility reasons, it is strongly recommended to switch all the While it remains the default for the new realms for compatibility reasons, it is strongly recommended to switch all the

View file

@ -241,6 +241,25 @@ Or to use directly in HTML templates add the following to a custom HTML template
<img src="${url.resourcesPath}/img/image.jpg" alt="My image description"> <img src="${url.resourcesPath}/img/image.jpg" alt="My image description">
---- ----
[[_theme_custom_footer]]
==== Adding a custom footer to a login theme
In order to use a custom footer, create a `footer.ftl` file in your custom login theme with the desired content.
An example for a custom `footer.ftl` may look like this:
```
<#macro content>
<#-- footer at the end of the login box -->
<div>
<ul id="kc-login-footer-links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div>
</#macro>
```
==== Adding an image to a email theme ==== Adding an image to a email theme
To make images available to the theme add them to the `<THEME TYPE>/email/resources/img` directory of your theme. These can be used from within directly in HTML templates. To make images available to the theme add them to the `<THEME TYPE>/email/resources/img` directory of your theme. These can be used from within directly in HTML templates.

View file

@ -76,6 +76,13 @@ If you are migrating from previous versions where any of the following settings
For more details, see link:{adminguide_link}#_ldap_connection_pool[Configuring the connection pool]. For more details, see link:{adminguide_link}#_ldap_connection_pool[Configuring the connection pool].
= Custom Footer in Login Theme
This release introduced the capability to easily add a custom footer to the login pages for the `base/login` and `keycloak.v2/login` theme.
In order to use a custom footer, create a `footer.ftl` file in your custom login theme with the desired content.
For more details, see link:{developerguide_link}#_theme_custom_footer[Adding a custom footer to a login theme].
= Admin Bootstrapping = Admin Bootstrapping
The environment variables `KEYCLOAK_ADMIN` and `KEYCLOAK_ADMIN_PASSWORD` have been deprecated. You should use `KC_BOOTSTRAP_ADMIN_USERNAME` and `KC_BOOTSTRAP_ADMIN_PASSWORD` instead. These are also general options, so they may be specified via the cli or other config sources, for example `--bootstrap-admin-username=admin`. The environment variables `KEYCLOAK_ADMIN` and `KEYCLOAK_ADMIN_PASSWORD` have been deprecated. You should use `KC_BOOTSTRAP_ADMIN_USERNAME` and `KC_BOOTSTRAP_ADMIN_PASSWORD` instead. These are also general options, so they may be specified via the cli or other config sources, for example `--bootstrap-admin-username=admin`.

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>

View file

@ -1,3 +1,4 @@
<#import "footer.ftl" as loginFooter>
<#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false> <#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false>
<!DOCTYPE html> <!DOCTYPE html>
<html class="${properties.kcHtmlClass!}"<#if realm.internationalizationEnabled> lang="${locale.currentLanguageTag}" dir="${(locale.rtl)?then('rtl','ltr')}"</#if>> <html class="${properties.kcHtmlClass!}"<#if realm.internationalizationEnabled> lang="${locale.currentLanguageTag}" dir="${(locale.rtl)?then('rtl','ltr')}"</#if>>
@ -164,6 +165,7 @@
</div> </div>
</div> </div>
<@loginFooter.content/>
</div> </div>
</div> </div>
</body> </body>

View file

@ -1,3 +1,4 @@
<#import "footer.ftl" as loginFooter>
<#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false> <#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false>
<!DOCTYPE html> <!DOCTYPE html>
<html class="${properties.kcHtmlClass!}"<#if realm.internationalizationEnabled> lang="${locale.currentLanguageTag}" dir="${(locale.rtl)?then('rtl','ltr')}"</#if>> <html class="${properties.kcHtmlClass!}"<#if realm.internationalizationEnabled> lang="${locale.currentLanguageTag}" dir="${(locale.rtl)?then('rtl','ltr')}"</#if>>
@ -179,6 +180,8 @@
<footer class="pf-v5-c-login__main-footer"> <footer class="pf-v5-c-login__main-footer">
<#nested "socialProviders"> <#nested "socialProviders">
</footer> </footer>
<@loginFooter.content/>
</main> </main>
</div> </div>
</div> </div>