How to use theme.properties

Hello! Love the project!

I’m new to Keycloak and Keycloakify, so apologies if this is a simple question.

I’m working on migrating an existing Keycloak theme to use Keycloakify. The existing theme is written using FTL.

The existing theme has variables in the FTL files like so;

        <a name="Home" href="${primaryUrl}" title="${nameOfTitle}" data-ga-tracking-id="headerLogo">

My understanding is that these variables come from the theme.properties file.

How can I access these variables on the React side?

Thanks

[jpreecenb]

Ok sorry I’ll try explain better.

I have a theme called myUserTheme. Inside there is a directory called common, and in there, a file called theme.properties. The file has many key/value pairs.

Here is an example;

AWL_nameOfTitle=Ambrose Wilson

Inside common there is a directory called properties, and inside here, a file called AWL_properties.ftl. There is a line at the top like this…

<#global nameOfTitle = properties.AWL_nameOfTitle>

So I guess this creates a global value called nameOfTitle (Accessible to any page or component) with the value (in this case) of Ambrose Wilson.

Back in the theme/common/components directory, (file called header.ftl) we come across this code;

<header class="header__container">
    <div class="header__logo">
        <a name="Home" href="${primaryUrl}" title="${nameOfTitle}" data-ga-tracking-id="headerLogo">
            <img src="${url.resourcesPath}/images/logo-${tradingTitle}.svg" alt="${nameOfTitle} logo">
        </a>
    </div>
    <div class="header__secure">
        <img src="${url.resourcesPath}/images/icons/padlock.svg" alt="Secure icon"/>
    </div>
</header>

Nothing fancy here, simple header.

The global variable we defined earlier is being used in this template.

I guess my question is, how can I access these global variables from my React app/React components?

Thanks

[garronej]

Ok, thanks for the detailed explanation,
I will try to guide you in porting you theme to Keycloakify.

The values in theme.properties correspond to kcProps in Keycloakify.

You are in a situation where you want to re-write your ftl code into React components.
You will then pass props to those components, that will correspond to the keys value you had in theme.properties.

You will for example create a <Header> component that take a prop awl_nameOfTitle and you will invoke it like this:
<Header awl_nameOfTitle="Ambrose Wilson" />.

Converting .ftl files into React is not rocket science.
Check for example how I converted login.ftl into Login.tsx.

To get you started you can read this section of the readme, I just updated the instructions.

Best regards.