<commit_before>import BaseComponent from 'base-component'
import React from 'react'

import _ from '../../intl'
import SingleLineRow from '../../single-line-row'
import { Col } from '../../grid'
import getEventValue from '../../get-event-value'

export default class NewSshKeyModalBody extends BaseComponent {
  get value() {
    return this.state
  }

  _onKeyChange = event => {
    const key = getEventValue(event)
    const splitKey = key.split(' ')
    if (!this.state.title && splitKey.length === 3) {
      this.setState({ title: splitKey[2].split('\n')[0] })
    }
    this.setState({ key })
  }

  render() {
    const { key, title } = this.state

    return (
      <div>
        <div className='pb-1'>
          <SingleLineRow>
            <Col size={4}>{_('title')}</Col>
            <Col size={8}>
              <input className='form-control' onChange={this.linkState('title')} type='text' value={title || ''} />
            </Col>
          </SingleLineRow>
        </div>
        <div className='pb-1'>
          <SingleLineRow>
            <Col size={4}>{_('key')}</Col>
            <Col size={8}>
              <textarea className='form-control' onChange={this._onKeyChange} rows={10} value={key || ''} />
            </Col>
          </SingleLineRow>
        </div>
      </div>
    )
  }
}<commit_msg>feat(xo-web): SSH key input monospaced<commit_after>import BaseComponent from 'base-component'
import React from 'react'

import _ from '../../intl'
import SingleLineRow from '../../single-line-row'
import { Col } from '../../grid'
import getEventValue from '../../get-event-value'

export default class NewSshKeyModalBody extends BaseComponent {
  get value() {
    return this.state
  }

  _onKeyChange = event => {
    const key = getEventValue(event)
    const splitKey = key.split(' ')
    if (!this.state.title && splitKey.length === 3) {
      this.setState({ title: splitKey[2].split('\n')[0] })
    }
    this.setState({ key })
  }

  render() {
    const { key, title } = this.state

    return (
      <div>
        <div className='pb-1'>
          <SingleLineRow>
            <Col size={4}>{_('title')}</Col>
            <Col size={8}>
              <input className='form-control' onChange={this.linkState('title')} type='text' value={title || ''} />
            </Col>
          </SingleLineRow>
        </div>
        <div className='pb-1'>
          <SingleLineRow>
            <Col size={4}>{_('key')}</Col>
            <Col size={8}>
              <textarea
                className='form-control text-monospace'
                onChange={this._onKeyChange}
                rows={10}
                value={key || ''}
              />
            </Col>
          </SingleLineRow>
        </div>
      </div>
    )
  }
}
{'fraction_non_alphanumeric': 0.1721014492753623, 'fraction_numerical': 0.007971014492753623, 'mean_word_length': 1.9880952380952381, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 45, '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': '4040467', 'n_tokens_mistral': 841, 'n_tokens_neox': 843, 'n_words': 181}