{{ define "title" }}Sign up · drone.io{{ end }}

{{ define "content" }}
	<h1>Sign up</h1>
	<form action="/signup" method="POST" role="form">
		<div class="alert alert-success hide" id="successAlert"></div>
		<div class="alert alert-error hide" id="failureAlert"></div>
		<div>
			<input type="text" name="email" placeholder="Email address" autocomplete="off" spellcheck="false" class="form-control only-child" />
		</div>
		<div>
			<input type="submit" id="submitButton" value="Request invite" data-loading-text="Sending Invite .." />
		</div>
    </form>
{{ end }}

{{ define "script" }}
<script>
		document.forms[0].onsubmit = function(event) {

			$("#successAlert").hide();
			$("#failureAlert").hide();
			$('#submitButton').button('loading');

			var form = event.target
			var formData = new FormData(form);
			xhr = new XMLHttpRequest();
			xhr.open('POST', form.action);
			xhr.onload = function() {
					if (this.status == 200) {
							$("#successAlert").text("User Invitation was sent successfully");
							$("#successAlert").show().removeClass("hide");
							$('#submitButton').button('reset')

					} else {
							$("#failureAlert").text("Failed to send Invitation Email. " + this.response);
							$("#failureAlert").show().removeClass("hide");
							$('#submitButton').button('reset')
					};
			};
			xhr.send(formData);
			return false;
		}
	</script>
{{ end }}