From 2f0094653d5ff39d91aa022ce80b73fb61461dd9 Mon Sep 17 00:00:00 2001 From: saras-69 <115482884+saras-69@users.noreply.github.com> Date: Mon, 4 Nov 2024 01:42:43 +0530 Subject: [PATCH] Add "Forgot Password" Feature #1614 --- forgotPassword.html | 171 ++++++++++++++++++++++++++++++++++++++++++++ login/login.css | 83 ++++++++++----------- login/script.js | 29 ++++---- newLogin.html | 32 +++++---- 4 files changed, 244 insertions(+), 71 deletions(-) create mode 100644 forgotPassword.html diff --git a/forgotPassword.html b/forgotPassword.html new file mode 100644 index 00000000..747feb9a --- /dev/null +++ b/forgotPassword.html @@ -0,0 +1,171 @@ + + + + + + + + Forgot Password + + + + + + + + + +
+
+
+
+

Forgot Password

+ + +
+
+ + + + + + +
+
+
+
+ + + + + \ No newline at end of file diff --git a/login/login.css b/login/login.css index 42900493..d49870d7 100644 --- a/login/login.css +++ b/login/login.css @@ -18,6 +18,7 @@ body { opacity: 1.2; } + h1 { font-weight: 700; letter-spacing: -1.5px; @@ -116,26 +117,26 @@ button.ghost { color: #fff; } -button.ghost i{ +button.ghost i { position: absolute; opacity: 0; transition: 0.3s ease-in-out; } -button.ghost i.register{ +button.ghost i.register { right: 70px; } -button.ghost i.login{ +button.ghost i.login { left: 70px; } -button.ghost:hover i.register{ +button.ghost:hover i.register { right: 40px; opacity: 1; } -button.ghost:hover i.login{ +button.ghost:hover i.login { left: 40px; opacity: 1; } @@ -204,6 +205,7 @@ input { } @keyframes show { + 0%, 49.99% { opacity: 0; @@ -253,11 +255,9 @@ input { right: 0; top: 0; bottom: 0; - background: linear-gradient( - to top, - rgba(46, 94, 109, 0.4) 40%, - rgba(46, 94, 109, 0) - ); + background: linear-gradient(to top, + rgba(46, 94, 109, 0.4) 40%, + rgba(46, 94, 109, 0)); } .container.right-panel-active .overlay { @@ -314,60 +314,60 @@ input { -#login-section{ +#login-section { display: flex; align-items: center; width: 100%; - } +} - #loginPassword{ +#loginPassword { position: relative; - } +} - #toggleLoginPassword{ +#toggleLoginPassword { position: absolute; background: transparent; border: none; color: #505050; right: 15%; - padding:2px; + padding: 2px; transition: 0.3s ease-in-out; - } +} + - - #register-section{ +#register-section { display: flex; align-items: center; width: 100%; - } +} - #registerPassword{ +#registerPassword { position: relative; - } +} - #toggleRegisterPassword{ +#toggleRegisterPassword { position: absolute; background: transparent; border: none; color: #505050; right: 15%; - padding:2px; + padding: 2px; transition: 0.3s ease-in-out; - } - - - /* Add styles for the success banners */ - .success-banner { - display: none; - background-color: #4CAF50; - color: white; - padding: 15px; - text-align: center; - position: fixed; - top: 0; - width: 100%; - z-index: 10000; - } +} + + +/* Add styles for the success banners */ +.success-banner { + display: none; + background-color: #4CAF50; + color: white; + padding: 15px; + text-align: center; + position: fixed; + top: 0; + width: 100%; + z-index: 10000; +} /* Add styles for the success banners */ .decline-banner { @@ -387,12 +387,13 @@ input { color: white; background-color: #1877F2; } + .social-container .goog:hover { color: white; background-color: #DB4437; } + .social-container .lin:hover { color: white; background-color: #0A66C2; -} - +} \ No newline at end of file diff --git a/login/script.js b/login/script.js index 00db0b3e..2c13caaf 100644 --- a/login/script.js +++ b/login/script.js @@ -1,4 +1,4 @@ -document.addEventListener("DOMContentLoaded", function() { +document.addEventListener("DOMContentLoaded", function () { const registerButton = document.getElementById("register"); const loginButton = document.getElementById("login"); const container = document.getElementById("container"); @@ -35,23 +35,22 @@ function togglePasswordVisibility(buttonId, inputId, iconId) { const icon = document.getElementById(iconId); toggleButton.addEventListener('click', function (e) { - // Toggle the type attribute - const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password'; - passwordInput.setAttribute('type', type); - - // Toggle the icon - if (type === 'password') { - icon.classList.remove('fa-eye-slash'); - icon.classList.add('fa-eye'); - } else { - icon.classList.remove('fa-eye'); - icon.classList.add('fa-eye-slash'); - } + // Toggle the type attribute + const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password'; + passwordInput.setAttribute('type', type); + + // Toggle the icon + if (type === 'password') { + icon.classList.remove('fa-eye-slash'); + icon.classList.add('fa-eye'); + } else { + icon.classList.remove('fa-eye'); + icon.classList.add('fa-eye-slash'); + } }); } togglePasswordVisibility('toggleLoginPassword', 'loginPassword', 'loginIcon'); togglePasswordVisibility('toggleRegisterPassword', 'registerPassword', 'registerIcon'); - - \ No newline at end of file + diff --git a/newLogin.html b/newLogin.html index 552851ff..cc2c356c 100644 --- a/newLogin.html +++ b/newLogin.html @@ -1,6 +1,7 @@ - + + @@ -9,14 +10,15 @@ - + +
Logged in successfully
Logged in Blocked
credentials didn't match
Registered successfully
Registered Blocked
Same email address
- +
- +
@@ -33,14 +35,14 @@

Tour Guide

- - + +
- +
- Forgot password? + Forgot password?
@@ -106,7 +108,7 @@

Start your
journey now

const strengthMsg = document.getElementById("passwordStrengthMsg"); let strength = "Weak"; let color = "red"; - + if (password.length >= 8 && /[A-Z]/.test(password) && /[a-z]/.test(password) && /[0-9]/.test(password) && /[!@#\$%\^\&*\)\(+=._-]/.test(password)) { strength = "Strong"; color = "green"; @@ -144,13 +146,12 @@

Start your
journey now

//Form validation for registration name document.getElementById("registerName").addEventListener("keypress", function (event) { - var char = String.fromCharCode(event.which); + var char = String.fromCharCode(event.which); if (!(/[a-zA-Z]/.test(char))) { - event.preventDefault(); + event.preventDefault(); } }); - document.getElementById("loginForm").addEventListener("submit", function (event) { event.preventDefault(); validateForm("login"); @@ -236,4 +237,5 @@

Start your
journey now

}); - + + \ No newline at end of file