Skip to content

Commit 6bd40fb

Browse files
akshay0611akshay0611
committed
Fix: Added and linked Forgot Password modal functionality
1 parent 8e7e543 commit 6bd40fb

File tree

1 file changed

+91
-121
lines changed

1 file changed

+91
-121
lines changed

‎careers.html

Lines changed: 91 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -611,6 +611,96 @@ <h3 class="join"><i class="fa-solid fa-user"></i> Register to join us....</h3>
611611
</div>
612612
</nav>
613613

614+
<!-- Forgot Password Modal -->
615+
<div id="forgotPasswordModal" class="modal">
616+
<div class="modal-content">
617+
<span class="close" style="display: flex; justify-content: right;">&times;</span>
618+
<div class="mt-3">
619+
<h3 class="join"><i class="fa-solid fa-unlock"></i> Forgot Password</h3>
620+
<form class="px-3 py-4" id="forgotPasswordForm">
621+
<div class="form-group">
622+
<label class="d-flex">Enter your email address</label>
623+
<input type="email" placeholder="Email Address" class="form-control" required />
624+
</div>
625+
<button class="main-btn w-100 mb-3">Submit</button>
626+
<p class="text-center">
627+
<a href="#" id="backToLogin">Back to Login</a>
628+
</p>
629+
</form>
630+
</div>
631+
</div>
632+
</div>
633+
634+
<script>
635+
// Get modal elements
636+
const registerModal = document.getElementById("registerModal");
637+
const forgotPasswordModal = document.getElementById("forgotPasswordModal");
638+
const loginModal = document.getElementById("myModal");
639+
640+
641+
// Get action elements
642+
const registerLink = document.getElementById("registerLink");
643+
const loginLink = document.getElementById("loginLink");
644+
const forgotPasswordLink = document.getElementById("forgot-password");
645+
const backToLoginLink = document.getElementById("backToLogin");
646+
647+
648+
// Get close buttons
649+
const closeButtons = document.querySelectorAll(".modal .close");
650+
651+
652+
// Utility function to show a specific modal and hide others
653+
const showModal = (modalToShow) => {
654+
[registerModal, forgotPasswordModal, loginModal].forEach((modal) => {
655+
modal.style.display = modal === modalToShow ? "block" : "none";
656+
});
657+
};
658+
659+
660+
// Show Register Modal
661+
registerLink.addEventListener("click", (e) => {
662+
e.preventDefault();
663+
showModal(registerModal);
664+
});
665+
666+
667+
// Show Login Modal from Register
668+
loginLink.addEventListener("click", (e) => {
669+
e.preventDefault();
670+
showModal(loginModal);
671+
});
672+
673+
674+
// Show Forgot Password Modal
675+
forgotPasswordLink.addEventListener("click", (e) => {
676+
e.preventDefault();
677+
showModal(forgotPasswordModal);
678+
});
679+
680+
681+
// Back to Login from Forgot Password
682+
backToLoginLink.addEventListener("click", (e) => {
683+
e.preventDefault();
684+
showModal(loginModal);
685+
});
686+
687+
688+
// Close modals when clicking the close button
689+
closeButtons.forEach((button) => {
690+
button.addEventListener("click", () => {
691+
button.closest(".modal").style.display = "none";
692+
});
693+
});
694+
695+
696+
// Hide modal when clicking outside the modal content
697+
window.addEventListener("click", (e) => {
698+
if (e.target.classList.contains("modal")) {
699+
e.target.style.display = "none";
700+
}
701+
});
702+
</script>
703+
614704
<nav class="mobile-menu ">
615705
<a class="page-scroll" href="./index.html">Home 🏡</a>
616706
<a class="page-scroll" href="./about.html">About Us 📖</a>
@@ -1694,126 +1784,7 @@ <h4 class="title custom-margin">Contact Us</h4>
16941784
defer></script>
16951785
<script defer src="./assets/js/arthsathi-style.js"></script>
16961786
<script src="./assets/js/botpress.js"></script>
1697-
<script>
1698-
// Get the modals
1699-
var loginModal = document.getElementById('myModal');
1700-
var registerModal = document.getElementById('registerModal');
1701-
1702-
// Get the button that opens the login modal
1703-
var loginBtn = document.getElementById('loginBtn');
1704-
1705-
// Get the links that open the register and login modals
1706-
var registerLink = document.getElementById('registerLink');
1707-
var loginLink = document.getElementById('loginLink');
1708-
1709-
// Get the <span> elements that close the modals
1710-
var closeBtns = document.getElementsByClassName('close');
1711-
1712-
//show and hide icon button
1713-
document.addEventListener('DOMContentLoaded', () => {
1714-
const togglePasswordButtons = document.querySelectorAll('.toggle-password-btn');
1715-
1716-
togglePasswordButtons.forEach(button => {
1717-
button.addEventListener('click', () => {
1718-
const passwordInput = button.previousElementSibling;
1719-
if (passwordInput.type === 'password') {
1720-
passwordInput.type = 'text';
1721-
button.innerHTML = `<i class="fa-solid fa-eye-slash"></i>`
1722-
} else {
1723-
passwordInput.type = 'password';
1724-
button.innerHTML = `<i class="fa-solid fa-eye"></i>`
1725-
}
1726-
});
1727-
});
1728-
});
1729-
1730-
1731-
// When the user clicks the register link, open the register modal
1732-
registerLink.onclick = function (event) {
1733-
event.preventDefault();
1734-
loginModal.style.display = 'none';
1735-
registerModal.style.display = 'block';
1736-
}
1737-
1738-
// When the user clicks the login link, open the login modal
1739-
loginLink.onclick = function (event) {
1740-
event.preventDefault();
1741-
registerModal.style.display = 'none';
1742-
loginModal.style.display = 'block';
1743-
}
1744-
1745-
// When the user clicks on <span> (x), close the modal
1746-
for (var i = 0; i < closeBtns.length; i++) {
1747-
closeBtns[i].onclick = function () {
1748-
loginModal.style.display = 'none';
1749-
registerModal.style.display = 'none';
1750-
}
1751-
}
1752-
1753-
// When the user clicks anywhere outside of the modal, close it
1754-
window.onclick = function (event) {
1755-
if (event.target == loginModal) {
1756-
loginModal.style.display = 'none';
1757-
}
1758-
if (event.target == registerModal) {
1759-
registerModal.style.display = 'none';
1760-
}
1761-
}
1762-
function openModal() {
1763-
var modal = document.getElementById("myModal");
1764-
modal.style.display = "block";
1765-
document.title = "Login/Register - FinVeda"; // Update the title when modal is opened
1766-
}
1767-
1768-
function closeModal() {
1769-
var modal = document.getElementById("myModal");
1770-
modal.style.display = "none";
1771-
document.title = "FinVeda"; // Revert the title back when modal is closed
1772-
}
1773-
1774-
1775-
// Close button event listeners for modals
1776-
registerModal.querySelector(".close").addEventListener("click", closeModal);
1777-
loginModal.querySelector(".close").addEventListener("click", closeModal);
1778-
1779-
1780-
1781-
window.onclick = function (event) {
1782-
var modal = document.getElementById("myModal");
1783-
if (event.target == modal) {
1784-
closeModal(); // Call closeModal function
1785-
}
1786-
};
1787-
1788-
1789-
document.addEventListener("DOMContentLoaded", function () {
1790-
const registerModal = document.getElementById("registerModal");
1791-
const loginModal = document.getElementById("myModal");
1792-
const registerLink = document.getElementById("registerLink");
1793-
const loginLink = document.getElementById("loginLink");
1794-
1795-
// Event listener for the register link
1796-
registerLink.addEventListener("click", function (event) {
1797-
event.preventDefault();
1798-
loginModal.style.display = "none";
1799-
registerModal.style.display = "block";
1800-
document.title = "Login/Register - FinVeda"; // Update title when registering
1801-
});
1802-
1803-
// Event listener for the login link
1804-
loginLink.addEventListener("click", function (event) {
1805-
event.preventDefault();
1806-
registerModal.style.display = "none";
1807-
loginModal.style.display = "block";
1808-
document.title = "Login/Register - FinVeda"; // Update title when logging in
1809-
});
1810-
1811-
// Close button event listeners for modals
1812-
registerModal.querySelector(".close").addEventListener("click", closeModal);
1813-
loginModal.querySelector(".close").addEventListener("click", closeModal);
1814-
});
1815-
1816-
</script>
1787+
18171788
<script src="./smoothScroll.js"></script>
18181789

18191790
<script src="./assets/js/preloader.js"></script>
@@ -2031,6 +2002,5 @@ <h2>Which feature of Finveda do you believe boosts your financial knowledge the
20312002
themeToggle.addEventListener('click', () => {
20322003
document.body.classList.toggle('dark-mode');
20332004
});
2034-
20352005
</body>
20362006
</html>

0 commit comments

Comments
 (0)