You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
2.0 KiB
JavaScript
61 lines
2.0 KiB
JavaScript
//TO SWITCH BETWEEN THE REGISTER FORM AND LOGIN FORM
|
|
const loginToRegisterButton = document.getElementById('loginToRegisterButton');
|
|
const registerToLoginButton = document.getElementById('registerToLoginButton');
|
|
const loginForm = document.getElementById('loginForm');
|
|
const registerForm = document.getElementById('registerForm');
|
|
const loginRegisterContainer = document.getElementById('loginRegisterContainer');
|
|
|
|
loginToRegisterButton.addEventListener('click', showRegisterForm);
|
|
registerToLoginButton.addEventListener('click', showLoginForm);
|
|
|
|
|
|
function showRegisterForm() {
|
|
loginForm.style.display = 'none';
|
|
registerForm.style.display = 'flex';
|
|
if (window.innerWidth < 1200) {
|
|
loginRegisterContainer.classList.remove('h-[100vh]');
|
|
loginRegisterContainer.classList.add('h-fit');
|
|
}
|
|
}
|
|
|
|
function showLoginForm() {
|
|
loginForm.style.display = 'flex';
|
|
registerForm.style.display = 'none';
|
|
if (window.innerWidth < 1200) {
|
|
loginRegisterContainer.classList.add('h-[100vh]');
|
|
loginRegisterContainer.classList.remove('h-fit');
|
|
}
|
|
}
|
|
|
|
|
|
//TO SHOW PASSWORD INPUT
|
|
const showPasswordButton = document.getElementById('showPasswordButton');
|
|
const passwordInput = document.getElementById('passwordInput');
|
|
|
|
showPasswordButton.addEventListener('click', togglePasswordVisibility);
|
|
|
|
function togglePasswordVisibility() {
|
|
if (passwordInput.type === 'password') {
|
|
passwordInput.type = 'text';
|
|
} else {
|
|
passwordInput.type = 'password';
|
|
}
|
|
}
|
|
|
|
//FUNCTION TO SHOW AN ERROR MESSAGE WITH AND MAKE IT DISAPPEAR AFTER 10 SECONDS
|
|
function showError() {
|
|
const errorMessage = document.getElementById('error-message');
|
|
errorMessage.classList.add("show-message");
|
|
|
|
// Automatically hide the message container after 10 seconds
|
|
setTimeout(() => {
|
|
errorMessage.classList.add("hide-message");
|
|
}, 10000);
|
|
}
|
|
|
|
// Check if error messages are present in the rendered HTML
|
|
const errorMessages = document.querySelectorAll('.messages p');
|
|
if (errorMessages.length > 0) {
|
|
showError();
|
|
}
|