最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to include React js file in an ftl file in keycloak? - Stack Overflow

programmeradmin3浏览0评论

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 ponent which resides in another js file to my custom theme's login.ftl file of Keycloak?

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 ponent which resides in another js file to my custom theme's login.ftl file of Keycloak?

Share Improve this question asked Mar 28, 2019 at 13:02 SMashSMash 3452 gold badges7 silver badges23 bronze badges 1
  • please select an answer as the solution if there is the correct one – Oleksiï Nikonov Commented Dec 9, 2020 at 11:43
Add a ment  | 

3 Answers 3

Reset to default 5

You can use Keycloakify,

Disclosure: I am the author

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: '' }

  ponentDidMount = () => {
    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')
);

For keycloak you need to customize keycloak theme you can check out there a documentation link https://www.keycloak/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./Alfresco/alfresco-keycloak-theme

and you cannot modify login.ftl using react ponents 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.

发布评论

评论列表(0)

  1. 暂无评论