<commit_before>import React, { PropTypes } from 'react'
import classnames from 'classnames'
import ServerConfig from '~server/config'
import { FormGroup, ControlLabel, FormControl, FormDropdown } from '~client/components/forms'

const HeaderToggle = ({ children, show, onToggle }) => (
  <h3 onClick={onToggle} style={{ cursor: 'pointer' }}>
    <i
      className={classnames('fa', !show ? 'fa-arrow-right' : 'fa-arrow-down')}
      style={{ marginRight: '5px' }}
    />
    {children}
  </h3>
)

const FormDomain = ({
  formComponent: FormComponent,
  fields: { domain, subdomain, advancedConfig, externalDomain },
  mobilization,
  hostedZones,
  redirectToCreateDNS,
  ...formProps
}) => (
  <FormComponent {...formProps}>
    <div className='basic-config' style={{ marginBottom: '1rem' }}>
      <HeaderToggle
        onToggle={() => advancedConfig.onChange(false)}
        show={!advancedConfig.value}
      >
        Opções de domínio
      </HeaderToggle>
      {!advancedConfig.value && (
        hostedZones.length > 0 ? (
          <div>
            <p className='h5'>
              Escolha abaixo o subdomínio que deseja para sua mobilização,
              e o domínio principal no qual ele deve viver.
            </p>
            <div className='flex flex-wrap'>
              <FormGroup controlId='subdomain' className='col col-6' {...subdomain}>
                <ControlLabel>Subdomínio</ControlLabel>
                <FormControl
                  type='text'
                  placeholder='nomedamob'
                />
              </FormGroup>
              <FormGroup controlId='domain' className='col col-6' {...domain}>
                <ControlLabel>Domínio Principal</ControlLabel>
                <FormDropdown>
                  {hostedZones.map((obj, i) => (
                    <option key={`hostedZone-${i}`} value={obj.domain_name}>
                      {obj.domain_name}
                    </option>
                  ))}
                </FormDropdown>
              </FormGroup>
            </div>
          </div>
        ) : (
          <div>
            <p className='h5'>
              Visando agilizar a propagação de domínio, você pode <a
                href='#'
                onClick={(e) => {
                  e.preventDefault()
                  redirectToCreateDNS && redirectToCreateDNS()
                }}
              >criar um domínio principal</a> para sua comunidade
              e registrar um subdomínio para sua mobilização.
            </p>
          </div>
        )
      )}
    </div>
    <div className='advanced-config'>
      <HeaderToggle
        onToggle={() => advancedConfig.onChange(true)}
        show={advancedConfig.value}
      >
        Opções avançadas de domínio
      </HeaderToggle>
      {advancedConfig.value && (
        <div>
          <p className='h5'>
            Aqui você pode personalizar o endereço da sua mobilização caso já tenha um domínio próprio.
            Por exemplo, se você já comprou www.nomedoseuprojeto.com.br, você pode usá-lo para este BONDE.
            Demais, né?
          </p>
          <FormGroup controlId='externalDomain' {...externalDomain}>
            <ControlLabel>Domínio personalizado</ControlLabel>
            <FormControl
              type='text'
              placeholder='www.meudominio.com.br'
            />
          </FormGroup>

          <div className='separator' />

          <div className='h5'>
            <p>
              <strong>Não esqueça</strong>: você vai precisar configurar este domínio no servidor de
              registro para que ele redirecione a URL para a página da sua mobilização no BONDE.
              Pra isso, você vai precisar dessas informações aqui embaixo, anote aí:
            </p>
            <table className='col-12 left-align'>
              <tbody>
                <tr>
                  <th>Nome</th>
                  <th>Tipo</th>
                  <th>Dados</th>
                </tr>
                <tr>
                  <td><code>{externalDomain ? externalDomain.value : ''}</code></td>
                  <td><code>CNAME</code></td>
                  <td><code>{mobilization.slug}.{ServerConfig.appDomain}</code></td>
                </tr>
              </tbody>
            </table>
            <p>
              Se tiver alguma dúvida, dá uma olhada no tópico "Configurando seu domínio no BONDE",
              no nosso tutorial, o <a href='https://trilho.bonde.org' target='_blank'>
                Trilho <i className='fa fa-external-link' style={{ fontSize: '.7rem' }} />
              </a>.
            </p>
          </div>
        </div>
      )}
    </div>
  </FormComponent>
)

FormDomain.propTypes = {
  formComponent: PropTypes.any.isRequired,
  fields: PropTypes.shape({
    externalDomain: PropTypes.object.isRequired,
    subdomain: PropTypes.object.isRequred,
    domain: PropTypes.object.isRequired
  }).isRequired,
  mobilization: PropTypes.object.isRequired,
  hostedZones: PropTypes.array.isRequired,
  redirectToCreateDNS: PropTypes.func
}

export default FormDomain
<commit_msg>improvement of domain form flux<commit_after>import React, { Component, PropTypes } from 'react'
import classnames from 'classnames'
import ServerConfig from '~server/config'
import { FormGroup, ControlLabel, FormControl, FormDropdown } from '~client/components/forms'

const HeaderToggle = ({ children, show, onToggle }) => (
  <h3 onClick={onToggle} style={{ cursor: 'pointer' }}>
    <i
      className={classnames('fa', !show ? 'fa-arrow-right' : 'fa-arrow-down')}
      style={{ marginRight: '5px' }}
    />
    {children}
  </h3>
)

class FormDomain extends Component {

  constructor (props) {
    super(props)
    this.state = { showSubdomain: false, showExternalDomain: false }
  }

