JSFiddle - React, Tailwind, and code Playground

by KevinGabbert

HTML

<div id="resetMessage"></div>

<div id="enterEmailLabel">Enter your email address to reset your password</div>
<br /><br />
<div class="form-group">
    <div>
        <input id="resetEmailAddress" type="email" title="Please provide a valid email address" required />
        <br /><br />
        <button id="eSubmit" class="emailSubmit" type="submit">Reset Password</button>
    </div>
</div>


<script src="~/js/passwordResetPage.js"></script>
<link href="~/css/passwordResetPage.css" rel="stylesheet" />

CSS

input:valid {
    color: green;
    
}

input:invalid {
    color: red;
}

JavaScript

var resetMessageElement = document.getElementById('resetMessage');
resetMessageElement.style.display = 'none';

//emailAddress blur
var element = document.getElementById("resetEmailAddress");
element.addEventListener("blur", function() {
    var valid = document.getElementById("resetEmailAddress").checkValidity();
    document.getElementById("eSubmit").disabled = !valid;
});

//Submit Click
document.addEventListener("click",
    function (event) {
        if (!event.target.matches(".emailSubmit")) return;

        alert("button clicked. ");

        var resetEmailLabel = document.getElementById("enterEmailLabel");
        var resetEmailElement = document.getElementById("resetEmailAddress");
        var resetSend = document.getElementById("eSubmit");
        var emailValid = document.getElementById("resetEmailAddress").checkValidity();
        var buttonEnabled = !resetSend.disabled;

        if (emailValid && buttonEnabled) {
            resetMessageElement.innerHTML = "Password Reset email sent to " + resetEmailElement.value;
            resetMessageElement.style.display = "block";

            //hide reset controls
            resetEmailLabel.style.display = "none";
            resetEmailElement.style.display = "none";
            resetSend.style.display = "none";
        } else {
            alert("The email address: " + resetEmailElement.value + " is not valid.");
        }

        var url = window.location.origin + "/Account/ResetPasswordStart/" + resetEmailElement.value; 
        fetch(url)
            .then(function (response) {
                if (!response.ok) {
                    return "error contacting server. Please contact customer service at: 555-1212";
                }
                return "";
            })
            .catch(function (error) {
                alert("Error: " + error + " Url: " + url);
            });
    },
    false);