jam-cloud/web/app/views/users/new.html.erb

<% provide(:page_name, 'register') %>
<% provide(:title, 'Register') %>
<% provide(:description, 'Sign up for your JamKazam account to play music with others online in real time and network with musicians.') %>

    <div class="content-wrapper register-page">

  <%= form_for(@user, :url => @signup_postback, :method => :post) do |f| %>

        <div class="left-side">

        <h2 class="create-account-header"><div class="badge-number">1</div>Create your free JamKazam account</h2>


          <div class="register-container">
          <div class="register-as">
          Register as a:
          <%= f.radio_button :musician, true, :class => "register-as register-musician" %>
          Musician

          <%= f.radio_button :musician, false, :class => "register-as register-fan" %>
          Fan
          </div>

          <div class="field first_name">
            <%= f.label :first_name, "First Name:" %>
            <%= f.text_field :first_name %>
          </div>

          <div class="field last_name">
            <%= f.label :last_name, "Last Name:" %>
            <%= f.text_field :last_name %>
          </div>


          <div class="field email">
            <%= f.label :email, "Email Address:" %>
            <%= f.text_field :email %>
          </div>


          <div class="field password">
            <%= f.label :password, "Choose a Password:" %>
            <%= f.password_field :password %>
          </div>

          <div class="field password_confirmation">
            <%= f.label :password_confirmation, "Verify Password:" %>
            <%= f.password_field :password_confirmation %>
          </div>


          <div class="field terms_of_service">
            <small>
              <%= f.check_box :terms_of_service %>
              <span>I have read and agree to the JamKazam <%= link_to "terms of service", corp_terms_path, :rel => "external" %>
                .</span>
            </small>
          </div>

          <div class="field recaptcha">
            <% if Rails.application.config.recaptcha_enable %>
              <div id="recaptcha_select" name="recaptcha_response_field" class="g-recaptcha" data-sitekey="<%=Rails.application.config.recaptcha_public_key%>" data-callback="recaptcha_success" data-expired-callback="recaptcha_expired">
              </div>
            <% end %>
          </div>

          <br clear="all"/>
        </div>
          </div>
        <div class="right-side">
          <h2 class="subscription-type-header"><div class="badge-number">2</div>Select your subscription plan</h2>

          <div class="subscription-options">
            <div class="radio-field">
              <%= f.radio_button :desired_plan_code, '', :checked => true %>
              <label for="male">Free Plan ($0.00/month)</label>
            </div>
            <div class="radio-field">
              <%= f.radio_button :desired_plan_code, 'jamsubsilver'%>
              <label for="male">Silver Plan ($4.99/month)</label>
            </div>
            <div class="radio-field">
              <%= f.radio_button :desired_plan_code, 'jamsubgold'  %>
              <label for="male">Gold Plan ($9.99/month)</label>
            </div>
            <div class="radio-field">
              <%= f.radio_button :desired_plan_code, 'jamsubplatinum'%>
              <label for="male">Platinum Plan ($19.99/month)</label>
            </div>

            <div class="comparison-block">
              <a href="https://jamkazam.freshdesk.com/support/solutions/articles/66000122535-what-are-jamkazam-s-free-vs-premium-features-" target="_blank">compare plans</a>
              <div class="pricing-info">New users have access to the Gold plan free for the first 30 days. The plan you select will take effect after the first 30-day trial period. Taxes apply to all non-free plans.</div>
            </div>

            <div class="actions">
              <%= f.submit "CREATE ACCOUNT", class: "button-orange disabled", id:"create-account-submit"%>
              <%= link_to "CANCEL", root_path, :class=>'button-grey' %>
            </div>

          </div>

        </div>

      <% end %>

      </div>

<!-- end inner -->

<!-- end overlay content -->




