---
layout: default
title: Login - MMPSearch
permalink: /login/
---

<main class="main-content">
  <div class="publication">
    <div class="container">
      <br />
      
      <div class="tabs is-centered is-boxed is-medium mb-6">
        {% include sidebar.html %}
      </div>

      <div class="columns is-centered">
        <div class="column is-6">
          <div class="box p-5" style="border: 1px solid #cfe8fc; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.05);">
            <div class="has-text-centered mb-5">
              <span class="icon is-large has-text-info"><i class="fa-solid fa-user-circle fa-3x"></i></span>
              <h1 class="title is-4 mt-2 has-text-grey-dark" id="auth-title">Acesse sua conta</h1>
              <p class="subtitle is-6 has-text-grey">Para enviar projetos e samples.</p>
            </div>

            <form id="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><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><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">Entrar</button></div>
              <p class="has-text-centered mt-3 is-size-7">Não tem conta? <a href="#" id="toggle-register">Crie uma agora</a>.</p>
            </form>

            <form id="register-form" class="is-hidden">
              <div class="field"><label class="label">Criar Usuário</label><div class="control has-icons-left"><input class="input" type="text" name="username" required><span class="icon is-small is-left"><i class="fa-solid fa-user-plus"></i></span></div></div>
              <div class="field"><label class="label">Criar Senha</label><div class="control has-icons-left"><input class="input" type="password" name="password" required><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">Cadastrar</button></div>
              <p class="has-text-centered mt-3 is-size-7">Já tem conta? <a href="#" id="toggle-login">Fazer Login</a>.</p>
            </form>

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

<script>
document.addEventListener('DOMContentLoaded', () => {
    const loginForm = document.getElementById('login-form');
    const registerForm = document.getElementById('register-form');
    const msgBox = document.getElementById('auth-message');

    document.getElementById('toggle-register').onclick = (e) => { e.preventDefault(); loginForm.classList.add('is-hidden'); registerForm.classList.remove('is-hidden'); document.getElementById('auth-title').textContent = "Criar nova conta"; };
    document.getElementById('toggle-login').onclick = (e) => { e.preventDefault(); registerForm.classList.add('is-hidden'); loginForm.classList.remove('is-hidden'); document.getElementById('auth-title').textContent = "Acesse sua conta"; };

    async function handleAuth(url, formData) {
        msgBox.classList.add('is-hidden');
        try {
            // URL Relativa para usar Proxy Apache
            const res = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(Object.fromEntries(formData)) });
            const data = await res.json();
            msgBox.classList.remove('is-hidden');
            msgBox.textContent = data.message;
            msgBox.className = res.ok ? "notification is-success is-light mt-4" : "notification is-danger is-light mt-4";
            if(res.ok && url.includes('login')) setTimeout(() => window.location.href = '/envie_seu_projeto/', 1000);
            if(res.ok && url.includes('register')) setTimeout(() => document.getElementById('toggle-login').click(), 1500);
        } catch(e) { msgBox.textContent = "Erro de conexão"; msgBox.classList.remove('is-hidden'); }
    }

    loginForm.onsubmit = (e) => { e.preventDefault(); handleAuth('/api/login', new FormData(loginForm)); };
    registerForm.onsubmit = (e) => { e.preventDefault(); handleAuth('/api/register', new FormData(registerForm)); };
});
</script>