signup_modal.html

<%namespace name='static' file='static_content.html'/>
<%! from django.core.urlresolvers import reverse %>
<%! from django_countries.countries import COUNTRIES %>
<%! from student.models import UserProfile %>
<%! from datetime import date %>
<%! import calendar %>

<section id="signup-modal" class="modal signup-modal">
  <div class="inner-wrapper">
    <div id="register">
      <header>
        <h2>Sign Up for <span class="edx">edX</span></h2>
        <hr>
      </header>

      <form id="register_form" class="register_form" method="post" data-remote="true" action="/create_account">
        <div class="notice"></div>
        <div id="register_error" class="modal-form-error" name="register_error"></div>
        <div id="register_error" name="register_error"></div>

        <div class="input-group">
	  % if has_extauth_info is UNDEFINED:
          <label data-field="email">E-mail*</label>
          <input name="email" type="email" placeholder="E-mail*">
          <label data-field="password">Password*</label>
          <input name="password" type="password" placeholder="Password*">
          <label data-field="username">Public Username*</label>
          <input name="username" type="text" placeholder="Public Username*">
          <label data-field="name">Full Name</label>
          <input name="name" type="text" placeholder="Full Name*">
	  % else:
	  <p><i>Welcome</i> ${extauth_email}</p><br/>
          <label data-field="email">E-mail*</label>
          <input name="email" type="hidden" value="${extauth_email}" placeholder="E-mail*">
	  <p><i>Enter a public username:</i></p>
          <label data-field="username">Public Username*</label>
          <input name="username" type="text" value="${extauth_username}" placeholder="Public Username*">
          <label data-field="password">Password*</label>
          <input name="password" type="hidden" value="DoExtAuth" placeholder="Password*">
          <label data-field="name">Full Name</label>
          <input name="name" type="hidden" value="${extauth_name}" placeholder="Full Name*">
	  % endif
        </div>

        <div class="input-group">
          <section class="citizenship">
            <label data-field="level_of_education">Ed. completed</label>
            <div class="input-wrapper">
              <select name="level_of_education">
                  <option value="">--</option>
                  %for code, ed_level in UserProfile.LEVEL_OF_EDUCATION_CHOICES:
                      <option value="${code}">${ed_level}</option>
                  %endfor
              </select>
            </div>
          </section>

          <section class="gender">
            <label data-field="gender">Gender</label>
            <div class="input-wrapper">
              <select name="gender">
                  <option value="">--</option>
                  %for code, gender in UserProfile.GENDER_CHOICES:
                      <option value="${code}">${gender}</option>
                  %endfor
              </select>
            </div>
          </section>

          <section class="date-of-birth">
            <label data-field="date-of-birth">Year of birth</label>
            <div class="input-wrapper">
              <select name="year_of_birth">
                <option value="">--</option>
                %for year in UserProfile.VALID_YEARS:
                  <option value="${year}">${year}</option>
                %endfor
              </select>
              ##<input name="year_of_birth" type="text" placeholder="Year of birth">
            </div>
          </section>

          <label data-field="mailing_address">Mailing address</label>
          <textarea name="mailing_address" placeholder="Mailing address"></textarea>
          <label data-field="goals">Goals in signing up for edX</label>
          <textarea name="goals" placeholder="Goals in signing up for edX"></textarea>

        </div>

        <div class="input-group">
          <label data-field="terms_of_service" class="terms-of-service">
            <input name="terms_of_service" type="checkbox" value="true">
            I agree to the
            <a href="${reverse('tos')}" target="_blank">Terms of Service</a>*
          </label>

          <label data-field="honor_code" class="honor-code">
            <input name="honor_code" type="checkbox" value="true">
            I agree to the
            <a href="${reverse('honor')}" target="_blank">Honor Code</a>*
          </label>
        </div>

        <div class="submit">
          <input name="submit" type="submit" value="Create My Account">
        </div>
      </form>

      % if has_extauth_info is UNDEFINED:
      <section class="login-extra">
        <p>
          <span>Already have an account? <a href="#login-modal" class="close-signup" rel="leanModal">Login.</a></span>
        </p>
      </section>
      % endif

    </div>

    <div class="close-modal">
      <div class="inner">
        <p>&#10005;</p>
      </div>
    </div>
  </div>
</section>

<script type="text/javascript">
  (function() {
   $(document).delegate('#register_form', 'ajax:success', function(data, json, xhr) {
     if(json.success) {
       location.href="${reverse('dashboard')}";
     } else {
       $(".field-error").removeClass('field-error');
       $('#register_error').html(json.value).stop().css("display", "block");
       $("[data-field='"+json.field+"']").addClass('field-error')
     }
    });
  })(this)
</script>