{#{% extends "_layouts/base.html" %}#}
{% extends request.master_template %}
{% load as_horizontal_form from bootstrap %}
{% load honeypot %}
{% load i18n %}
{% block meta_title %}Get started and create an account with us today! | HRCP{% endblock meta_title %}
{% block meta_description %}Create an account to access our products, study guides and our practice tests to help you prepare for your next HRCP exam.{% endblock %}
{% block css %}
<style type='text/css'>
#{{ request.subdomain}}_new_user_form ul {
list-style: none;
margin-left: 20px;
padding-left: 0;
font-size: 14px; }
#{{ request.subdomain}}_new_user_form ul li {
padding: 1px 0;
margin: 10px 0; }
#{{ request.subdomain}}_new_user_form ul li label {
display: inline-block;
width: 150px;
text-align: right;
padding-right: 5px;
margin-right: 5px;
color: #444;
font-weight: bold; }
#{{ request.subdomain}}_new_user_form ul li input {
vertical-align: top; }
#{{ request.subdomain}}_new_user_form ul li.submit_row {
margin-left: 155px;
padding-left: 10px; }
#{{ request.subdomain}}_new_user_form ul li #username_in_use {
color: #d30a0a;
font-size: 12px;
margin-left: 10px;
line-height: 22px;
display: none; }
</style>
{% endblock css %}
{% block content %}
<div class='container'>
<h1 style='margin:50px 0;'>{% trans "Create Your Account" %}</h1>
<div id='password_check' style='float:right; position:absolute; width:275px; padding:20px; margin:60px 0 0 400px; border 1px solid #CCC;'>
{% trans "Passwords must be 8 characters long." %}
<span id='required_notice' style='display:none;'>
<br/>
{% trans "Please fill out all required fields!" %}
</span>
{% if form.non_field_errors %}
<div class='error generic'>
{% for err in form.non_field_errors %}
{{err}}<br/>
{% endfor %}
</div>
{% endif %}
</div>
{% if request.subdomain == 'hrcp' %}<div style='float:right; position:absolute; width:275px; padding:20px; margin:275px 0 0 400px; border 1px solid #CCC;'>{% trans "This information is collected for statistical purposes in order to help us better understand our customers." %}</div>{% endif %}
<div class='ui-corner-all ui-widget-content pad20' style='overflow:auto;clear:both;'>
<form method='POST' action='.' name='new_user_form' id='{{ request.subdomain }}_new_user_form' class='signup-form domain_{{request.subdomain}}'>
{% csrf_token %}
<input type="hidden" name="form_ts" value="{{ form_ts }}" />
{% render_honeypot_field %}
<ul>
<li>
{% if form.username.errors %}
<div class='error'>
{% for err in form.username.errors %}{{ err }}<br/>{% endfor %}
</div>
{% endif %}
<label for='id_username'>{% trans "Username" %}<span class='required'>*</span></label>
{{ form.username }}
<span id='username_in_use'>{% trans "This username is already in use" %}</span>
</li>
<li>
{% if form.password1.errors %}
<div class='error'>{% for err in form.password1.errors %}{% trans err %}{% endfor %}</div>
{% endif %}
<label for='id_password1'>{% trans "Password" %}<span class='required'>*</span></label>
{{ form.password1 }}
</li>
<li>
{% if form.password2.errors %}
<div class='error'>{% for err in form.password2.errors %}{% trans err %}{% endfor %}</div>
{% endif %}
<label for='id_password2'>{% trans "Confirm Password" %}<span class='required'>*</span></label>
{{ form.password2 }}
</li>
<li>
{% if form.first_name.errors %}
<div class='error'>{% for err in form.first_name.errors %}{% trans err %}{% endfor %}</div>
{% endif %}
<label for='id_first_name'>{% trans "First Name" %}<span class='required'>*</span></label>
{{ form.first_name }}
</li>
<li>
{% if form.last_name.errors %}
<div class='error'>{% for err in form.last_name.errors %}{% trans err %}{% endfor %}</div>
{% endif %}
<label for='id_last_name'>{% trans "Last Name" %}<span class='required'>*</span></label>
{{ form.last_name }}
</li>
<li>
{% if form.email.errors %}
<div class='error'>{% for err in form.email.errors %}{% trans err %}{% endfor %}</div>
{% endif %}
<label for='id_email'>{% trans "Email Address" %}<span class='required'>*</span></label>
{{ form.email }}
</li>
<li>
{% if form.email2.errors %}
<div class='error'>{% for err in form.email2.errors %}{% trans err %}{% endfor %}</div>
{% endif %}
<label for='id_email2'>{% trans "Confirm Email Address" %}<span class='required'>*</span></label>
{{ form.email2 }}
</li>
{% if request.subdomain == 'hrcp' %}
<li>
<label for='id_education_level'>{% trans "Education Level" %}</label>
<select name="education_level" id="id_education_level">
{% for k,v in form.fields.education_level.choices %}
<option value='{{ k }}'>{% trans v %}</option>
{% endfor %}
</select>
</li>
<li>
<label for='title'>{% trans "Job Title" %}</label>
{{ form.title }}
</li>
<li>
<label for='years'>{% trans "Years of Experience" %}</label>
{{ form.years_of_experience }}
</li>
<li>
<label for='exam'>{% trans "Exam" %}</label>
{{ form.exam }}
</li>
<li>
<label for='test_date'>{% trans "Test Date" %}</label>
<select name='test_month' id='test_month'>
<option value=''>-- {% trans "SELECT MONTH" %} --</option>
{% for k,the_month in month_options %}
<option value='{{ k }}'>{% trans the_month %}</option>
{% endfor %}
</select>
<select name='test_year' id='test_year'>
<option value=''>-- {% trans "SELECT YEAR" %} --</option>
{% for year in year_options %}
<option value='{{ year }}'>{{ year }}</option>
{% endfor %}
</select>
</li>
{% endif %}
<li style='padding-left:158px;'>
<div class='g-recaptcha' data-sitekey="{{ site_key }}"></div>
</li>
<li class='submit_row' style='height:100px; width:300px;'>
<input type='submit' class='ui-corner-all ui-state-disabled' disabled style='padding:10px; font-size:18px; float:left; cursor:pointer;' value='{% trans "Create My Account" %}' />
<a class='ui-corner-all ui-state-default' style='display:block; padding:5px; font-size:14px; width:60px; float:left; margin-top:10px; margin-left:10px;' href='/'>{% trans "Cancel" %}</a>
</li>
</ul>
</form>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
{% endblock %}
{% block doc_ready %}
{% if response_error %}
alert("{{ response_error }}");
{% endif %}
$(".signup-form input[type='text'], .signup-form input[type='password']").on("change",function(){
if($("#id_password1").val().length >= 8) {
$(".signup-form input[type='submit']").removeAttr("disabled").removeClass("ui-state-disabled").addClass("ui-state-default");
$("#password_check").removeClass("error");
} else {
$(".signup-form input[type='submit']").addClass("ui-state-disabled").removeClass("ui-state-default").attr("disabled");
$("#password_check").addClass("error");
}
});
$("#id_username").on("change",function(){
$.getJSON("/check_username/",{'username':$(this).val()},function(cb){
if(!cb.result){
$(".signup-form input[type='submit']").addClass("ui-state-disabled").removeClass("ui-state-default").attr("disabled");
$("#username_in_use").show();
} else {
$("#username_in_use").hide();
}
});
});
// if the change the email fields, hide the error since it's checked on post
$("#id_email, #id_email2").on("change",function(){
$(".error.generic").hide();
});
//if they try to click the create button when there are required fields missing, display error
$(".submit_row").mouseenter(
function(){
if($(this).children('input').attr("disabled")) {
$("#required_notice").show();
}}).mouseleave(function(){
$("#required_notice").hide();
});
{% endblock %}