<commit_before>import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { FormattedMessage, intlShape } from 'react-intl'

import { FormGroup, ControlLabel, FormControl } from '~client/components/forms'
import { SettingsForm } from '~client/ux/components'
import { InputTag } from '~client/mobilizations/widgets/components'
import { Info } from '~client/components/notify'
import { Kbd } from '~client/components/markdown'

// Regex to validate Target (Ex.: <NAME> <<EMAIL>>)
// eslint-disable-next-line
const patternTarget = /[a-zà-úA-ZÀ-Ú\s]+<(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))>/

class PressureSettingsEmailPage extends Component {
  constructor (props) {
    super(props)
    this.state = { targets: this.getTargetList() || [] }
  }

  getTargetString (targets) {
    return targets.filter(target => !!target.trim()).join(';')
  }

  getTargetList () {
    const { fields: { targets } } = this.props
    return targets && targets.value.split(';')
  }

  handleSubmit (values) {
    const { widget, asyncWidgetUpdate } = this.props
    const settings = widget.settings || {}
    const targets = this.getTargetString(this.state.targets)

    return asyncWidgetUpdate({
      ...widget,
      settings: { ...settings, ...values, targets }
    })
  }

  render () {
    const {
      fields: {
        pressure_subject: pressureSubject,
        pressure_body: pressureBody,
        targets: targetsField
      },
      intl,
      ...props
    } = this.props
    return (
      <SettingsForm
        {...props}
        onSubmit={::this.handleSubmit}
        successMessage='Email para alvo configurado com sucesso!'
      >
        <div className='form-group'>
          <InputTag
            label='Alvos'
            values={this.state.targets}
            onInsertTag={value => {
              const targets = [...this.state.targets, value]
              this.setState({ targets })
              targetsField.onChange(this.getTargetString(targets))
            }}
            onRemoveTag={value => {
              const targets = this.state.targets.filter(tag => tag !== value)
              this.setState({ targets })
              targetsField.onChange(this.getTargetString(targets))
            }}
            validate={value => {
              const errors = { valid: true }
              if (!value.match(patternTarget)) {
                errors.valid = false
                errors.message = 'Alvo fora do formato padrão. Ex.: Nome do alvo' +
                  ' <<EMAIL>>'
              }
              return errors
            }}
            helperText={
              <Info
                title={intl.formatMessage({
                  id: 'widgets.components--input-tag.info.title',
                  defaultMessage: 'Como cadastrar alvos'
                })}
              >
                <FormattedMessage
                  id='widgets.components--input-tag.info.text'
                  defaultMessage={
                    'O cadastro de alvos é bem simples e pode ser feito com mais de um alvo ' +
                    'por vez. Você precisa separar os alvos, em linhas distintas e, cada ' +
                    'alvo deve seguir o formato descrito abaixo. Para cadastrar basta ' +
                    'pressionar {keyboardTrigger}. E não se esqueça de salvar, clicando ' +
                    'no botão no canto superior direito da tela.'
                  }
                  values={{
                    keyboardTrigger: (
                      <span>
                        <Kbd>cmd</Kbd>+<Kbd>enter</Kbd>
                      </span>
                    )
                  }}
                />
                <ul style={{ paddingLeft: 15 }}>
                  <li>
                    <FormattedMessage
                      id='widgets.components--input-tag.info.item.target-format'
                      defaultMessage={
                        'Formato do alvo: {format} (obrigatório usar os caractéres ' +
                        '{lt} e {gt} para agrupar o email)'
                      }
                      values={{
                        format: <b>{'Nome <<EMAIL>>'}</b>,
                        lt: <Kbd>{'<'}</Kbd>,
                        gt: <Kbd>{'>'}</Kbd>
                      }}
                    />
                  </li>
                </ul>
              </Info>
            }
          />
        </div>
        <FormGroup controlId='email-subject-id' {...pressureSubject}>
          <ControlLabel>Assunto do email</ControlLabel>
          <FormControl type='text' />
        </FormGroup>
        <FormGroup controlId='email-body-id' {...pressureBody}>
          <ControlLabel>Corpo do email que será enviado</ControlLabel>
          <FormControl type='text' componentClass='textarea' /><commit_msg>chore(pressure-widget): increase the email textarea rows #657<commit_after>import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { FormattedMessage, intlShape } from 'react-intl'

import { FormGroup, ControlLabel, FormControl } from '~client/components/forms'
import { SettingsForm } from '~client/ux/components'
import { InputTag } from '~client/mobilizations/widgets/components'
import { Info } from '~client/components/notify'
import { Kbd } from '~client/components/markdown'

// Regex to validate Target (Ex.: <NAME> <<EMAIL>>)
// eslint-disable-next-line
const patternTarget = /[a-zà-úA-ZÀ-Ú\s]+<(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))>/

class PressureSettingsEmailPage extends Component {
  constructor (props) {
    super(props)
    this.state = { targets: this.getTargetList() || [] }
  }

  getTargetString (targets) {
    return targets.filter(target => !!target.trim()).join(';')
  }

  getTargetList () {
    const { fields: { targets } } = this.props
    return targets && targets.value.split(';')
  }

  handleSubmit (values) {
    const { widget, asyncWidgetUpdate } = this.props
    const settings = widget.settings || {}
    const targets = this.getTargetString(this.state.targets)

    return asyncWidgetUpdate({
      ...widget,
      settings: { ...settings, ...values, targets }
    })
  }

  render () {
    const {
      fields: {
        pressure_subject: pressureSubject,
        pressure_body: pressureBody,
        targets: targetsField
      },
      intl,
      ...props
    } = this.props
    return (
      <SettingsForm
        {...props}
        onSubmit={::this.handleSubmit}
        successMessage='Email para alvo configurado com sucesso!'
      >
        <div className='form-group'>
          <InputTag
            label='Alvos'
            values={this.state.targets}
            onInsertTag={value => {
              const targets = [...this.state.targets, value]
              this.setState({ targets })
              targetsField.onChange(this.getTargetString(targets))
            }}
            onRemoveTag={value => {
              const targets = this.state.targets.filter(tag => tag !== value)
              this.setState({ targets })
              targetsField.onChange(this.getTargetString(targets))
            }}
            validate={value => {
              const errors = { valid: true }
              if (!value.match(patternTarget)) {
                errors.valid = false
                errors.message = 'Alvo fora do formato padrão. Ex.: Nome do alvo' +
                  ' <<EMAIL>>'
              }
              return errors
            }}
            helperText={
              <Info
                title={intl.formatMessage({
                  id: 'widgets.components--input-tag.info.title',
                  defaultMessage: 'Como cadastrar alvos'
                })}
              >
                <FormattedMessage
                  id='widgets.components--input-tag.info.text'
                  defaultMessage={
                    'O cadastro de alvos é bem simples e pode ser feito com mais de um alvo ' +
                    'por vez. Você precisa separar os alvos, em linhas distintas e, cada ' +
                    'alvo deve seguir o formato descrito abaixo. Para cadastrar basta ' +
                    'pressionar {keyboardTrigger}. E não se esqueça de salvar, clicando ' +
                    'no botão no canto superior direito da tela.'
                  }
                  values={{
                    keyboardTrigger: (
                      <span>
                        <Kbd>cmd</Kbd>+<Kbd>enter</Kbd>
                      </span>
                    )
                  }}
                />
                <ul style={{ paddingLeft: 15 }}>
                  <li>
                    <FormattedMessage
                      id='widgets.components--input-tag.info.item.target-format'
                      defaultMessage={
                        'Formato do alvo: {format} (obrigatório usar os caractéres ' +
                        '{lt} e {gt} para agrupar o email)'
                      }
                      values={{
                        format: <b>{'Nome <<EMAIL>>'}</b>,
                        lt: <Kbd>{'<'}</Kbd>,
                        gt: <Kbd>{'>'}</Kbd>
                      }}
                    />
                  </li>
                </ul>
              </Info>
            }
          />
        </div>
        <FormGroup controlId='email-subject-id' {...pressureSubject}>
          <ControlLabel>Assunto do email</ControlLabel>
          <FormControl type='text' />
        </FormGroup>
        <FormGroup controlId='email-body-id' {...pressureBody}>
          <ControlLabel>Corpo do email que será enviado</ControlLabel>
          <FormControl type='text' componentClass='textarea' rows='7' />
{'fraction_non_alphanumeric': 0.14035087719298245, 'fraction_numerical': 0.004664841293986411, 'mean_word_length': 1.559563976122502, 'pattern_counts': {'":': 0, '<': 91, '<?xml version=': 0, '>': 101, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, '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': '1221344', 'n_tokens_mistral': 2840, 'n_tokens_neox': 2709, 'n_words': 573}