  componentDidMount () {
    const { fields: { subdomain, externalDomain } } = this.props
    if (subdomain.value) {
      this.toggle('showSubdomain', true)
    } else if (externalDomain.value) {
      this.toggle('showExternalDomain', true)
    }
  }

  clickHere (e) {
    e.preventDefault()
    this.props.redirectToCreateDNS()
  }

  toggle (key, value) {
    if (key === 'showExternalDomain') {
      this.props.fields.advancedConfig.onChange(value)
      const state = { [key]: value }
      if (value === true) state.showSubdomain = false
      this.setState(state)
    } else if (key === 'showSubdomain') {
      const state = { [key]: value }
      if (value === true) {
        state.showExternalDomain = false
        this.props.fields.advancedConfig.onChange(false)
      }
      this.setState(state)
    }
  }

  render () {
    const {
      formComponent: FormComponent,
      fields: { domain, subdomain, externalDomain },
      mobilization,
      hostedZones,
      ...formProps
    } = this.props
    return (
      <FormComponent {...formProps}>
        <div className='basic-config' style={{ marginBottom: '1rem' }}>
          <HeaderToggle
            onToggle={() => this.toggle('showSubdomain', !this.state.showSubdomain)}
            show={this.state.showSubdomain}
          >
            {hostedZones.length > 0
              ? `Quero usar o domínio principal da minha comunidade`
              : `Quero cadastrar um domínio principal na minha comunidade`}
          </HeaderToggle>
          {this.state.showSubdomain && (
            hostedZones.length > 0 ? (
              <div>
                <p className='h5'>
                  Preencha abaixo o subdomínio e escolha o domínio que deseja
                  configurar como endereço da sua mobilização
                </p>
                <div className='flex flex-wrap'>
                  <FormGroup controlId='subdomain' className='col col-6' {...subdomain}>
                    <ControlLabel>Subdomínio</ControlLabel>
                    <FormControl
                      type='text'
                      placeholder='nomedamob'
                    />
                  </FormGroup>
                  <FormGroup controlId='domain' className='col col-6' {...domain}>
                    <ControlLabel>Domínio Principal</ControlLabel>
                    <FormDropdown>
                      {hostedZones.map((obj, i) => (
                        <option key={`hostedZone-${i}`} value={obj.domain_name}>
                          {obj.domain_name}
                        </option>
                      ))}
                    </FormDropdown>
                  </FormGroup>
                </div>
              </div>
            ) : (
              <div>
                <p className='h5'>
                  Ops, você ainda não tem um domínio configurado na sua comunidade. Se quiser
                  cadastar, <a onClick={this.clickHere.bind(this)} target='_self'>clique aqui</a>.
                  Senão você pode, abaixo, usar um domínio externo para configurar o endereço
                  da sua mobilização.
                </p>
              </div>
            )
          )}
        </div>
        <div className='advanced-config'>
          <HeaderToggle
            onToggle={() => this.toggle('showExternalDomain', !this.state.showExternalDomain)}
            show={this.state.showExternalDomain}
          >
            Quero usar um domínio externo
          </HeaderToggle>
          {this.state.showExternalDomain && (
            <div>
              <p className='h5'>
                Se você quer usar um domínio que comprou mas não está cadastrado na sua comunidade
                aqui, pode fazer isso. Por exemplo, se você já comprou www.meudominio.com.br você
                pode usá-lo para este BONDE. Demais, né? Preencha o campo abaixo e siga as orientações:
              </p>
              <FormGroup controlId='externalDomain' {...externalDomain}>
                <ControlLabel>Domínio personalizado</ControlLabel>
                <FormControl
                  type='text'
                  placeholder='www.meudominio.com.br'
                />
              </FormGroup>

              <div className='separator' />

              <div className='h5'>
                <p>
                  <strong>Não esqueça</strong>: você vai precisar configurar este domínio no seu
                  servidor de registro para que o endereço seja redirecionado à página da sua mobilização.
                  Pra isso, você vai precisar dessas informações aqui embaixo, anote aí:
                </p>
                <table className='col-12 left-align'>
                  <tbody>
                    <tr>
                      <th>Nome</th>
                      <th>Tipo</th>
                      <th>Dados</th>
                    </tr>
                    <tr>
                      <td><code>{externalDomain ? externalDomain.value : ''}</code></td>
                      <td><code>CNAME</code></td>
                      <td><code>{mobilization.slug}.{ServerConfig.appDomain}</code></td>
                    </tr>
                  </tbody>
                </table>
                <p>
                  Se tiver alguma dúvida, dá uma olhada no tópico "Configurando seu domínio no BONDE",
                  no nosso tutorial, o <a href='https://trilho.bonde.org' target='_blank'>
                    Trilho <i className='fa fa-external-link' style={{ fontSize: '.7rem' }} />
                  </a>.
                </p>
              </div>
            </div>
          )}
        </div>
      </FormComponent>
    )
  }
}

FormDomain.propTypes = {
  formComponent: PropTypes.any.isRequired,
  fields: PropTypes.shape({
    externalDomain: PropTypes.object.isRequired,
    subdomain: PropTypes.object.isRequred,
    domain: PropTypes.object.isRequired
  }).isRequired,
  mobilization: PropTypes.object.isRequired,
  hostedZones: PropTypes.array.isRequired,
  redirectToCreateDNS: PropTypes.func,
  isSubdomain: PropTypes.bool
}

export default FormDomain

{'fraction_non_alphanumeric': 0.11516379601485985, 'fraction_numerical': 0.002448497129348193, 'mean_word_length': 1.6853321242348673, 'pattern_counts': {'":': 0, '<': 173, '<?xml version=': 0, '>': 186, 'https://': 2, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '666484', 'n_tokens_mistral': 3403, 'n_tokens_neox': 3297, 'n_words': 763}