jhiney/SecureLogin.html

## secure.js
var passwordBox = document.getElementById('inputPassword');
var emailBox = document.getElementById('inputEmail');

var email = emailBox.value;

function needVerification() {
    var email = emailBox.value;
    if (email.indexOf("@") > -1) {
        passwordBox.setAttribute("disabled", "");
        document.getElementById('passwordLabel').innerHTML = 'Please verify email before attempting a password.';
        document.getElementById('subButton').innerHTML = "Verify Email"
    }
}

function verificationHover() {

    var disabledDiv = document.getElementById('disabledDiv')
    if (!passwordBox.disabled) {
    }
    else {
        disabledDiv.setAttribute("data-toggle", "tooltip")
        disabledDiv.setAttribute("data-placement", "bottom")
        disabledDiv.setAttribute("title", "For your security, please verify your email before typing in your password.")
    }

}

function sendEmail() {
    var emailLine = document.getElementById('emailSent')
    var sentEmailLine = document.createElement('p')

    sentEmailLine.setAttribute("class", "text-danger")
    sentEmailLine.setAttribute("id", "warningMessage")

    var node = document.createTextNode("Email has been sent to: " + emailBox.value)
    sentEmailLine.appendChild(node)
    emailLine.appendChild(sentEmailLine)

    document.getElementById('subButton').innerHTML = "Login"
}

function verificationEntry() {
    document.getElementById('verificationBox').removeAttribute("hidden")

    document.getElementById('verifyButton').removeAttribute("hidden")

    document.getElementById('subButton').setAttribute("hidden", "")

    emailBox.setAttribute("disabled", "")
}

function verifiedClick() {
    passwordBox.removeAttribute("disabled")
    document.getElementById('subButton').removeAttribute("hidden")
    document.getElementById('verifyButton').setAttribute("hidden", "")
    document.getElementById('warningMessage').innerHTML = "";

    document.getElementById('passwordLabel').innerHTML = 'Password';

    document.getElementById('inputVerification').setAttribute("disabled", "");
}

## SecureLogin.html
<!--When you have to make absolutely sure-->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Just to be Safe</title>
        <link
             rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
             integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
             crossorigin="anonymous"
         />
        <link href="https://getbootstrap.com/docs/4.3/examples/floating-labels/floating-labels.css" rel="stylesheet">
    </head>


<body>
 <form class="form-signin">
     <h1 class="h3 mb-3 font-weight-bold">Secure Login</h1>
    <div class="form-label-group">
        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="" onblur="needVerification()">
        <label for="inputEmail">Email address</label>
    </div>
    <div id="disabledDiv" onmouseover="verificationHover()">
        <div class="form-label-group">
             <input id="inputPassword" type="password" class="form-control" placeholder="Password">
            <label id="passwordLabel" for="inputPassword">Password</label>
        </div>
    </div>
    <div class="form-label-group" id="verificationBox" hidden>
        <input id="inputVerification" class="form-control" placeholder="Verification Code" required="" autofocus="">
        <label for="inputVerification">Input Verification Code</label>
    </div>

    <div id="emailSent"><button id="subButton" class="btn btn-primary" type ="button" onclick="sendEmail();verificationEntry()" >Login</button></div>
    <button id="verifyButton" class="btn btn-primary" type ="button" onclick="verifiedClick()" hidden>Verify</button>
 </form>

<script src="secure.js"></script>
</body>
</html>
	var passwordBox = document.getElementById('inputPassword');
	var emailBox = document.getElementById('inputEmail');

	var email = emailBox.value;

	function needVerification() {
	var email = emailBox.value;
	if (email.indexOf("@") > -1) {
	passwordBox.setAttribute("disabled", "");
	document.getElementById('passwordLabel').innerHTML = 'Please verify email before attempting a password.';
	document.getElementById('subButton').innerHTML = "Verify Email"
	}
	}

	function verificationHover() {

	var disabledDiv = document.getElementById('disabledDiv')
	if (!passwordBox.disabled) {
	}
	else {
	disabledDiv.setAttribute("data-toggle", "tooltip")
	disabledDiv.setAttribute("data-placement", "bottom")
	disabledDiv.setAttribute("title", "For your security, please verify your email before typing in your password.")
	}

	}

	function sendEmail() {
	var emailLine = document.getElementById('emailSent')
	var sentEmailLine = document.createElement('p')

	sentEmailLine.setAttribute("class", "text-danger")
	sentEmailLine.setAttribute("id", "warningMessage")

	var node = document.createTextNode("Email has been sent to: " + emailBox.value)
	sentEmailLine.appendChild(node)
	emailLine.appendChild(sentEmailLine)

	document.getElementById('subButton').innerHTML = "Login"
	}

	function verificationEntry() {
	document.getElementById('verificationBox').removeAttribute("hidden")

	document.getElementById('verifyButton').removeAttribute("hidden")

	document.getElementById('subButton').setAttribute("hidden", "")

	emailBox.setAttribute("disabled", "")
	}

	function verifiedClick() {
	passwordBox.removeAttribute("disabled")
	document.getElementById('subButton').removeAttribute("hidden")
	document.getElementById('verifyButton').setAttribute("hidden", "")
	document.getElementById('warningMessage').innerHTML = "";

	document.getElementById('passwordLabel').innerHTML = 'Password';

	document.getElementById('inputVerification').setAttribute("disabled", "");
	}
	<!--When you have to make absolutely sure-->

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Just to be Safe</title>
	<link
	rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
	integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
	crossorigin="anonymous"
	/>
	<link href="https://getbootstrap.com/docs/4.3/examples/floating-labels/floating-labels.css" rel="stylesheet">
	</head>


	<body>
	<form class="form-signin">
	<h1 class="h3 mb-3 font-weight-bold">Secure Login</h1>
	<div class="form-label-group">
	<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="" onblur="needVerification()">
	<label for="inputEmail">Email address</label>
	</div>
	<div id="disabledDiv" onmouseover="verificationHover()">
	<div class="form-label-group">
	<input id="inputPassword" type="password" class="form-control" placeholder="Password">
	<label id="passwordLabel" for="inputPassword">Password</label>
	</div>
	</div>
	<div class="form-label-group" id="verificationBox" hidden>
	<input id="inputVerification" class="form-control" placeholder="Verification Code" required="" autofocus="">
	<label for="inputVerification">Input Verification Code</label>
	</div>

	<div id="emailSent"><button id="subButton" class="btn btn-primary" type ="button" onclick="sendEmail();verificationEntry()" >Login</button></div>
	<button id="verifyButton" class="btn btn-primary" type ="button" onclick="verifiedClick()" hidden>Verify</button>
	</form>

	<script src="secure.js"></script>
	</body>
	</html>