Thanks to visit codestin.com
Credit goes to github.com

Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jonkoops merged 1 commit into from
Jul 23, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion docs/documentation/release_notes/topics/26_0_0.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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].

= 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.
While it remains the default for the new realms for compatibility reasons, it is strongly recommended to switch all the
Expand Down
19 changes: 19 additions & 0 deletions docs/documentation/server_development/topics/themes.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
----

[[_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

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.
Expand Down
9 changes: 8 additions & 1 deletion docs/documentation/upgrading/topics/changes/changes-26_0_0.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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].

= 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

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`.
3 changes: 3 additions & 0 deletions themes/src/main/resources/theme/base/login/footer.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 2 additions & 0 deletions themes/src/main/resources/theme/base/login/template.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<#import "footer.ftl" as loginFooter>
<#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false>
<!DOCTYPE html>
<html class="${properties.kcHtmlClass!}"<#if realm.internationalizationEnabled> lang="${locale.currentLanguageTag}" dir="${(locale.rtl)?then('rtl','ltr')}"</#if>>
Expand Down Expand Up @@ -164,6 +165,7 @@
</div>
</div>

<@loginFooter.content/>
</div>
</div>
</body>
Expand Down
3 changes: 3 additions & 0 deletions themes/src/main/resources/theme/keycloak.v2/login/template.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<#import "footer.ftl" as loginFooter>
<#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false>
<!DOCTYPE html>
<html class="${properties.kcHtmlClass!}"<#if realm.internationalizationEnabled> lang="${locale.currentLanguageTag}" dir="${(locale.rtl)?then('rtl','ltr')}"</#if>>
Expand Down Expand Up @@ -179,6 +180,8 @@
<footer class="pf-v5-c-login__main-footer">
<#nested "socialProviders">
</footer>

<@loginFooter.content/>
</main>
</div>
</div>
Expand Down