<commit_before>import _ from 'messages'
import ActionButton from 'action-button'
import ActionRowButton from 'action-row-button'
import map from 'lodash/map'
import React, { Component } from 'react'
import { Password } from 'form'
import { Password as EditablePassword, Text } from 'editable'
import {
  addServer,
  editServer,
  connectServer,
  disconnectServer,
  removeServer,
  subscribeServers
} from 'xo'
import {
  connectStore
} from 'utils'

@connectStore()
export default class Servers extends Component {
  componentWillMount () {
    this.componentWillUnmount = subscribeServers(servers => {
      this.setState({ servers })
    })
  }

  _addServer = async () => {
    const { host, password, username } = this.refs

    await addServer(host.value, username.value, password.value)

    host.value = username.value = password.value = ''
  }

  render () {
    const { state } = this
    const servers = state && state.servers

    return <div className='container-fluid'>
      <table className='table table-striped'>
        <thead>
          <tr>
            <td>{_('serverHost')}</td>
            <td>{_('serverUsername')}</td>
            <td>{_('serverPassword')}</td>
            <td>{_('serverAction')}</td>
          </tr>
        </thead>
        <tbody>
          {map(servers, server => (
            <tr key={server.id}>
              <td>
                <Text
                  value={server.host}
                  onChange={host => editServer(server, { host })}
                  placeholder='address[:port]'
                />
              </td>
              <td>
                <Text
                  value={server.username}
                  onChange={username => editServer(server, { username })}
                  placeholder='user'
                />
              </td>
              <td>
                <EditablePassword
                  value=''
                  onChange={password => editServer(server, { password })}
                  placeholder='password'
                />
              </td>
              <td>
                {server.status === 'disconnected'
                  ? <ActionRowButton
                    btnStyle='secondary'
                    handler={connectServer}
                    handlerParam={server}
                    icon='connect'
                    style={{
                      marginRight: '0.5em'
                    }}
                  />
                  : <ActionRowButton
                    btnStyle='warning'
                    handler={disconnectServer}
                    handlerParam={server}
                    icon='disconnect'
                    style={{
                      marginRight: '0.5em'
                    }}
                  />
                }
                <ActionRowButton
                  btnStyle='danger'
                  handler={removeServer}
                  handlerParam={server}
                  icon='delete'
                  style={{
                    marginRight: '0.5em'
                  }}
                />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <form
        className='form-inline'
        id='form-add-server'
      >
        <div className='form-group'>
          <input
            className='form-control'
            placeholder='address[:port]'
            ref='host'
            required
            type='text'
          />
        </div>
        <div className='form-group'>
          <input
            className='form-control'
            placeholder='user'
            ref='username'
            required
            type='text'
          />
        </div>
        <div className='form-group'>
          <Password
            placeholder='password'
            ref='password'
            required
          />
        </div>
        <ActionButton
          btnStyle='primary'
          form='form-add-server'
          handler={this._addServer}
          icon='save'
        >
          Connect
        </ActionButton>
      </form>
    </div>
  }
}<commit_msg>feat(Servers): add spaces in creation form<commit_after>import _ from 'messages'
import ActionButton from 'action-button'
import ActionRowButton from 'action-row-button'
import map from 'lodash/map'
import React, { Component } from 'react'
import { Password } from 'form'
import { Password as EditablePassword, Text } from 'editable'
import {
  addServer,
  editServer,
  connectServer,
  disconnectServer,
  removeServer,
  subscribeServers
} from 'xo'
import {
  connectStore
} from 'utils'

@connectStore()
export default class Servers extends Component {
  componentWillMount () {
    this.componentWillUnmount = subscribeServers(servers => {
      this.setState({ servers })
    })
  }

  _addServer = async () => {
    const { host, password, username } = this.refs

    await addServer(host.value, username.value, password.value)

    host.value = username.value = password.value = ''
  }

  render () {
    const { state } = this
    const servers = state && state.servers

    return <div className='container-fluid'>
      <table className='table table-striped'>
        <thead>
          <tr>
            <td>{_('serverHost')}</td>
            <td>{_('serverUsername')}</td>
            <td>{_('serverPassword')}</td>
            <td>{_('serverAction')}</td>
          </tr>
        </thead>
        <tbody>
          {map(servers, server => (
            <tr key={server.id}>
              <td>
                <Text
                  value={server.host}
                  onChange={host => editServer(server, { host })}
                  placeholder='address[:port]'
                />
              </td>
              <td>
                <Text
                  value={server.username}
                  onChange={username => editServer(server, { username })}
                  placeholder='user'
                />
              </td>
              <td>
                <EditablePassword
                  value=''
                  onChange={password => editServer(server, { password })}
                  placeholder='password'
                />
              </td>
              <td>
                {server.status === 'disconnected'
                  ? <ActionRowButton
                    btnStyle='secondary'
                    handler={connectServer}
                    handlerParam={server}
                    icon='connect'
                    style={{
                      marginRight: '0.5em'
                    }}
                  />
                  : <ActionRowButton
                    btnStyle='warning'
                    handler={disconnectServer}
                    handlerParam={server}
                    icon='disconnect'
                    style={{
                      marginRight: '0.5em'
                    }}
                  />
                }
                <ActionRowButton
                  btnStyle='danger'
                  handler={removeServer}
                  handlerParam={server}
                  icon='delete'
                  style={{
                    marginRight: '0.5em'
                  }}
                />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <form
        className='form-inline'
        id='form-add-server'
      >
        <div className='form-group'>
          <input
            className='form-control'
            placeholder='address[:port]'
            ref='host'
            required
            type='text'
          />
        </div>
        {' '}
        <div className='form-group'>
          <input
            className='form-control'
            placeholder='user'
            ref='username'
            required
            type='text'
          />
        </div>
        {' '}
        <div className='form-group'>
          <Password
            placeholder='password'
            ref='password'
            required
          />
        </div>
        {' '}
        <ActionButton
          btnStyle='primary'
          form='form-add-server'
          handler={this._addServer}
          icon='save'
        >
          Connect
        </ActionButton>
      </form>
    </div>
  }
}
{'fraction_non_alphanumeric': 0.11543607833596886, 'fraction_numerical': 0.0014596764383894903, 'mean_word_length': 1.2114039806347499, 'pattern_counts': {'":': 0, '<': 97, '<?xml version=': 0, '>': 109, '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': '3295089', 'n_tokens_mistral': 2087, 'n_tokens_neox': 1993, 'n_words': 383}