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

Skip to content

Conversation

@thomasdarimont
Copy link
Contributor

@thomasdarimont thomasdarimont commented Jul 17, 2024

Previously, users had to copy the whole template.ftl file or resort to css/js hacks to add a custom footer.

This PR adds new footer templates to the base/login and keycloak.v2/login themes to allow users
to configure a footer for the login box.

The new footer.ftl template contains a content macro that can be added at the bottom of the "login box".

Adjusted template.ftl in base login theme to render the macro from footer.ftl

The new templates are empty by default to avoid conflicts with existing themes.

Fixes #31390

@thomasdarimont thomasdarimont force-pushed the issue/gl-31390-allow-to-customize-footer-in-login-theme branch from 7c83c5e to d9796c1 Compare July 17, 2024 21:44
@thomasdarimont
Copy link
Contributor Author

thomasdarimont commented Jul 17, 2024

An example custom login theme based on keycloak/login with a custom footer could look like this:

theme.properties:

parent=keycloak
import=common/keycloak
styles=css/login.css css/custom-login.css

resources/css/custom-login.css

#kc-login-footer-links {
    text-align: center;
}
#kc-login-footer-links li{
    display:inline-block;
}

footer.ftl file:

<#macro content>
    <!-- hello from footer.ftl -->
<div>
	<#-- footer at the end of the login box -->
    <hr id="kc-login-footer-divider">
    <ul id="kc-login-footer-links">
        <li><a href="https://apps.training.test/apps/site#home">Home</a></li>
        <li><a href="https://apps.training.test/apps/site#about">About</a></li>
        <li><a href="https://apps.training.test/apps/site#services">Services</a></li>
        <li><a href="https://apps.training.test/apps/site#contact">Contact</a></li>
    </ul>
<div>
</#macro>

WIth login-footer links we get the following result:
image

With Identity Providers:
image

@thomasdarimont thomasdarimont force-pushed the issue/gl-31390-allow-to-customize-footer-in-login-theme branch 3 times, most recently from 51192b4 to 49ff69d Compare July 17, 2024 21:55
@thomasdarimont thomasdarimont marked this pull request as ready for review July 17, 2024 21:55
@thomasdarimont thomasdarimont requested review from a team as code owners July 17, 2024 21:55
@cturkalj
Copy link
Contributor

Great idea!
After looking at the result, would it be possible to also add a (page) footer at the bottom of the page (instead of the "login form")?
There you could add other things (like a copyright notice) without making the login form look overcrowded.

@thomasdarimont
Copy link
Contributor Author

thomasdarimont commented Jul 18, 2024

@cturkalj I thought about that too. How about the following:

login-footer.ftl contains a macro that's rendered at the end of the "login box" (like my current footer.ftl above).
footer.ftl contains a macro that's rendered at the bootom of the page as you suggested.

Both macros would be empty by default.

Would that work for you?

edewit
edewit previously approved these changes Jul 18, 2024
@thomasdarimont
Copy link
Contributor Author

@edewit thanks for your review! What do you think about the suggestions from @cturkalj?

@cturkalj
Copy link
Contributor

@thomasdarimont:
Perfect, thank you!

@thomasdarimont
Copy link
Contributor Author

thomasdarimont commented Jul 18, 2024

I did a small example for the suggested extension:
https://gist.github.com/thomasdarimont/8021ef4bf715aae2cb28ca2ca3151ab7#file-template-ftl-L169

It contains a two footer templates:

  • footer.ftl -> Inserted at page bottom and content will be wrapped in a <footer> element
  • login-footer.ftl -> Inserted at login box bottom and content will be wrapped in a <div id="kc-login-footer"> element
    Thoughts?

If that's okay, then I'd update this PR.

@thomasdarimont thomasdarimont force-pushed the issue/gl-31390-allow-to-customize-footer-in-login-theme branch from 49ff69d to 3c33f53 Compare July 18, 2024 13:22
@thomasdarimont
Copy link
Contributor Author

thomasdarimont commented Jul 18, 2024

I updated the PR based on the suggestions. I now use an empty footer.ftl and login-footer.ftl templates by default.
Users have full control over the template fragment contents.

Allthough I think the footer.ftl will rarely be used, because the login-footer.ftl is IMHO sufficient for many scenarios already. However, users might use the footer.ftl to include javascript add the very bottom of the page if necessary.

jonkoops
jonkoops previously approved these changes Jul 18, 2024
Copy link
Contributor

