242 lines
8.8 KiB
Plaintext
242 lines
8.8 KiB
Plaintext
<% 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>
|
|
|