Last active
December 2, 2020 20:36
-
-
Save jhiney/79d91a80a382ed1c631b36b74e25ede6 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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", ""); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!--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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment