GladysProject/Gladys

import { Text, MarkupText, Localizer } from 'preact-i18n';
import cx from 'classnames';
import { RequestStatus } from '../../../../utils/consts';
import DeviceConfigurationLink from '../../../../components/documentation/DeviceConfigurationLink';

const NextcloudTalkPage = ({ children, ...props }) => (
  <div class="page">
    <div class="page-main">
      <div class="my-3 my-md-5">
        <div class="container">
          <div class="row">
            <div class="col-lg-3">
              <h3 class="page-title mb-5">
                <Text id="integration.nextcloudTalk.title" />
              </h3>
              <div>
                <div class="list-group list-group-transparent mb-0">
                  <DeviceConfigurationLink
                    user={props.user}
                    configurationKey="integrations"
                    documentKey="nextcloud-talk"
                    linkClass="list-group-item list-group-item-action d-flex align-items-center"
                  >
                    <span class="icon mr-3">
                      <i class="fe fe-book-open" />
                    </span>
                    <Text id="integration.nextcloudTalk.documentation" />
                  </DeviceConfigurationLink>
                </div>
              </div>
            </div>

            <div class="col-lg-9">
              <div class="card">
                <div class="card-header">
                  <h1 class="card-title">
                    <Text id="integration.nextcloudTalk.title" />
                  </h1>
                </div>
                <div class="card-body">
                  <div
                    class={cx('dimmer', {
                      active: props.loading
                    })}
                  >
                    <div class="loader" />
                    <div class="dimmer-content">
                      <p>
                        <Text id="integration.nextcloudTalk.introduction" />
                      </p>
                      <div class="form-group">
                        <div class="form-label">
                          <Text id={`integration.nextcloudTalk.url`} />
                        </div>
                        <Text id={`integration.nextcloudTalk.urlInfo`} />
                        <Localizer>
                          <input
                            type="text"
                            class="form-control"
                            placeholder={<Text id={`integration.nextcloudTalk.url`} />}
                            onInput={props.updateNextcloudUrl}
                            value={props.nextcloudUrl}
                          />
                        </Localizer>
                      </div>
                      <div class="form-group">
                        <div class="form-label">
                          <Text id={`integration.nextcloudTalk.username`} />
                        </div>
                        <Text id={`integration.nextcloudTalk.usernameInfo`} />
                        <Localizer>
                          <input
                            type="text"
                            class="form-control"
                            autocomplete="off"
                            placeholder={<Text id={`integration.nextcloudTalk.username`} />}
                            onInput={props.updateNextcloudBotUsername}
                            value={props.nextcloudBotUsername}
                          />
                        </Localizer>
                      </div>
                      <div class="form-group">
                        <div class="form-label">
                          <Text id={`integration.nextcloudTalk.password`} />
                        </div>
                        <MarkupText id={`integration.nextcloudTalk.passwordInfo`} />
                        <Localizer>
                          <input
                            type="password"
                            autocomplete="off"
                            class="form-control"
                            placeholder={<Text id={`integration.nextcloudTalk.password`} />}
                            onInput={props.updateNextcloudBotPassword}
                            value={props.nextcloudBotPassword}
                          />
                        </Localizer>
                      </div>
                      <div class="form-group">
                        <div class="form-label">
                          <Text id={`integration.nextcloudTalk.token`} />
                        </div>
                        <Text id={`integration.nextcloudTalk.tokenInfo`} />
                        <Localizer>
                          <input
                            type="text"
                            class="form-control"
                            placeholder={<Text id={`integration.nextcloudTalk.token`} />}
                            onInput={props.updateNextcloudTalkToken}
                            value={props.nextcloudTalkToken}
                          />
                        </Localizer>
                      </div>
                      {props.nextcloudTalkSaveSettingsStatus === RequestStatus.Error && (
                        <div class="alert alert-danger">
                          <Text id="integration.nextcloudTalk.configurationError" />
                        </div>
                      )}
                      {props.nextcloudTalkSaveSettingsStatus === RequestStatus.Success && (
                        <p class="alert alert-info">
                          <Text id="integration.nextcloudTalk.configurationSuccess" />
                        </p>
                      )}
                      <div class="form-group">
                        <span class="input-group-append">
                          <button class="btn btn-primary" onClick={props.saveNextcloudTalkSettings}>
                            <Text id={`integration.nextcloudTalk.buttonSave`} />
                          </button>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

export default NextcloudTalkPage;