mmpSearch/_includes/modal_login.html

<div id="auth-modal" class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title has-text-centered" id="auth-modal-title">Acessar Conta</p>
      <button class="delete" aria-label="close" id="close-auth-modal"></button>
    </header>
    <section class="modal-card-body">
      
      <div class="has-text-centered mb-4">
        <span class="icon is-large has-text-info"><i class="fa-solid fa-user-circle fa-3x"></i></span>
      </div>

      <form id="global-login-form">
        <div class="field">
            <label class="label">Usuário</label>
            <div class="control has-icons-left">
                <input class="input" type="text" name="username" required placeholder="Seu usuário">
                <span class="icon is-small is-left"><i class="fa-solid fa-user"></i></span>
            </div>
        </div>
        <div class="field">
            <label class="label">Senha</label>
            <div class="control has-icons-left">
                <input class="input" type="password" name="password" required placeholder="Sua senha">
                <span class="icon is-small is-left"><i class="fa-solid fa-lock"></i></span>
            </div>
        </div>
        <div class="field mt-5">
            <button type="submit" class="button is-info is-fullwidth" id="btn-login-submit">Entrar</button>
        </div>
        <p class="has-text-centered mt-3 is-size-7">
            Não tem conta? <a href="#" id="toggle-to-register">Crie uma agora</a>.
        </p>
      </form>

      <form id="global-register-form" class="is-hidden">
        <div class="notification is-warning is-light is-size-7">
            Crie sua conta para enviar samples e projetos para a comunidade.
        </div>
        <div class="field">
            <label class="label">Escolha um Usuário</label>
            <div class="control has-icons-left">
                <input class="input" type="text" name="username" required placeholder="Nome único">
                <span class="icon is-small is-left"><i class="fa-solid fa-user-plus"></i></span>
            </div>
        </div>
        <div class="field">
            <label class="label">Escolha uma Senha</label>
            <div class="control has-icons-left">
                <input class="input" type="password" name="password" required placeholder="Senha segura">
                <span class="icon is-small is-left"><i class="fa-solid fa-lock"></i></span>
            </div>
        </div>
        <div class="field mt-5">
            <button type="submit" class="button is-success is-fullwidth" id="btn-register-submit">Cadastrar</button>
        </div>
        <p class="has-text-centered mt-3 is-size-7">
            Já tem conta? <a href="#" id="toggle-to-login">Fazer Login</a>.
        </p>
      </form>

      <div id="auth-notification" class="notification is-danger is-light mt-4 is-hidden"></div>

    </section>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    // ELEMENTOS DO DOM
    const authModal = document.getElementById('auth-modal');
    const loginForm = document.getElementById('global-login-form');
    const registerForm = document.getElementById('global-register-form');
    const authTitle = document.getElementById('auth-modal-title');
    const msgBox = document.getElementById('auth-notification');
    
    // BOTÕES DE TOGGLE
    const toRegister = document.getElementById('toggle-to-register');
    const toLogin = document.getElementById('toggle-to-login');
    const closeBtns = document.querySelectorAll('#close-auth-modal, .modal-background');

    // === LÓGICA DE ABRIR O MODAL ===
    // Procura por QUALQUER link/botão no site que tenha a classe .js-trigger-login
    window.openLoginModal = () => {
        authModal.classList.add('is-active');
        document.documentElement.classList.add('is-clipped');
        // Reseta estado
        loginForm.classList.remove('is-hidden');
        registerForm.classList.add('is-hidden');
        authTitle.textContent = "Acessar Conta";
        msgBox.classList.add('is-hidden');
    };

    // Aplica evento em botões existentes
    document.body.addEventListener('click', (e) => {
        // Verifica se clicou num elemento (ou filho) com a classe gatilho
        if (e.target.closest('.js-trigger-login')) {
            e.preventDefault();
            window.openLoginModal();
        }
    });

    // === LÓGICA DE FECHAR ===
    closeBtns.forEach(btn => btn.addEventListener('click', () => {
        authModal.classList.remove('is-active');
        document.documentElement.classList.remove('is-clipped');
    }));

    // === ALTERNAR ENTRE LOGIN E CADASTRO ===
    toRegister.onclick = (e) => {
        e.preventDefault();
        loginForm.classList.add('is-hidden');
        registerForm.classList.remove('is-hidden');
        authTitle.textContent = "Criar Nova Conta";
        msgBox.classList.add('is-hidden');
    };

    toLogin.onclick = (e) => {
        e.preventDefault();
        registerForm.classList.add('is-hidden');
        loginForm.classList.remove('is-hidden');
        authTitle.textContent = "Acessar Conta";
        msgBox.classList.add('is-hidden');
    };

    // === SUBMISSÃO (AJAX) ===
    async function handleGlobalAuth(url, formData, btnId) {
        const btn = document.getElementById(btnId);
        btn.classList.add('is-loading');
        msgBox.classList.add('is-hidden');

        try {
            // URL Relativa (/api/...) graças ao Proxy
            const res = await fetch(url, { 
                method: 'POST', 
                headers: { 'Content-Type': 'application/json' }, 
                body: JSON.stringify(Object.fromEntries(formData)) 
            });
            const data = await res.json();
            
            btn.classList.remove('is-loading');

            if (res.ok) {
                // SUCESSO!
                msgBox.className = "notification is-success is-light mt-4";
                msgBox.textContent = "Sucesso! Recarregando...";
                msgBox.classList.remove('is-hidden');
                
                // Aguarda 1 seg e recarrega a página atual para atualizar o estado
                setTimeout(() => {
                    window.location.reload(); 
                }, 800);
            } else {
                // ERRO
                msgBox.className = "notification is-danger is-light mt-4";
                msgBox.textContent = data.message || "Erro de autenticação";
                msgBox.classList.remove('is-hidden');
            }
        } catch(e) {
            btn.classList.remove('is-loading');
            msgBox.textContent = "Erro de conexão com servidor.";
            msgBox.classList.remove('is-hidden');
        }
    }

    loginForm.onsubmit = (e) => { 
        e.preventDefault(); 
        handleGlobalAuth('/api/login', new FormData(loginForm), 'btn-login-submit'); 
    };

    registerForm.onsubmit = (e) => { 
        e.preventDefault(); 
        handleGlobalAuth('/api/register', new FormData(registerForm), 'btn-register-submit'); 
    };
});
</script>