       </p>
     </form>
 
+  tooShort: ->
+    @state.new.length < MIN_PASSWORD_LENGTH
+
+  doesntMatch: ->
+    @state.new isnt @state.confirmation
+
   handleSubmit: (e) ->
     e.preventDefault()
 
-    current = @refs.old.getDOMNode().value
-    replacement = @refs.new.getDOMNode().value
+    current = @state.old
+    replacement = @state.new
 
     @setState
       inProgress: true

    user: {}

  getInitialState: ->
    inProgress: false
    success: false
    error: null

  render: ->
    <form onSubmit={@handleSubmit}>
      <p>
        <strong>Change your password</strong>
      </p>

        <tbody>
          <tr>
            <td>Current password</td>
            <td><input type="password" className="standard-input" size="20" onChange={(e) => @setState old: e.target.value} /></td>
          </tr>
          <tr>
            <td>New password</td>
            <td>
              <input type="password" className="standard-input" size="20" onChange={(e) => @setState new: e.target.value} />
              {if @state.new.length isnt 0 and @tooShort()
                <small className="form-help error">That’s too short</small>}
            </td>
          </tr>
          <tr>
            <td>Confirm new password</td>
            <td>
              <input type="password" className="standard-input" size="20" onChange={(e) => @setState confirmation: e.target.value} />
              {if @state.confirmation.length >= @state.new.length - 1 and @doesntMatch()
                <small className="form-help error">These don’t match</small>}
            </td>
          </tr>
        </tbody>
      </table>

      <p>
        <button type="submit" className="standard-button" disabled={not @state.old or not @state.new or @tooShort() or @doesntMatch() or @state.inProgress}>Change</button>{' '}

        {if @state.inProgress
          <i className="fa fa-spinner fa-spin form-help"></i>
        else if @state.success
