59 lines
2.0 KiB
HTML
59 lines
2.0 KiB
HTML
{{ 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 }}
|