42 lines
1.6 KiB
HTML
42 lines
1.6 KiB
HTML
{{ template "base.html" . }}
|
|
|
|
{{ define "content" }}
|
|
<div class="content-block">
|
|
<form id="password_reset_form" method="post">
|
|
<input type="hidden" name="token" value="{{ .Token }}" />
|
|
{{/*NOTE: The username field isn't `type="hidden"` because this way browser will offer to save the username along with the password */}}
|
|
<input style="position:absolute; visibility:hidden;" type="text" name="username" value="{{ .Username }}" readonly />
|
|
|
|
<h1>Hi, {{ .Username }}!</h1>
|
|
<p class="mb3 b">Please enter a new password</p>
|
|
<p class="mb2">
|
|
<label class="db b" for="password">New Password</label>
|
|
<input class="db" type="password" name="password" minlength="8" required />
|
|
</p>
|
|
|
|
<p class="mb2">
|
|
<label class="db b" for="password2">New password confirmation</label>
|
|
<input class="db" type="password" name="password2" minlength="8" required />
|
|
<span class="note db">Enter the same password as before, for verification.</span>
|
|
</p>
|
|
|
|
<input class="db mt3" type="submit" value="Reset your password" />
|
|
</form>
|
|
</div>
|
|
<script>
|
|
let form = document.querySelector("#password_reset_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>
|
|
{{ end }}
|