@jonkoops jonkoops left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@thomasdarimont
Copy link
Contributor Author

Added note to release notes

@ahus1
Copy link
Contributor

ahus1 commented Jul 19, 2024

@thomasdarimont - there is a conflict with the release notes. Please rebase and resolve.

@thomasdarimont thomasdarimont force-pushed the issue/gl-31390-allow-to-customize-footer-in-login-theme branch from b5a0e71 to 10eda87 Compare July 19, 2024 07:54
@thomasdarimont
Copy link
Contributor Author

thomasdarimont commented Jul 19, 2024

@ahus1 Thanks for the review. I rebased the PR and resolved the conflict.

I also added support for the custom footer(s) to the login.v2 theme which I learned will become the default login theme from now on.

However, there are some issues with the login theme v2 which I mentioned on the maintainers mailing list. So I'd recommend to wait for feedback from the other maintainers before merging this PR.

@thomasdarimont thomasdarimont force-pushed the issue/gl-31390-allow-to-customize-footer-in-login-theme branch from 10eda87 to aa3e8d2 Compare July 19, 2024 08:01
@thomasdarimont
Copy link
Contributor Author

thomasdarimont commented Jul 19, 2024

I also tested this with the keycloak.v2 login theme.

Theme minimal.v2/login, see: https://gist.github.com/thomasdarimont/5fe725319a5fc3c8242669deddd934a8

Custom theme based on Login V2 with empty Footer
image

Custom theme based on Login V2 with Footer
image

Custom theme based on Login V2 with Identity Providers and Footer
image

@thomasdarimont
Copy link
Contributor Author

thomasdarimont commented Jul 19, 2024

@cturkalj I experimented a bit further with the footer customizations and I think it would be sufficient to only have one footer.ftl file that we add at the bottom of the login box. Links that should be shown at the bottom of the page can be moved there via CSS. This would make the templating easier, as the current login page styling of the keycloak and keycloak.v2 theme does not support adding links outside of the "login box" anyways.

Can you think of something that would not be possible if we only had one footer.ftl ( the login-footer.ftl in the current examples)?

If there are no issues then I adapt this PR and only keep the login-footer.ftl file.

@cturkalj
Copy link
Contributor

@thomasdarimont:
I was able to use the login-footer.ftl only and have the footer at the bottom of the page with css (thanks for the hint).
Besides that, I currently don't have in other use cases in mind.

Now that we have just one (login)-footer.ftl left, should it be renamed it back to footer.ftl?

@thomasdarimont thomasdarimont force-pushed the issue/gl-31390-allow-to-customize-footer-in-login-theme branch from 896a7b7 to 5c8f043 Compare July 19, 2024 10:06
@thomasdarimont
Copy link
Contributor Author

I revised the PR to only contain 1 additional template file -> footer.ftl

  • Added section to the release-notes
  • Added section to the upgrading guide
  • Added section to the themes section in the server development docs

@thomasdarimont thomasdarimont force-pushed the issue/gl-31390-allow-to-customize-footer-in-login-theme branch from 5c8f043 to 2bb4e0d Compare July 19, 2024 10:10
Previously, users had to copy the whole template.ftl file or resort to css/js hacks to
add a custom footer.

This PR adds new footer.ftl template to the base login theme to allow users
to configure a footer for the login box, as well as the page footer.

The new footer.ftl template contains a content macro that can be added at the bottom of the login page.

Adjusted template.ftl in base/login and keycloak.v2 theme to render footer.ftl macro.

Fixes keycloak#31390

Signed-off-by: Thomas Darimont <[email protected]>
@thomasdarimont thomasdarimont force-pushed the issue/gl-31390-allow-to-customize-footer-in-login-theme branch from 2bb4e0d to d9e086c Compare July 19, 2024 10:12
@jonkoops jonkoops changed the title Allow users to customize the footer of a login theme (#31390) Allow users to customize the footer of a login theme Jul 22, 2024
@jonkoops jonkoops enabled auto-merge (squash) July 22, 2024 10:55
Copy link
Contributor

@ahus1 ahus1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approving based on @jonkoops' and @edewit's review. Thanks!

@jonkoops jonkoops merged commit dbd4079 into keycloak:main Jul 23, 2024
stianst pushed a commit to stianst/keycloak that referenced this pull request Jul 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Allow custom login themes to define a footer ftl fragment

5 participants