<commit_before>React = require 'react'
BS = require 'react-bootstrap'
ENTER = 'Enter'

Course = require './model'
ErrorList = require './error-list'
{AsyncButton} = require 'openstax-react-components'

ConfirmJoin = React.createClass

  propTypes:
    title: React.PropTypes.string.isRequired
    course: React.PropTypes.instanceOf(Course)
    optionalStudentId: React.PropTypes.bool

  startConfirmation: ->
    @props.course.confirm(@refs.input.getValue())

  onKeyPress: (ev) ->
    @startConfirmation() if ev.key is ENTER

  onConfirmKeyPress: (ev) ->
    @startConfirmation() if ev.key is ENTER

  cancelConfirmation: ->
    @props.course.resetToBlankState()

  render: ->
    label = if @props.optionalStudentId
      "Update school issued ID (leave blank to leave unchanged):"
    else
      "Enter your school issued ID:"

    <div className="form-group">
      <h3 className="text-center">
        {@props.title}
      </h3>
      <ErrorList course={@props.course} />
      <div className="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">

        <BS.Input type="text" ref="input" label={label}
          placeholder="School issued ID" autoFocus
          onKeyPress={@onKeyPress}
        />

        <div className="text-center">
          <button className="btn"
            onClick={@cancelConfirmation}>Cancel</button>

           <AsyncButton
             className="btn btn-success"
             isWaiting={@props.course.isBusy}
             waitingText={'Confirming…'}
             onClick={@startConfirmation}
             style={marginLeft: '3rem'}
           >
            Confirm
          </AsyncButton>
        </div>
      </div>
    </div><commit_msg>Move message onto new line for spacing<commit_after>React = require 'react'
BS = require 'react-bootstrap'
ENTER = 'Enter'

Course = require './model'
ErrorList = require './error-list'
{AsyncButton} = require 'openstax-react-components'

ConfirmJoin = React.createClass

  propTypes:
    title: React.PropTypes.string.isRequired
    course: React.PropTypes.instanceOf(Course)
    optionalStudentId: React.PropTypes.bool

  startConfirmation: ->
    @props.course.confirm(@refs.input.getValue())

  onKeyPress: (ev) ->
    @startConfirmation() if ev.key is ENTER

  onConfirmKeyPress: (ev) ->
    @startConfirmation() if ev.key is ENTER

  cancelConfirmation: ->
    @props.course.resetToBlankState()

  render: ->
    label = if @props.optionalStudentId
      <span>
        Update school issued ID<br/>
        (<i>leave blank to leave unchanged</i>):
        </span>
    else
      "Enter your school issued ID:"

    <div className="form-group">
      <h3 className="text-center">
        {@props.title}
      </h3>
      <ErrorList course={@props.course} />
      <div className="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">

        <BS.Input type="text" ref="input" label={label}
          placeholder="School issued ID" autoFocus
          onKeyPress={@onKeyPress}
        />

        <div className="text-center">
          <button className="btn"
            onClick={@cancelConfirmation}>Cancel</button>

           <AsyncButton
             className="btn btn-success"
             isWaiting={@props.course.isBusy}
             waitingText={'Confirming…'}
             onClick={@startConfirmation}
             style={marginLeft: '3rem'}
           >
            Confirm
          </AsyncButton>
        </div>
      </div>
    </div>
{'fraction_non_alphanumeric': 0.13122827346465818, 'fraction_numerical': 0.005214368482039398, 'mean_word_length': 2.4738430583501008, 'pattern_counts': {'":': 0, '<': 36, '<?xml version=': 0, '>': 46, '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': '4796266', 'n_tokens_mistral': 1042, 'n_tokens_neox': 1017, 'n_words': 215}