{{template "header.html" .S}}

<script>
function checkPasswordMatch() {
	var password = document.forms["passwordChange"]["password1"].value;
	var confirmPassword =  document.forms["passwordChange"]["password2"].value;

	if (password != confirmPassword) {
		document.getElementById("password2").classList.remove("is-valid");
		document.getElementById("password2").classList.add("is-invalid");
	} else {
		document.getElementById("password2").classList.remove("is-invalid");
		document.getElementById("password2").classList.add("is-valid");
	}
}
</script>

<h2>Settings</h2>

<form name="passwordChange" method="POST" action="/settings/">
	<legend>Change your pasword</legend>
	<div class="mb-3">
		<label class="form-label" for="currpass">Current password:</label>
		<input class="form-control" type="password" name="currpass" id="currpass" /><br />
	</div>
	<div class="mb-3">
		<label class="form-label" for="password1">New password:</label>
		<input class="form-control" type="password" name="password1" id="password1" onchange="checkPasswordMatch()" />
		<label class="form-label" for="password2">Confirm password:</label>
		<input class="form-control" type="password" name="password2" id="password2" onchange="checkPasswordMatch()" />
        <div class="invalid-feedback">Passwords don't match!</div>
	</div>
	<button type="submit" class="btn btn-primary">Change password</button>
	</div>
</form>

{{template "footer.html" .S}}