5835ecf779
This prevents everything from blinking, since the CSS class will be present when the page is rendering.
324 lines
14 KiB
HTML
324 lines
14 KiB
HTML
<%! from django.utils.translation import ugettext as _ %>
|
|
<%! from microsite_configuration.middleware import MicrositeConfiguration %>
|
|
|
|
<%inherit file="main.html" />
|
|
|
|
<%namespace name='static' file='static_content.html'/>
|
|
<%namespace file='main.html' import="login_query"/>
|
|
|
|
<%! from django.core.urlresolvers import reverse %>
|
|
<%! from django.utils import html %>
|
|
<%! from django_countries.countries import COUNTRIES %>
|
|
<%! from django.utils.translation import ugettext as _ %>
|
|
<%! from student.models import UserProfile %>
|
|
<%! from datetime import date %>
|
|
<%! import calendar %>
|
|
|
|
<%block name="pagetitle">${_("Register for {platform_name}").format(platform_name=platform_name)}</%block>
|
|
|
|
<%block name="bodyclass">view-register</%block>
|
|
|
|
<%block name="js_extra">
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
|
|
// adding js class for styling with accessibility in mind
|
|
$('body').addClass('js');
|
|
|
|
// new window/tab opening
|
|
$('a[rel="external"], a[class="new-vp"]')
|
|
.click( function() {
|
|
window.open( $(this).attr('href') );
|
|
return false;
|
|
});
|
|
|
|
// form field label styling on focus
|
|
$("form :input").focus(function() {
|
|
$("label[for='" + this.id + "']").parent().addClass("is-focused");
|
|
}).blur(function() {
|
|
$("label").parent().removeClass("is-focused");
|
|
});
|
|
|
|
});
|
|
|
|
(function() {
|
|
toggleSubmitButton(true);
|
|
|
|
$('#register-form').on('submit', function() {
|
|
toggleSubmitButton(false);
|
|
});
|
|
|
|
$('#register-form').on('ajax:error', function() {
|
|
toggleSubmitButton(true);
|
|
});
|
|
|
|
$('#register-form').on('ajax:success', function(event, json, xhr) {
|
|
var url = json.redirect_url || "${reverse('dashboard')}";
|
|
location.href = url;
|
|
});
|
|
|
|
$('#register-form').on('ajax:error', function(event, jqXHR, textStatus) {
|
|
toggleSubmitButton(true);
|
|
json = $.parseJSON(jqXHR.responseText);
|
|
$('.status.message.submission-error').addClass('is-shown').focus();
|
|
$('.status.message.submission-error .message-copy').html(json.value).stop().css("display", "block");
|
|
$(".field-error").removeClass('field-error');
|
|
$("[data-field='"+json.field+"']").addClass('field-error')
|
|
});
|
|
})(this);
|
|
|
|
function toggleSubmitButton(enable) {
|
|
var $submitButton = $('form .form-actions #submit');
|
|
|
|
if(enable) {
|
|
$submitButton.
|
|
removeClass('is-disabled').
|
|
removeProp('disabled').
|
|
html("${_('Create My {platform_name} Account').format(platform_name=platform_name)}");
|
|
}
|
|
else {
|
|
$submitButton.
|
|
addClass('is-disabled').
|
|
prop('disabled', true).
|
|
text("${_(u'Processing your account information…')}");
|
|
}
|
|
}
|
|
</script>
|
|
</%block>
|
|
|
|
<section class="introduction">
|
|
<header>
|
|
<h1 class="title">
|
|
<span class="title-super">${_("Welcome!")}</span>
|
|
<span class="title-sub">${_("Register below to create your {platform_name} account").format(platform_name=platform_name)}</span>
|
|
</h1>
|
|
</header>
|
|
</section>
|
|
|
|
<section class="register container">
|
|
<section role="main" class="content">
|
|
<form role="form" id="register-form" method="post" data-remote="true" action="/create_account" novalidate>
|
|
<input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
|
|
|
|
<!-- status messages -->
|
|
<div role="alert" class="status message">
|
|
<h3 class="message-title">${_("We're sorry, {platform_name} enrollment is not available in your region").format(platform_name=platform_name)}</h3>
|
|
</div>
|
|
|
|
<div role="alert" class="status message submission-error" tabindex="-1">
|
|
<h3 class="message-title">${_("The following errors occurred while processing your registration:")} </h3>
|
|
<ul class="message-copy"> </ul>
|
|
</div>
|
|
|
|
<p class="instructions">
|
|
${_("Please complete the following fields to register for an account. ")}<br />
|
|
${_('Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>.')}
|
|
</p>
|
|
|
|
<div class="group group-form group-form-requiredinformation">
|
|
<h2 class="sr">${_('Required Information')}</h2>
|
|
|
|
% if has_extauth_info is UNDEFINED:
|
|
|
|
<ol class="list-input">
|
|
<li class="field required text" id="field-email">
|
|
<label for="email">${_('E-mail')}</label>
|
|
<input class="" id="email" type="email" name="email" value="" placeholder="${_('example: username@domain.com')}" required aria-required="true" />
|
|
</li>
|
|
<li class="field required password" id="field-password">
|
|
<label for="password">${_('Password')}</label>
|
|
<input id="password" type="password" name="password" value="" required aria-required="true" />
|
|
</li>
|
|
<li class="field required text" id="field-username">
|
|
<label for="username">${_('Public Username')}</label>
|
|
<input id="username" type="text" name="username" value="" placeholder="${_('example: JaneDoe')}" required aria-required="true" aria-describedby="username-tip"/>
|
|
<span class="tip tip-input" id="username-tip">${_('Will be shown in any discussions or forums you participate in')} <strong>(${_('cannot be changed later')})</strong></span>
|
|
</li>
|
|
<li class="field required text" id="field-name">
|
|
<label for="name">${_('Full Name')}</label>
|
|
<input id="name" type="text" name="name" value="" placeholder="${_('example: Jane Doe')}" required aria-required="true" aria-describedby="name-tip" />
|
|
<span class="tip tip-input" id="name-tip">${_("Needed for any certificates you may earn")}</span>
|
|
</li>
|
|
</ol>
|
|
|
|
% else:
|
|
|
|
<div class="message">
|
|
<h3 class="message-title">${_("Welcome {username}").format(username=extauth_id)}</h3>
|
|
<p class="message-copy">${_("Enter a Public Display Name:")}</p>
|
|
</div>
|
|
|
|
<ol class="list-input">
|
|
|
|
% if ask_for_email:
|
|
|
|
<li class="field required text" id="field-email">
|
|
<label for="email">${_("E-mail")}</label>
|
|
<input class="" id="email" type="email" name="email" value="" placeholder="${_('example: username@domain.com')}" />
|
|
</li>
|
|
|
|
% endif
|
|
|
|
<li class="field required text" id="field-username">
|
|
<label for="username">${_('Public Display Name')}</label>
|
|
<input id="username" type="text" name="username" value="${extauth_username}" placeholder="${_('example: JaneDoe')}" required aria-required="true" aria-describedby="username-tip" />
|
|
<span class="tip tip-input" id="id="username-tip>${_('Will be shown in any discussions or forums you participate in')} <strong>(${_('cannot be changed later')})</strong></span>
|
|
</li>
|
|
|
|
% if ask_for_fullname:
|
|
|
|
<li class="field required text" id="field-name">
|
|
<label for="name">${_('Full Name')}</label>
|
|
<input id="name" type="text" name="name" value="" placeholder="$_('example: Jane Doe')}" aria-describedby="name-tip" />
|
|
<span class="tip tip-input" id="name-tip">${_("Needed for any certificates you may earn")}</span>
|
|
</li>
|
|
|
|
% endif
|
|
|
|
</ol>
|
|
|
|
% endif
|
|
</div>
|
|
|
|
<div class="group group-form group-form-secondary group-form-personalinformation">
|
|
<h2 class="sr">${_("Extra Personal Information")}</h2>
|
|
|
|
<ol class="list-input">
|
|
% if settings.REGISTRATION_EXTRA_FIELDS['city'] != 'hidden':
|
|
<li class="field ${settings.REGISTRATION_EXTRA_FIELDS['city']} text" id="field-city">
|
|
<label for="city">${_('City')}</label>
|
|
<input id="city" type="text" name="city" value="" placeholder="${_('example: New York')}" aria-describedby="city-tip" ${'required aria-required="true"' if settings.REGISTRATION_EXTRA_FIELDS['city'] == 'required' else ''} />
|
|
</li>
|
|
% endif
|
|
% if settings.REGISTRATION_EXTRA_FIELDS['country'] != 'hidden':
|
|
<li class="field-group">
|
|
<div class="field ${settings.REGISTRATION_EXTRA_FIELDS['country']} select" id="field-country">
|
|
<label for="country">${_("Country")}</label>
|
|
<select id="country" name="country" ${'required aria-required="true"' if settings.REGISTRATION_EXTRA_FIELDS['country'] == 'required' else ''}>
|
|
<option value="">--</option>
|
|
%for code, country_name in COUNTRIES:
|
|
<option value="${code}">${ unicode(country_name) }</option>
|
|
%endfor
|
|
</select>
|
|
</div>
|
|
</li>
|
|
% endif
|
|
% if settings.REGISTRATION_EXTRA_FIELDS['level_of_education'] != 'hidden':
|
|
<li class="field-group">
|
|
<div class="field ${settings.REGISTRATION_EXTRA_FIELDS['level_of_education']} select" id="field-education-level">
|
|
<label for="education-level">${_("Highest Level of Education Completed")}</label>
|
|
<select id="education-level" name="level_of_education" ${'required aria-required="true"' if settings.REGISTRATION_EXTRA_FIELDS['level_of_education'] == 'required' else ''}>
|
|
<option value="">--</option>
|
|
%for code, ed_level in UserProfile.LEVEL_OF_EDUCATION_CHOICES:
|
|
<option value="${code}">${ed_level}</option>
|
|
%endfor
|
|
</select>
|
|
</div>
|
|
</li>
|
|
% endif
|
|
% if settings.REGISTRATION_EXTRA_FIELDS['gender'] != 'hidden':
|
|
<li class="field-group">
|
|
<div class="field ${settings.REGISTRATION_EXTRA_FIELDS['gender']} select" id="field-gender">
|
|
<label for="gender">${_("Gender")}</label>
|
|
<select id="gender" name="gender" ${'required aria-required="true"' if settings.REGISTRATION_EXTRA_FIELDS['gender'] == 'required' else ''}>
|
|
<option value="">--</option>
|
|
%for code, gender in UserProfile.GENDER_CHOICES:
|
|
<option value="${code}">${gender}</option>
|
|
%endfor
|
|
</select>
|
|
</div>
|
|
</li>
|
|
% endif
|
|
% if settings.REGISTRATION_EXTRA_FIELDS['year_of_birth'] != 'hidden':
|
|
<li class="field-group">
|
|
<div class="field ${settings.REGISTRATION_EXTRA_FIELDS['year_of_birth']} select" id="field-yob">
|
|
<label for="yob">${_("Year of Birth")}</label>
|
|
<select id="yob" name="year_of_birth" ${'required aria-required="true"' if settings.REGISTRATION_EXTRA_FIELDS['year_of_birth'] == 'required' else ''}>
|
|
<option value="">--</option>
|
|
%for year in UserProfile.VALID_YEARS:
|
|
<option value="${year}">${year}</option>
|
|
%endfor
|
|
</select>
|
|
</div>
|
|
% endif
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="group group-form group-form-personalinformation2">
|
|
<h2 class="sr">${_("Extra Personal Information")}</h2>
|
|
|
|
<ol class="list-input">
|
|
% if settings.REGISTRATION_EXTRA_FIELDS['mailing_address'] != 'hidden':
|
|
<li class="field ${settings.REGISTRATION_EXTRA_FIELDS['mailing_address']} text" id="field-address-mailing">
|
|
<label for="address-mailing">${_("Mailing Address")}</label>
|
|
<textarea id="address-mailing" name="mailing_address" value="" ${'required aria-required="true"' if settings.REGISTRATION_EXTRA_FIELDS['mailing_address'] == 'required' else ''}></textarea>
|
|
</li>
|
|
% endif
|
|
|
|
% if settings.REGISTRATION_EXTRA_FIELDS['goals'] != 'hidden':
|
|
<li class="field ${settings.REGISTRATION_EXTRA_FIELDS['goals']} text" id="field-goals">
|
|
<label for="goals">${_("Please share with us your reasons for registering with {platform_name}").format(platform_name=platform_name)}</label>
|
|
<textarea id="goals" name="goals" value="" ${'required aria-required="true"' if settings.REGISTRATION_EXTRA_FIELDS['goals'] == 'required' else ''}></textarea>
|
|
</li>
|
|
% endif
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="group group-form group-form-accountacknowledgements">
|
|
<h2 class="sr">${_("Account Acknowledgements")}</h2>
|
|
|
|
<ol class="list-input">
|
|
<li class="field-group">
|
|
|
|
% if has_extauth_info is UNDEFINED or ask_for_tos :
|
|
<div class="field required checkbox" id="field-tos">
|
|
<input id="tos-yes" type="checkbox" name="terms_of_service" value="true" required aria-required="true" />
|
|
<label for="tos-yes">${_('I agree to the {link_start}Terms of Service{link_end}').format(
|
|
link_start='<a href="{url}" class="new-vp">'.format(url=marketing_link('TOS')),
|
|
link_end='</a>')}</label>
|
|
</div>
|
|
% endif
|
|
|
|
% if settings.REGISTRATION_EXTRA_FIELDS['honor_code'] != 'hidden':
|
|
<div class="field ${settings.REGISTRATION_EXTRA_FIELDS['honor_code']} checkbox" id="field-honorcode">
|
|
<input id="honorcode-yes" type="checkbox" name="honor_code" value="true" />
|
|
<%
|
|
## TODO: provide a better way to override these links
|
|
if self.stanford_theme_enabled():
|
|
honor_code_path = marketing_link('TOS') + "#honor"
|
|
else:
|
|
honor_code_path = marketing_link('HONOR')
|
|
%>
|
|
<label for="honorcode-yes">${_('I agree to the {link_start}Honor Code{link_end}').format(
|
|
link_start='<a href="{url}" class="new-vp">'.format(url=honor_code_path),
|
|
link_end='</a>')}</label>
|
|
</div>
|
|
% endif
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
% if course_id and enrollment_action:
|
|
<input type="hidden" name="enrollment_action" value="${enrollment_action | h}" />
|
|
<input type="hidden" name="course_id" value="${course_id | h}" />
|
|
% endif
|
|
|
|
<div class="form-actions">
|
|
<button name="submit" type="submit" id="submit" class="action action-primary action-update">${_('Register')} <span class="orn-plus">+</span> ${_('Create My Account')}</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<aside role="complementary">
|
|
|
|
<%
|
|
# allow for microsite overrides on the registration sidebars, otherwise default to pre-existing ones
|
|
sidebar_file = MicrositeConfiguration.get_microsite_template_path('register-sidebar.html')
|
|
%>
|
|
|
|
<%include file="${sidebar_file}" />
|
|
|
|
</aside>
|
|
</section>
|