authFormHandler.js

const hideModalParts = () => {
    document.querySelector('.modal__auth-form').classList.add('hidden');
    document.querySelector('.modal__auth-form--registration').classList.add('hidden');
    document.querySelector('.modal__auth-form--sign-in').classList.add('hidden');
    document.querySelector('.modal__auth-form--restore').classList.add('hidden');
    document.querySelector('.modal__header').classList.add('hidden');
    document.querySelector('.modal__header--restore').classList.add('hidden');
};

const openRegistrationModal = () => {
    removeBodyScroll();
    removeActiveCssClass();
    hideModalParts();

    document.querySelector('.modal__auth-form').classList.remove('hidden');
    document.querySelector('.modal__auth-form--registration').classList.remove('hidden');
    document.querySelector('.modal__header').classList.remove('hidden');
    document.querySelector('.modal__button.reg').classList.add('modal__button--active');
};

const openLoginModal = () => {
    removeBodyScroll();
    removeActiveCssClass();
    hideModalParts();

    document.querySelector('.modal__auth-form').classList.remove('hidden');
    document.querySelector('.modal__auth-form--sign-in').classList.remove('hidden');
    document.querySelector('.modal__header').classList.remove('hidden');
    document.querySelector('.modal__button.log').classList.add('modal__button--active');
};

const openRemindPasswordModal = () => {
    removeBodyScroll();
    removeActiveCssClass();
    hideModalParts();

    document.querySelector('.modal__auth-form').classList.remove('hidden');
    document.querySelector('.modal__auth-form--restore').classList.remove('hidden');
    document.querySelector('.modal__header--restore').classList.remove('hidden');
};

const removeBodyScroll = () => {
    document.body.classList.add('modal-open')
};

const addBodyScroll = () => {
    document.body.classList.remove('modal-open')
};

const removeActiveCssClass = () => {
    const buttons = document.querySelectorAll('.modal__header .modal__button');
    buttons.forEach(button => {
        button.classList.remove('modal__button--active')
    })
};

if (document.querySelectorAll('.header__auth .auth__inner').length > 0) {

    const auth = document.querySelectorAll('.header__auth .auth__inner');

    for (const elem of auth) {
        elem.addEventListener('click', (e) => {
            const classList = e.target.classList;

            if (classList.contains('auth__login')) {
                openLoginModal()
            }

            if (classList.contains('auth__registration')) {
                openRegistrationModal()
            }
        })
    }
}

if (document.querySelector('.modal__auth-form .close-button')) {
    const closeModalButton = document.querySelector('.modal__auth-form .close-button');

    closeModalButton.addEventListener('click', (e) => {
        addBodyScroll();
        hideModalParts();
    })
}

if (document.querySelector('.modal__header')) {
    const modalHeader = document.querySelector('.modal__header');

    modalHeader.addEventListener('click', (e) => {
        const classList = e.target.classList;

        if (classList.contains('reg')) {
            openRegistrationModal()
        }

        if (classList.contains('log')) {
            openLoginModal()
        }

    })
}

if (document.getElementsByClassName('form__remind-password-button').length > 0) {
    const remindPasswordButtons = document.getElementsByClassName('form__remind-password-button');

    for (let button of remindPasswordButtons) {
        button.addEventListener('click', () => {
            openRemindPasswordModal()
        })
    }
}