From e3e3b45c65aeafb034c660a6f142829fc23cb75c Mon Sep 17 00:00:00 2001 From: Aadhavan Srinivasan Date: Sun, 25 Jun 2023 14:06:26 -0500 Subject: [PATCH] Added HTML and Javascript files for a login page --- login.html | 59 ++++++++++++++++++++++ login.js | 142 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 201 insertions(+) create mode 100644 login.html create mode 100644 login.js diff --git a/login.html b/login.html new file mode 100644 index 0000000..934f38b --- /dev/null +++ b/login.html @@ -0,0 +1,59 @@ + + + + + Title + + +
+
+ Your Company +

Log in to your account

+
+ +
+
+
+ +
+ + +
+
+
+
+ +
+ Forgot password? +
+
+
+ +
+ + + + + +
+
+ +
+
+
+
+ + + diff --git a/login.js b/login.js new file mode 100644 index 0000000..b387013 --- /dev/null +++ b/login.js @@ -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"); + } +}); \ No newline at end of file