<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude">

  <xi:include href="master.html" />

  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" py:replace="''"/>
    <title>Create an Account</title>
  </head>

  <body>
    <h1 class="title">Create an Account</h1>
    <form action="/auth/save_new" method="post" id="create_account">
      <div class="span-3 clear"><label for="display_name">Display Name:</label></div>
      <div class="span-16 last"><input type="text" name="display_name" class="title"/></div>
      <div class="span-3 clear"><label for="email_addresses">Email address:</label></div>
      <div class="span-16 last"><input type="text" name="email_addresses" class="title"/></div>
      <div class="span-3 clear"><label for="open_ids">Open IDs:</label></div>
      <div class="span-16 last"><input type="text" name="open_ids" class="title"/></div>
      <div class="span-3 clear"><label for="username">Username:</label></div>
      <div class="span-16 last"><input type="text" name="username" id="username" class="title"/></div>
      <div class="span-3 clear"><label for="password">Password:</label></div>
      <div class="span-16 last"><input type="password" name="password" id="password" class="title"/></div>
      <div class="span-3 clear"><label>Confirm Password:</label></div>
      <div class="span-16 last"><input type="password" id="confirm_password" class="title"/></div>
      <div class="push-3 span-16 last clear">
        <input type="submit" id="submit" value="Create" class="ui-state-default ui-button ui-button-text"/>
      </div>
    </form>
    <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>
  </body>
</html>
