jam-cloud/web/app/assets/javascripts/react-components/landing/SchoolStudentLandingPage.js.jsx.coffee

context = window
rest = context.JK.Rest()

@SchoolStudentLandingPage = React.createClass({

  render: () ->
    if this.props.school.large_photo_url?
      logo = `<div className="school-logo">
        <img src={this.props.school.large_photo_url}/>
      </div>`
    loggedIn = context.JK.currentUserId? && !this.props.preview

    if this.state.done
      ctaButtonText = 'sending you in...'
    else if this.state.processing
      ctaButtonText = 'hold on...'
    else
      if loggedIn
        ctaButtonText = "ALREADY A JAMKAZAM USER"
      else
        ctaButtonText = "SIGN UP"

    if loggedIn
      register =
        `<div className="register-area jam-class">
          <button className={classNames({'cta-button' : true, 'processing': this.state.processing})}
                  onClick={this.ctaClick}>{ctaButtonText}</button>
        </div>`
    else
      if this.state.loginErrors?
        for key, value of this.state.loginErrors
          break

        errorText = context.JK.getFullFirstError(key, this.state.loginErrors,
          {email: 'Email', password: 'Password', 'terms_of_service': 'The terms of service'})

      register = `<div className="register-area jam-class">
        <div className={classNames({'errors': true, 'active': this.state.loginErrors})}>
          {errorText}
        </div>
        <form className="school-signup-form">
          <div className="field">
            <label>Email: </label><input type="text" defaultValue={this.props.defaultEmail} name="email"/>
          </div>
          <div className="field">
            <label>Password: </label><input type="password" name="password"/>
          </div>

          <div className="clearall"/>
          <input className="terms-checkbox" type="checkbox" name="terms"/><label className="terms-help">I have read and
          agree to the JamKazam <a href="/corp/terms" target="_blank">terms of service</a></label>

          <div className="clearall"/>
          <button className={classNames({'cta-button' : true, 'processing': this.state.processing})}
                  onClick={this.ctaClick}>{ctaButtonText}</button>
        </form>
        <div className="privacy-policy">
          We will not share your email.<br/>See our <a href="/corp/privacy" target="_blank">privacy policy</a>.
        </div>
      </div>`

    if !this.props.school.education
      explain = `<p>
        Please register here if you are currently a student with {this.props.school.name}, and if you plan to take
        online music lessons from {this.props.school.name} using the JamKazam service. When you have registered, we
        will
        email you instructions to set up your profile, and we'll schedule a brief online training session to make sure
        you are comfortable using the service and ready to go for your first online lesson.
      </p>`
    else
      explain = `<p>
        Please register here if you are currently a student with {this.props.school.name}, and if you are interested in
        taking online music lessons using JamKazam. When you have registered, someone from JamKazam will contact you to
        answer any questions you have about our online lesson service, and to help you decide if this is service is a
        good option for you. If it is, we'll help you get set up and ready to go, and will get into an online session to
        make sure everything is working properly.
      </p>`

    `<div className="container">
      <div className="header-area">
        <div className="header-content">
          {logo}

          <div className="headers">
            <h1>REGISTER AS A STUDENT</h1>

            <h2>with {this.props.school.name}</h2>
          </div>
          <br className="clearall"/>
        </div>
      </div>

      <div className="explain">
        {explain}
      </div>
      {register}
    </div>`

  getInitialState: () ->
    {loginErrors: null, processing: false}

  componentDidMount: () ->
    $root = $(this.getDOMNode())
    $checkbox = $root.find('.terms-checkbox')
    context.JK.checkbox($checkbox)

# add item to cart, create the user if necessary, and then place the order to get the free JamTrack.
  ctaClick: (e) ->
    e.preventDefault()

    return if @state.processing

    @setState({loginErrors: null})

    loggedIn = context.JK.currentUserId?

    if loggedIn
      window.location.href = "/client#/home"
      #window.location.href = "/client#/profile/#{context.JK.currentUserId}"
    else
      @createUser()

    @setState({processing: true})

  createUser: () ->
    $form = $('.school-signup-form')
    email = $form.find('input[name="email"]').val()
    password = $form.find('input[name="password"]').val()
    terms = $form.find('input[name="terms"]').is(':checked')

    rest.signup({
      email: email,
      password: password,
      first_name: null,
      last_name: null,
      terms: terms,
      student: true,
      school_invitation_code: this.props.invitation_code,
      school_id: this.props.school.id
    })
    .done((response) =>
      @setState({done: true})

      redirectTo = $.QueryString['redirect-to'];
      if redirectTo
        logger.debug("redirectTo:" + redirectTo);
        window.location.href = redirectTo;

      else
        logger.debug("default post-login path");
        window.location.href = "/client#/home"
    ).fail((jqXHR) =>
      @setState({processing: false})
      if jqXHR.status == 422
        response = JSON.parse(jqXHR.responseText)
        if response.errors
          @setState({loginErrors: response.errors})
        else
          context.JK.app.notify({title: 'Unknown Signup Error', text: jqXHR.responseText})
      else
        context.JK.app.notifyServerError(jqXHR, "Unable to Sign Up")
    )
})