Skip to content

Instantly share code, notes, and snippets.

@jhiney
Last active December 2, 2020 20:36
Show Gist options
  • Save jhiney/79d91a80a382ed1c631b36b74e25ede6 to your computer and use it in GitHub Desktop.
Save jhiney/79d91a80a382ed1c631b36b74e25ede6 to your computer and use it in GitHub Desktop.
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment