{% set hide_left_bar = True %}
{% extends 'jinja_master/master.html' %}

{% block title %}Create an Account{% endblock %}

{% block header %}Create an Account{% endblock %}

{% block content %}
          <form action="/auth/save_new" method="post" id="create_account">
            <ol>
              <li>
                <label for="display_name">Display Name:</label>
                <input type="text" name="display_name"/>
              </li>
              <li>
                <label for="email_addresses">Email address:</label>
                <input type="text" name="email_addresses"/>
              </li>
              <li>
                <label for="open_ids">Open IDs:</label>
                <input type="text" name="open_ids"/>
              </li>
              <li>
                <label for="username">Username:</label>
                <input type="text" name="username" id="username"/>
              </li>
              <li>
                <label for="password">Password:</label>
                <input type="password" name="password" id="password"/>
              </li>
              <li>
                <label>Confirm Password:</label>
                <input type="password" id="confirm_password"/>
              </li>
              <li>
                <label>&nbsp;</label>
                <input type="submit" id="submit" value="Create"/>
              </li>
            </ol>
          </form>
{% endblock %}

{% block extra_js %}
  <script type="text/javascript">
    //<!--
    $('#create_account').submit(function(){
      if(!$('#username').attr('value').match(/^[a-zA-Z0-9]+$/)){
        alert('Username can only contain numbers and letters.');
        return false;
      }
      if($('#password').attr('value').length < 8){
        alert('Password must be at least 8 characters long.');
        return false;
      }
      if($('#password').attr('value') != $('#confirm_password').attr('value')){
        alert('Password and Confirm Password must match.');
        return false;
      }
    });
    // -->
  </script>
{% endblock %}