Как включить файл React js в файл ftl в keycloak?

Question

Я пытаюсь изменить страницу входа в тему Keycloak с помощью пользовательской темы. Мне нужно повторно использовать дизайн главной страницы (home.js), который разработан с использованием react и {Component} '.

Есть ли какой-нибудь возможный способ импортировать этот файл js или любой другой реагирующий файл component, который находится в другом файле js, в файл login.ftl моей пользовательской темы Keycloak?

Answer 1

вот мой пример, как я скомпоновал freemarker и отреагировал: 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>

и 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')
);

Answer 2

Для Keycloak вам нужно настроить тему Keycloak, вы можете проверить там ссылку на документацию https://www.keycloak.org/docs/2.5/server_development/topics/themes.html Я также работаю над тем же, делая пользовательскую тему для Keycloack для реагирующего проекта. Я сделал тему для этого вы можетепроверьте, я все еще работаю над этим, поэтому пока нет файла readme.

Мое хранилище ссылок github: другая ссылка github: https://github.com/Alfresco/alfresco-keycloak-theme

, и вы не можете изменять login.ftl, используя компоненты реакции, которые выВам нужно создать собственную тему для этого в папке keycloak / theme.

это немного сложная часть для настройки темы блокировки клавиатуры, вам необходимо понять первый свободный стиль кода шаблона maker.

вы также можете проверитьВ этом блоге для лучшего понимания ссылка введите описание ссылки здесь