{% extends "main.html" %}

{% block container %}
<section class="login-section">
	<div class="login-title">REGISTRATION</div>

	{% if registrationSuccessful %}
		<div class="form-signin-heading">Thank you for registering!</div>
	{% elif userExists %}
		<div class="form-signin-heading">User already exists!</div>
	{% elif error %}
		<div class="form-signin-heading">There was an error processing your request. Please try again.<br/><br/>If the problem persists, please contact: software-evaluation@draper.com</div>
	{% else %}
		<form class="form-signin" role="form" name="user_form" id="user_form" onsubmit="return validateForm()" method="post" action="{% url 'AppMgr:register' %}" enctype="multipart/form-data">
			{% csrf_token %}
			<div class="form-signin-heading">Create an account</div>
    	<div class="form-group">
      	<p class="required">
      		<label for="id_email">Username: (please use a valid email address)</label>
      		<input class="form-control" id="id_email" name="email" type="email" placeholder="Enter email"/>
      	</p>
    	</div>
    	<div class="form-group">
      	<p class="required">
        	<label for="id_password1">Password:</label>
        	<input class="form-control" id="id_password" name="password" type="password" placeholder="Enter password"/>
      	</p>
    	</div>
    	<div class="form-group">
      	<p class="required">
        	<label for="id_password2">Password (again):</label>
        	<input class="form-control" id="id_password2" name="password2" type="password" placeholder="Enter password again" />
    		</p>
    	</div>
    	<button id="id_register_button" type="submit" class="btn-bordered btn-login">Submit</button>
  	</form>
  {% endif %}

  {% if registrationSuccessful or userExists %}
    <div class="form-signin-heading">Click here to sign in: <a href="{% url 'AppMgr:login' %}">Sign in</a></div>
    {% if userExists %}
    	<div class="form-signin-heading">Or click here if you've forgotten your password: <a href="{% url 'AppMgr:reset' %}">Password reset</a></div>
    {% endif %}
  {% endif %}
</section>

<script>
// do simple client-side validation of the form before submitting to server
function validateForm() {
	var form = document.forms["user_form"];
	if (form["email"].value == null || form["email"].value == ""
			|| form["password"].value == null || form["password"].value == ""
			||	form["password2"].value == null || form["password2"].value == "") {
		window.alert("Please supply all fields.");
		return false;
	}
	if (form["password"].value != form["password2"].value) {
		window.alert("Passwords do not match!");
		return false;
	}
	return true;
}
</script>

{% endblock %}