{{ template "base.html" . }}

{{ define "content" }}
<div class="content-block">
	<form id="register_form" method="post">
		{{/* NOTE(asaf): No CSRF on register. We don't have a user session yet and I don't think we would gain anything from a pre-login session here */}}

		<p class="mb2">
			<label class="db b" for="username">Username</label>
			<input class="db w5" name="username" minlength="3" maxlength="30" type="text" required pattern="^[0-9a-zA-Z][\w-]{2,29}$" />
			<span class="note db">Required. You may use up to 30 characters. Must start with a letter or number. Dashes and underscores are allowed.</span>
		</p>

		<p class="mb2">
			<label class="db b" for="displayname">Display name</label>
			<input class="db w5" name="displayname" type="text" />
			<span class="note db">Optional.</span>
		</p>

		<p class="mb2">
			<label class="db b" for="email">Email</label>
			<input class="db w5" name="email" type="email" required />
		</p>

		<p class="mb2">
			<label class="db b" for="password">Password</label>
			<input class="db w5" name="password" minlength="8" type="password" required />
		</p>

		<p class="mb2">
			<label class="db b" for="password2">Password confirmation</label>
			<input class="db w5" name="password2" minlength="8" type="password" required />
			<span class="note db">Enter the same password as before, for verification.</span>
		</p>

		{{/* TODO(asaf): Consider adding some bot-mitigation thing here */}}

		<p>
			<input type="submit" value="Register" />
		</p>
	</form>
	<script>
		let form = document.querySelector("#register_form")
		let password1 = form.querySelector("input[name=password]")
		let password2 = form.querySelector("input[name=password2]")
		password1.addEventListener("input", validatePasswordConfirmation);
		password2.addEventListener("input", validatePasswordConfirmation);

		function validatePasswordConfirmation(ev) {
			if (password1.value != password2.value) {
				password2.setCustomValidity("Password doesn't match");
			} else {
				password2.setCustomValidity("");
			}
		}
	</script>
</div>
{{ end }}