<script type="text/javascript">
    window.signup.handle_location_changes()

    window.signup.handle_register_as_changes()

    function recaptcha_success(response) {
      $("#create-account-submit").removeClass("disabled")
    }

    function recaptcha_expired(response) {
      $("#create-account-submit").addClass("disabled")
    }

    function get_first_error(field) {
        if (errors[field] && errors[field].length > 0) {
            return errors[field][0]
        }
        else {
            return null;
        }
    }

    // populate musician instruments from previous submit, if applicable
    if (window.gon && gon.musician_instruments) {
        $(gon.musician_instruments).each(function (index, value) {
            $('#' + value.instrument_id.replace(" ", "") + "_checkbox").attr("checked", true);
            $('#' + value.instrument_id.replace(" ", "") + "_proficiency").val(value.proficiency_level.toString())
        })
    }
    if(window.gon) {
      var $radios = $('input:radio[name="jam_ruby_user[desired_plan_code]"]');
      if(gon.plan_code) {
        $radios.filter(gon.plan_code, true)
      }
      else {
        $radios.filter('[value="<%= @plan_code %>"]').prop('checked', true)
      }
    }

    // show signup errors, if any
    if (window.gon && gon.signup_errors) {
        var errors =
        <%= @user.errors.to_json.html_safe %>

        var email = get_first_error("email")
        var first_name = get_first_error("first_name")
        var last_name = get_first_error("last_name")
        var musician_instruments = get_first_error("musician_instruments")
        var password = get_first_error("password")
        var password_confirmation = get_first_error("password_confirmation")
        var terms_of_service = get_first_error("terms_of_service")
        var country = get_first_error("country")
        var state = get_first_error("state")
        var city = get_first_error("city")
        var recaptcha = get_first_error("recaptcha")


        if (email) {
            var emailInput = $('#jam_ruby_user_email');
            emailInput.closest('div.field').addClass('error')
            emailInput.after("<div class='error-text'>" + email + "</div>")
        }

        if (first_name) {
            var firstNameInput = $('#jam_ruby_user_first_name');
            firstNameInput.closest('div.field').addClass('error')
            firstNameInput.after("<div class='error-text'>" + first_name + "</div>")
        }

        if (last_name) {
            var lastNameInput = $('#jam_ruby_user_last_name');
            lastNameInput.closest('div.field').addClass('error')
            lastNameInput.after("<div class='error-text'>" + last_name + "</div>")
        }

        if (country) {
            var countryInput = $('#country_select');
            countryInput.closest('div.field').addClass('error')
            countryInput.after("<div class='error-text'>" + country + "</div>")
        }

        if (state) {
            var stateInput = $('#region_select');
            stateInput.closest('div.field').addClass('error')
            stateInput.after("<div class='error-text'>" + state + "</div>")
        }

        if (city) {
            var cityInput = $('#city_select');
            cityInput.closest('div.field').addClass('error')
            cityInput.after("<div class='error-text'>" + city + "</div>")
        }

        if (recaptcha) {
            var recaptchaInput = $('#recaptcha_select');
            recaptchaInput.closest('div.field').addClass('error')
            recaptchaInput.after("<div class='error-text'>" + recaptcha + "</div>")
        }

        if (musician_instruments) {
            var musicianInstrumentsInput = $('#instrument_selector');
            musicianInstrumentsInput.closest('div.ftue-instrumentlist-wrapper').addClass('error')
            musicianInstrumentsInput.closest('div.ftue-instrumentlist').after("<div class='error-text'>" + musician_instruments + "</div>")
        }

        if (password) {
            var passwordInput = $('#jam_ruby_user_password');
            passwordInput.closest('div.field').addClass('error')
            passwordInput.after("<div class='error-text'>" + password + "</div>")
        }

        if (password_confirmation) {
            var passwordConfirmationInput = $('#jam_ruby_user_password_confirmation');
            passwordConfirmationInput.closest('div.field').addClass('error')
            passwordConfirmationInput.after("<div class='error-text'>" + password_confirmation + "</div>")
        }

        if (terms_of_service) {
            var termsOfServiceInput = $('#jam_ruby_user_terms_of_service');
            termsOfServiceInput.closest('small').addClass('error')
            // termsOfServiceInput.closest('small').after("<div class='error-text'>" + terms_of_service + "</div>")
        }
    }

</script>