From 5dc30abb958effbb399c42d45af19d4cfe10073e Mon Sep 17 00:00:00 2001
From: JotaChina <sousacj1@gmail.com>
Date: Tue, 9 Dec 2025 18:38:55 -0300
Subject: [PATCH] teste login

---
 _layouts/modal_login.html | 177 ++++++++++++++++++++++++++++++++++++++
 _layouts/projetos.html    |   1 +
 pages/automacao.md        |   1 +
 pages/bassline.md         |   1 +
 pages/enviaProjeto.md     |   3 +-
 pages/samples.md          |   3 +-
 6 files changed, 184 insertions(+), 2 deletions(-)
 create mode 100644 _layouts/modal_login.html

diff --git a/_layouts/modal_login.html b/_layouts/modal_login.html
new file mode 100644
index 00000000..c69ee74c
--- /dev/null
+++ b/_layouts/modal_login.html
@@ -0,0 +1,177 @@
+<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>
\ No newline at end of file
diff --git a/_layouts/projetos.html b/_layouts/projetos.html
index 8adf289b..045f25cf 100755
--- a/_layouts/projetos.html
+++ b/_layouts/projetos.html
@@ -6,6 +6,7 @@ title: "{{ page.file }}"
 <div class="publication">
   <div class="container">
     <br />
+    {% include modal_login.html %}
 
     <div class="tabs is-centered is-boxed is-medium mb-6">
       {% include sidebar.html %}
diff --git a/pages/automacao.md b/pages/automacao.md
index dad2d6ea..92b0cfa3 100755
--- a/pages/automacao.md
+++ b/pages/automacao.md
@@ -10,6 +10,7 @@ permalink: /automation/
   <div class="publication">
     <div class="container">
       <br />
+      {% include modal_login.html %}
 
       <div class="tabs is-centered is-boxed is-medium mb-6">
         {% include sidebar.html %}
diff --git a/pages/bassline.md b/pages/bassline.md
index 4919ca84..8bfab24d 100755
--- a/pages/bassline.md
+++ b/pages/bassline.md
@@ -10,6 +10,7 @@ permalink: /bassline/
   <div class="publication">
     <div class="container">
       <br />
+      {% include modal_login.html %}
 
       <div class="tabs is-centered is-boxed is-medium mb-6">
         {% include sidebar.html %}
diff --git a/pages/enviaProjeto.md b/pages/enviaProjeto.md
index 69a76c42..5d7d5e28 100755
--- a/pages/enviaProjeto.md
+++ b/pages/enviaProjeto.md
@@ -9,6 +9,7 @@ permalink: /envie_seu_projeto/
 <main class="main-content">
   <div class="publication">
     <div class="container">
+    {% include modal_login.html %}
       <br />
       
       <div class="tabs is-centered is-boxed is-medium mb-6">
@@ -41,7 +42,7 @@ permalink: /envie_seu_projeto/
                 <h3 class="title is-4 has-text-grey-dark">Login Necessário</h3>
                 <p class="mb-5">Você precisa estar logado para enviar projetos e samples para a comunidade.</p>
                 <div class="buttons is-centered">
-                    <a href="/mmpSearch/login/" class="button is-info is-medium">
+                    <a href="#" class="button is-info is-medium js-trigger-login">
                         <span class="icon"><i class="fa-solid fa-right-to-bracket"></i></span>
                         <span>Fazer Login / Cadastrar</span>
                     </a>
diff --git a/pages/samples.md b/pages/samples.md
index 460c1a43..68074ed0 100755
--- a/pages/samples.md
+++ b/pages/samples.md
@@ -8,6 +8,7 @@ permalink: /samples/
 
 <main class="main-content">
   <div class="publication">
+  {% include modal_login.html %}
   
     <div class="container">
       <br />
@@ -34,7 +35,7 @@ permalink: /samples/
                   <span>Enviar Sample</span>
               </button>
 
-              <a href="/mmpSearch/login/" id="btn-login-trigger" class="button is-small is-warning is-light mr-3" title="Fazer Login">
+              <a href="#" class="button is-small is-warning is-light mr-3 js-trigger-login" title="Fazer Login">
                   <span class="icon"><i class="fa-solid fa-lock"></i></span>
                   <span>Login para Enviar</span>
               </a>