newosinadjango/osinaweb/static/js/login_register/login-register.js

//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();
}