mmpSearch/pages/login.md

layout, title, permalink

layout	title	permalink
default	Login - MMPSearch	/login/

  <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>

<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 = '/mmpSearch/', 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>