2

I am trying to modify the Login page of Keycloak theme with a custom theme. I need to reuse the home page design (home.js) which is designed using react and {Component}'.

Is there any possible way to import this js file or any other react component which resides in another js file to my custom theme's login.ftl file of Keycloak?

SMash
  • 345
  • 2
  • 7
  • 23

3 Answers3

5

You can use Keycloakify,

enter image description here

Disclosure: I am the author

Joseph Garrone
  • 1,662
  • 19
  • 20
3

here is my example how did i the linking freemarker and react: input.ftl

<#assign initialValue ="21/07/2019">

<div class="form-group">
    <div id="flexInput-builder" data-initialValue=${initialValue}>
    </div>
</div>

<script type="text/babel" src="/jsx/input-builder.jsx" ></script>

and input-builder.jsx

class FlexInputBuilder extends React.Component {
  state = { value: '' }

  componentDidMount = () => {
    this.setState({value: this.props.passedValue})
  }

  onChangeHandler = (e) => this.setState({value: e.target.value})

  render() {
    const {value} = this.state;
    return (
      <div>
        <label>
          Pick the date
          <input value={value}
                 type='date'
                 className="form-control bg-light"
                 placeholder="pick your date"
                 onChange={this.onChangeHandler}
                 id={this.state.id}
          />
        </label>
      </div>
    )
  }
}

const elementID = document.getElementById('flexInput-builder');

ReactDOM.render(
  <FlexInputBuilder passedValue={elementID.dataset.initialvalue}/>,
  document.getElementById('flexInput-builder')
);
Alexey Nikonov
  • 4,958
  • 5
  • 39
  • 66
  • 2
    do not forget to include react dev lib in root – Alexey Nikonov Jun 25 '19 at 10:54
  • can you please make a tutorial? – Tufisi Radu Dec 08 '20 at 19:37
  • @TufisiRadu what is not clear? explain please more – Alexey Nikonov Dec 09 '20 at 11:39
  • I'm not very familiar with React but if I create a react project from scratch (using a tutorial) how I end up editing the KC theme files? Im sorry for not being very clear, but I'm not a frontend developer (I'm Java-DevOps dev). I just can't get how to link the files. – Tufisi Radu Dec 09 '20 at 18:14
  • 2
    @TufisiRadu you add to your ftl your **react component (jsx)** as usual script (as i described in my answer) together with ReactJS. After you must **convert** your jsx to standard js **by webpack** (or babel as you want). Afterwards you have compiled js script (which is your react-component) and just **give that bundle to the client all together** – Alexey Nikonov Dec 09 '20 at 20:23
0

For keycloak you need to customize keycloak theme you can check out there a documentation link https://www.keycloak.org/docs/latest/server_development/index.html I am also working on the same thing making a custom theme for keycloack for react project I made the theme for that you can check out I am still working on it so no readme file for now.

My Github link repo: another Github link: https://github.com/Alfresco/alfresco-keycloak-theme

and you cannot modify login.ftl using react components you need to make a custom theme for that in keycloak/theme folder.

it's little bit tracky part to customize keylock theme you need to understand first free maker template code style.

you can also check out this blog for a better understanding link.

Harsh Shah
  • 1,386
  • 14
  • 19