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?
- please select an answer as the solution if there is the correct one – Oleksiï Nikonov Commented Dec 9, 2020 at 11:43
3 Answers
Reset to default 5You 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.