{{ define "reset_password_page_back" }}
{{ template "header" .}}
<h1> Password Recovery </h1>
<p> You should receive a Password Recovery token momentarily in your email inbox</p>
<p> Please enter it, and your new password, into the form below to reset your password</p>
<form action="/reset/form" method="POST" novalidate>
	<div>
		<label>Password Token:</label>
		<input type="text" name="token" value="{{.Token}}">
	</div>
	<div>
		<label>New Password:</label>
		<input type="password" name="new_password"pattern="(?=.*\d)(?=.*[a-z]).{8,}" title="Must contain at least one number and at least 8 or more characters" required>
	</div>
	<div>
		<label>Confirm New Password:</label>
		<input type="password" name="confirm_password" id="confirm_password" onchange="check()"/>
		<span id='message'></span>
	</div>
	<div>
		<input type="checkbox" onclick="showPass()">Show Passwords 
	</div>
	<div>
		<input type="submit" value="Reset">
	</div>
 
</form>
<div id="requirements">
  <h3>Password must contain the following:</h3>
  <p id="letter" class="invalid">A <b>lowercase</b> letter</p>
  <p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
  <p id="number" class="invalid">A <b>number</b></p>
  <p id="length" class="invalid">Minimum <b>8 characters</b></p>
</div>
<script>
function check() {
    if(document.getElementById('password').value ===
            document.getElementById('confirm_password').value) {
        document.getElementById('message').innerHTML = "Passwords match";
    } else {
        document.getElementById('message').innerHTML = "Passwords don't match";
    }
}
function showPass() {
	var x = document.getElementById("password");
	if (x.type === "password") {
		x.type = "text";
	} else {
		x.type = "password";
	}
	var x = document.getElementById("confirm_password");
	if (x.type === "password") {
		x.type = "text";
	} else {
		x.type = "password";
	}
}
</script>

{{ template "footer" .}}
{{end}}