<% layout('layouts/boilerplate')%>
    <div class="container justify-content-center align-items-center mt-5">
        <div class="row">
            <div class="col-md-6 offset-md- col-xl-4 offset-xl-4">
                <div class="card shadow">
                    <img src="/img/lorienTrustx4.png" alt="" class="img-fluid card-img-top" />
                    <div class="card-body">
                        <h5 class="card-title">Reset Password</h5>
                        <form action="/resetpassword/<%= user.resetPassword %>" method="POST" novalidate class="validated-form">
                            <div class="mb-3">
                                <label class="form-label" for="passwordField">New Password</label>
                                <input class="form-control" type="password" id="passwordField"  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" autofocus required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="confirmPassword">Confirm New Password</label>
                                <input class="form-control" type="password" id="confirmPassword" name="password"  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>
                                <div class="invalid-feedback">
                                    Passwords must match, and must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters
                                </div>
                            </div>
                            <div class="d-grid gap-2">
                                <button class="btn btn-success">Reset Password</button>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script>
        var password = document.getElementById("password")
  , confirm_password = document.getElementById("confirmPassword");

function validatePassword(){
  if(password.value != confirm_password.value) {
    confirm_password.setCustomValidity("Passwords Don't Match");
  } else {
    confirm_password.setCustomValidity('');
  }
}

password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;
    </script>