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 %>

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

      <form id="enroll_form" method="post" data-remote="true" action="/create_account">
        <div class="notice"></div>
        <div id="enroll_error" class="modal-form-error" name="enroll_error"></div>
        <div id="enroll_error" name="enroll_error"></div>
        <label>E-mail</label>
        <input name="email" type="email" placeholder="E-mail">
        <label>Password</label>
        <input name="password" type="password" placeholder="Password">
        <label>Public Username</label>
        <input name="username" type="text" placeholder="Public Username">
        <label>Full Name</label>
        <input name="name" type="text" placeholder="Full Name">
        <p>
            <label>Mailing address</label>
            <textarea name="mailing_address" placeholder="Mailing address"></textarea>
        </p>
        <label>Country of citizenship</label>
        <select name="country">
            %for country_code, country_name in COUNTRIES:
                <option value="${country_code}">${country_name}</option>
            %endfor
        </select>
        <label>Preferred Language</label>
        <input name="language" type="text" placeholder="Preferred Language">
        <label>Gender</label>
        <select name="gender">
            %for code, gender in UserProfile.GENDER_CHOICES:
                <option value="${code}">${gender}</option>
            %endfor
        </select>
        <label>Date of birth</label>
        <select name='date_of_birth__month'>
            %for month in range(1,13):
                <option value="${month}">${month}</option>
            %endfor
        </select>
        <select name='date_of_birth__day'>
            %for day in range(1,32):
                <option value="${day}">${day}</option>
            %endfor
        </select>
        <select name='date_of_birth__year'>
            %for year in range(date.today().year,1899,-1):
                <option value="${year}">${year}</option>
            %endfor
        </select>
        <label class="terms-of-service">
          <input name="terms_of_service" type="checkbox" value="true">
          I agree to the
          <a href="${reverse('tos')}">Terms of Service</a>
        </label>
        <label 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 class="submit">
          <input name="submit" type="submit" value="Create My Account">
        </div>
      </form>

      <section class="login-extra">
        <p>
          <span>Already have an account? <a href="#login-modal" class="close-signup" rel="leanModal">Login.</a></span>
        </p>
      </section>

    </div>

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

<script type="text/javascript">
  (function() {
   $(document).delegate('#enroll_form', 'ajax:success', function(data, json, xhr) {
     if(json.success) {
       $('#enroll').html(json.value);
     } else {
       $('#enroll_error').html(json.value).stop().css("display", "block");
     }
    });
  })(this)
</script>