Added HTML and Javascript files for a login page
parent
cd1261418a
commit
e3e3b45c65
@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="h-full bg-white">
|
||||
<head>
|
||||
<link rel="stylesheet" href="output.css">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body class="h-full">
|
||||
<div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
|
||||
<div class="sm:mx-auto sm:w-full sm:max-w-sm">
|
||||
<img class="mx-auto h-10 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company">
|
||||
<h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">Log in to your account</h2>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
|
||||
<form class="space-y-6" action="#" method="POST">
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium leading-6 text-gray-900">Email address</label>
|
||||
<div class="mt-2">
|
||||
<input id="email" name="email" type="email" autocomplete="email" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
|
||||
<div id="email-error" class="hidden mt-2 text-red-800 text-xs">
|
||||
invalid Email
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center justify-between">
|
||||
<label for="password" class="block text-sm font-medium leading-6 text-gray-900">Password</label>
|
||||
<div class="text-sm">
|
||||
<a href="#" class="font-semibold text-indigo-600 hover:text-indigo-500">Forgot password?</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<input id="password" name="password" type="password" autocomplete="current-password" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
|
||||
</div>
|
||||
<p id="letter" class="hidden text-red-800 text-xs">
|
||||
A <b>lowercase</b> letter
|
||||
</p>
|
||||
<p id="capital" class="hidden text-red-800 text-xs">
|
||||
A <b>capital (uppercase)</b> letter
|
||||
</p>
|
||||
<p id="number" class="hidden text-red-800 text-xs">
|
||||
A <b>number</b>
|
||||
</p>
|
||||
<p id="symbol" class="hidden text-red-800 text-xs">
|
||||
A <b>symbol</b>
|
||||
</p>
|
||||
<p id="length" class="hidden text-red-800 text-xs">
|
||||
Minimum <b>10 characters</b>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit" class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Sign in</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<script src="login.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,142 @@
|
||||
let email = document.getElementById("email");
|
||||
let password = document.getElementById("password");
|
||||
let pswd_visible = document.getElementById("pswd-visible");
|
||||
let pswd_invisible = document.getElementById("pswd-invisible");
|
||||
let check_pswd_visible = document.getElementById("check-pswd-visible");
|
||||
let check_pswd_invisible = document.getElementById("check-pswd-invisible");
|
||||
let check_password = document.getElementById("check-password");
|
||||
pswd_visible.addEventListener('click', () => {
|
||||
pswd_visible.classList.add("hidden");
|
||||
pswd_invisible.classList.remove("hidden");
|
||||
password.type = "password";
|
||||
});
|
||||
pswd_invisible.addEventListener('click', () => {
|
||||
pswd_invisible.classList.add("hidden");
|
||||
pswd_visible.classList.remove("hidden");
|
||||
password.type = "text";
|
||||
});
|
||||
check_pswd_visible.addEventListener('click', () => {
|
||||
check_pswd_visible.classList.add("hidden");
|
||||
check_pswd_invisible.classList.remove("hidden");
|
||||
check_password.type = "password";
|
||||
});
|
||||
check_pswd_invisible.addEventListener('click', () => {
|
||||
check_pswd_invisible.classList.add("hidden");
|
||||
check_pswd_visible.classList.remove("hidden");
|
||||
check_password.type = "text";
|
||||
});
|
||||
let emailRX = new RegExp("^[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z]+)+$");
|
||||
let domainError = document.getElementById("domain");
|
||||
let domainRX = new RegExp("^[a-zA-Z0-9!@#$%^&*]*$");
|
||||
let emailError = document.getElementById("email-error");
|
||||
let capsRX = new RegExp(".*[A-Z]+");
|
||||
let capsError = document.getElementById("capital");
|
||||
let lowRX = new RegExp(".*[a-z]+");
|
||||
let lowError = document.getElementById("letter");
|
||||
let numRX = new RegExp(".*[0-9]+");
|
||||
let numError = document.getElementById("number");
|
||||
let symbolRX = new RegExp(".*[!@#$%^&*]+");
|
||||
let symbolError = document.getElementById("symbol");
|
||||
let MIN_LENGTH = 10;
|
||||
let lenError = document.getElementById("length");
|
||||
let check_password_error = document.getElementById("check-password-error");
|
||||
|
||||
|
||||
email.addEventListener('keyup', function(event) {
|
||||
if (emailRX.test(email.value)) {
|
||||
console.log("email valid");
|
||||
email.classList.add("ring-green-400");
|
||||
email.classList.add("focus:ring-green-400");
|
||||
email.classList.remove("ring-red-400");
|
||||
email.classList.remove("focus:ring-red-400");
|
||||
emailError.classList.add("hidden");
|
||||
emailError.classList.remove("block");
|
||||
return true;
|
||||
} else {
|
||||
console.log("email invalid");
|
||||
email.classList.add("ring-red-400");
|
||||
email.classList.add("focus:ring-red-400");
|
||||
email.classList.remove("ring-green-400");
|
||||
email.classList.remove("focus:ring-green-400");
|
||||
emailError.classList.remove("hidden");
|
||||
emailError.classList.add("block");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
password.addEventListener('keyup', () => {
|
||||
let pswd = password.value;
|
||||
if (!capsRX.test(pswd)) {
|
||||
capsError.classList.remove("hidden");
|
||||
capsError.classList.add("block");
|
||||
} else {
|
||||
capsError.classList.add("hidden");
|
||||
capsError.classList.remove("block");
|
||||
}
|
||||
if (!lowRX.test(pswd)) {
|
||||
lowError.classList.remove("hidden");
|
||||
lowError.classList.add("block");
|
||||
} else {
|
||||
lowError.classList.add("hidden");
|
||||
lowError.classList.remove("block");
|
||||
}
|
||||
if (!numRX.test(pswd)) {
|
||||
numError.classList.remove("hidden");
|
||||
numError.classList.add("block");
|
||||
} else {
|
||||
numError.classList.add("hidden");
|
||||
numError.classList.remove("block");
|
||||
}
|
||||
if (!symbolRX.test(pswd)) {
|
||||
symbolError.classList.remove("hidden");
|
||||
symbolError.classList.add("block");
|
||||
} else {
|
||||
symbolError.classList.add("hidden");
|
||||
symbolError.classList.remove("block");
|
||||
}
|
||||
if (!domainRX.test(pswd)) {
|
||||
domainError.classList.remove("hidden");
|
||||
domainError.classList.add("block");
|
||||
} else {
|
||||
domainError.classList.add("hidden");
|
||||
domainError.classList.remove("block");
|
||||
}
|
||||
if (pswd.length < MIN_LENGTH) {
|
||||
lenError.classList.remove("hidden");
|
||||
lenError.classList.add("block");
|
||||
} else {
|
||||
lenError.classList.add("hidden");
|
||||
lenError.classList.remove("block");
|
||||
}
|
||||
if (capsError.classList.contains("block") || lowError.classList.contains("block") || numError.classList.contains("block") || symbolError.classList.contains("block") || lenError.classList.contains("block")) {
|
||||
password.classList.remove("ring-green-400");
|
||||
password.classList.remove("focus:ring-green-400");
|
||||
password.classList.add("ring-red-400");
|
||||
password.classList.add("focus:ring-red-400");
|
||||
} else {
|
||||
password.classList.add("ring-green-400");
|
||||
password.classList.add("focus:ring-green-400");
|
||||
password.classList.remove("ring-red-400");
|
||||
password.classList.remove("focus:ring-red-400");
|
||||
}
|
||||
});
|
||||
check_password.addEventListener("keyup", () => {
|
||||
let check = check_password.value;
|
||||
if (check !== password.value) {
|
||||
check_password_error.classList.remove("hidden");
|
||||
check_password_error.classList.add("block");
|
||||
} else {
|
||||
check_password_error.classList.add("hidden");
|
||||
check_password_error.classList.remove("block")
|
||||
}
|
||||
if (check_password_error.classList.contains("block")) {
|
||||
check_password.classList.remove("ring-green-400");
|
||||
check_password.classList.remove("focus:ring-green-400");
|
||||
check_password.classList.add("ring-red-400");
|
||||
check_password.classList.add("focus:ring-red-400");
|
||||
} else {
|
||||
check_password.classList.add("ring-green-400");
|
||||
check_password.classList.add("focus:ring-green-400");
|
||||
check_password.classList.remove("ring-red-400");
|
||||
check_password.classList.remove("focus:ring-red-400");
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue