<commit_before># @cjsx React.DOM

React = require 'react'
InPlaceForm = require '../components/in-place-form'
LoadingIndicator = require '../components/loading-indicator'

CHECKING = 'CHECKING'

module.exports = React.createClass
  displayName: 'RegisterForm'

  getInitialState: -> {}

  render: ->
    {badLoginChars, loginTaken, passwordTooShort, passwordsDontMatch} = @state
    email = @refs.email?.getDOMNode().value

    <InPlaceForm>
      <div>
        <label>
          <div>User name</div>
          <input type="text" name="login" onChange={@handleLoginChange} ref="login" autoFocus="autoFocus" />
          &ensp;
          {if badLoginChars?.length > 0
            <span className="form-help error">Don't use weird characters ({badLoginChars.join ', '}).</span>
          else if loginTaken is true
            <span className="form-help error">Sorry, that login is taken. <a href="#/reset-password?email=#{email || '?'}">Forget your password?</a></span>
          else if loginTaken is false
            <span className="form-help success">Looks good.</span>
          else if loginTaken is CHECKING
            <LoadingIndicator className="form-help" />}
        </label>
      </div>
      <br />
      <div>
        <label>
          <div>Password</div>
          <input type="password" name="password" ref="password" onChange={@handlePasswordChange} />
          &ensp;
          {if passwordTooShort
            <span className="form-help error">That password is too short.</span>}
        </label>
      </div>
      <br />
      <div>
        <label>
          <div>Confirm password</div>
          <input type="password" name="confirmed_password" ref="confirmedPassword" onChange={@handlePasswordChange} />
          &ensp;
          {if passwordsDontMatch is true
            <span className="form-help error">These passwords don't match!</span>
          else if passwordsDontMatch is false
            <span className="form-help success">They match!</span>}
        </label>
      </div>
      <br />
      <div>
        <label>
          <div>Email</div>
          <input type="text" name="email" ref="email" onChange={@forceUpdate.bind this, null} />
          &ensp;
        </label>
      </div>
      <br />
      <div>
        <label>
          <div>Real name</div>
          <input type="text" name="real_name" />
          &ensp;
          <div className="form-help">We'll use this to give you credit in scientific papers, posters, etc.</div>
        </label>
      </div>
      <br />
      <div>
        <label>
          <input type="checkbox" name="agrees_to_privacy_policy" ref="agreesToPrivacyPolicy" onChange={@forceUpdate.bind this, null} />
          You agree to our <a href="#">privacy policy</a> <span className="form-help">(required)</span>.
        </label>
      </div>
      <br />
      <div>
        <button type="submit" disabled={not @isFormValid()}>Register</button>
      </div>
    </InPlaceForm>

  handleLoginChange: ->
    login = @refs.login.getDOMNode().value

    exists = login.length isnt 0
    badChars = (char for char in login.split('') when char isnt encodeURIComponent char)

    @setState
      badLoginChars: badChars
      loginTaken: null

    if exists and badChars.length is 0
      @setState
        loginTaken: CHECKING

      checkTaken = new Promise (resolve) ->
        matches = []
        if Math.random() < 0.5
          matches.push true
        setTimeout resolve.bind(this, matches), 1000

      checkTaken.then (matches) =>
        @setState
          loginTaken: matches.length isnt 0

  handlePasswordChange: ->
    password = @refs.password.getDOMNode().value
    confirmedPassword = @refs.confirmedPassword.getDOMNode().value

    exists = password.length isnt 0
    longEnough = password.length > 5
    asLong = confirmedPassword.length >= password.length
    matches = password is confirmedPassword

    @setState
      passwordTooShort: if exists then not longEnough
      passwordsDontMatch: if exists and asLong then not matches

  isFormValid: ->
    {badLoginChars, loginTaken, passwordsDontMatch} = @state
    agreesToPrivacyPolicy = @refs.agreesToPrivacyPolicy?.getDOMNode().checked

    console.log (badLoginChars?.length is 0), (loginTaken is false), (passwordsDontMatch is false), agreesToPrivacyPolicy
    (badLoginChars?.length is 0) and (loginTaken is false) and (passwordsDontMatch is false) and agreesToPrivacyPolicy<commit_msg>Stub out a submit handler<commit_after># @cjsx React.DOM

React = require 'react'
InPlaceForm = require '../components/in-place-form'
LoadingIndicator = require '../components/loading-indicator'
{dispatch} = require '../lib/dispatcher'

CHECKING = 'CHECKING'

module.exports = React.createClass
  displayName: 'RegisterForm'

  getInitialState: -> {}

  render: ->
    {badLoginChars, loginTaken, passwordTooShort, passwordsDontMatch} = @state
    email = @refs.email?.getDOMNode().value

    <InPlaceForm onSubmit={@handleSubmit}>
      <div>
        <label>
          <div>User name</div>
          <input type="text" name="login" onChange={@handleLoginChange} ref="login" autoFocus="autoFocus" />
          &ensp;
          {if badLoginChars?.length > 0
            <span className="form-help error">Don't use weird characters ({badLoginChars.join ', '}).</span>
          else if loginTaken is true
            <span className="form-help error">Sorry, that login is taken. <a href="#/reset-password?email=#{email || '?'}">Forget your password?</a></span>
          else if loginTaken is false
            <span className="form-help success">Looks good.</span>
          else if loginTaken is CHECKING
            <LoadingIndicator className="form-help" />}
        </label>
      </div>
      <br />
      <div>
        <label>
          <div>Password</div>
          <input type="password" name="password" ref="password" onChange={@handlePasswordChange} />
          &ensp;
          {if passwordTooShort
            <span className="form-help error">That password is too short.</span>}
        </label>
      </div>
      <br />
      <div>
        <label>
          <div>Confirm password</div>
          <input type="password" name="confirmed_password" ref="confirmedPassword" onChange={@handlePasswordChange} />
          &ensp;
          {if passwordsDontMatch is true
            <span className="form-help error">These passwords don't match!</span>
          else if passwordsDontMatch is false
            <span className="form-help success">They match!</span>}
        </label>
      </div>
      <br />
      <div>
        <label>
          <div>Email</div>
          <input type="text" name="email" ref="email" onChange={@forceUpdate.bind this, null} />
          &ensp;
        </label>
      </div>
      <br />
      <div>
        <label>
          <div>Real name</div>
          <input type="text" name="real_name" ref="realName" />
          &ensp;
          <div className="form-help">We'll use this to give you credit in scientific papers, posters, etc.</div>
        </label>
      </div>
      <br />
      <div>
        <label>
          <input type="checkbox" name="agrees_to_privacy_policy" ref="agreesToPrivacyPolicy" onChange={@forceUpdate.bind this, null} />
          You agree to our <a href="#/privacy">privacy policy</a> <span className="form-help">(required)</span>.
        </label>
      </div>
      <br />
      <div>
        <button type="submit" disabled={not @isFormValid()}>Register</button>
      </div>
    </InPlaceForm>

  handleLoginChange: ->
    login = @refs.login.getDOMNode().value

    exists = login.length isnt 0
    badChars = (char for char in login.split('') when char isnt encodeURIComponent char)

    @setState
      badLoginChars: badChars
      loginTaken: null

    if exists and badChars.length is 0
      @setState
        loginTaken: CHECKING

      checkTaken = new Promise (resolve) ->
        matches = []
        if Math.random() < 0.5
          matches.push true
        setTimeout resolve.bind(this, matches), 1000

      checkTaken.then (matches) =>
        @setState
          loginTaken: matches.length isnt 0

  handlePasswordChange: ->
    password = @refs.password.getDOMNode().value
    confirmedPassword = @refs.confirmedPassword.getDOMNode().value

    exists = password.length isnt 0
    longEnough = password.length > 5
    asLong = confirmedPassword.length >= password.length
    matches = password is confirmedPassword

    @setState
      passwordTooShort: if exists then not longEnough
      passwordsDontMatch: if exists and asLong then not matches

  isFormValid: ->
    {badLoginChars, loginTaken, passwordsDontMatch} = @state
    agreesToPrivacyPolicy = @refs.agreesToPrivacyPolicy?.getDOMNode().checked

    console.log (badLoginChars?.length is 0), (loginTaken is false), (passwordsDontMatch is false), agreesToPrivacyPolicy
    (badLoginChars?.length is 0) and (loginTaken is false) and (passwordsDontMatch is false) and agreesToPrivacyPolicy

  handleSubmit: ->
    login = @refs.login.getDOMNode().value
    password = @refs.password.getDOMNode().value
    confirmedPassword = @refs.confirmedPassword.getDOMNode().value
    email = @refs.email.getDOMNode().value
    realName = @refs.realName.getDOMNode().value
    agreesToPrivacyPolicy = @refs.agreesToPrivacyPolicy.getDOMNode().checked

    dispatch 'users:create', {login, password, confirmedPassword, email, realName, agreesToPrivacyPolicy}
{'fraction_non_alphanumeric': 0.1254506892895016, 'fraction_numerical': 0.0029692470837751855, 'mean_word_length': 2.6231271609681137, 'pattern_counts': {'":': 0, '<': 151, '<?xml version=': 0, '>': 170, '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': '7126010', 'n_tokens_mistral': 2788, 'n_tokens_neox': 2699, 'n_words': 675}