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

Closes keycloak#31390 Signed-off-by: Thomas Darimont <thomas.darimont@googlemail.com>
randreoni · Jul 23, 2024 · dbd4079 · dbd4079
1 parent 65d4b74
commit dbd4079
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 2 deletions.
diff --git a/docs/documentation/release_notes/topics/26_0_0.adoc b/docs/documentation/release_notes/topics/26_0_0.adoc
@@ -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

diff --git a/docs/documentation/server_development/topics/themes.adoc b/docs/documentation/server_development/topics/themes.adoc
@@ -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.

diff --git a/docs/documentation/upgrading/topics/changes/changes-26_0_0.adoc b/docs/documentation/upgrading/topics/changes/changes-26_0_0.adoc
@@ -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`.
diff --git a/themes/src/main/resources/theme/base/login/footer.ftl b/themes/src/main/resources/theme/base/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 -->
+</#macro>
diff --git a/themes/src/main/resources/theme/base/login/template.ftl b/themes/src/main/resources/theme/base/login/template.ftl
@@ -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>>
@@ -164,6 +165,7 @@
         </div>
       </div>
 
+      <@loginFooter.content/>
     </div>
   </div>
 </body>

diff --git a/themes/src/main/resources/theme/keycloak.v2/login/template.ftl b/themes/src/main/resources/theme/keycloak.v2/login/template.ftl
@@ -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>>
@@ -179,6 +180,8 @@
       <footer class="pf-v5-c-login__main-footer">
         <#nested "socialProviders">
       </footer>
+
+      <@loginFooter.content/>
     </main>
   </div>
 </div>