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 1/3] 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 From 1860d3a2219d55c278e293427eb59875d13ade29 Mon Sep 17 00:00:00 2001 From: saras-69 <115482884+saras-69@users.noreply.github.com> Date: Mon, 4 Nov 2024 01:43:50 +0530 Subject: [PATCH 2/3] . --- forgotPassword.html | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/forgotPassword.html b/forgotPassword.html index 747feb9a..500c994e 100644 --- a/forgotPassword.html +++ b/forgotPassword.html @@ -49,7 +49,6 @@ display: flex; justify-content: center; align-items: center; - padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); @@ -127,7 +126,7 @@

Forgot Password

- +
@@ -156,8 +155,31 @@

Forgot Password

return; } + // Prepare data for backend integration + const data = { + email: recoveryEmail + }; + // Implement your password recovery logic here - alert("Password recovery link has been sent to your email address"); + fetch('YOUR_BACKEND_ENDPOINT', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(data) + }) + .then(response => response.json()) + .then(data => { + if (data.success) { + alert("Password recovery link has been sent to your email address"); + } else { + alert("An error occurred. Please try again."); + } + }) + .catch((error) => { + console.error('Error:', error); + alert("An error occurred. Please try again."); + }); }); function validateEmail(email) { From 2d0b1cc2efaabe1accdac12e5306a039ff6e2a3c Mon Sep 17 00:00:00 2001 From: saras-69 <115482884+saras-69@users.noreply.github.com> Date: Wed, 6 Nov 2024 01:47:55 +0530 Subject: [PATCH 3/3] update forgotPassword.html --- forgotPassword.html | 67 +++++++++++++++++++++++++++++++++++++++------ 1 file changed, 59 insertions(+), 8 deletions(-) diff --git a/forgotPassword.html b/forgotPassword.html index 500c994e..bfc74f4f 100644 --- a/forgotPassword.html +++ b/forgotPassword.html @@ -9,7 +9,7 @@ - + @@ -130,12 +181,12 @@

Forgot Password

- + - +