teste login

2025-12-09 17:27:00 -03:00
1 parent 1cfce4c35f
commit 22b998796c
@@ -0,0 +1,73 @@
+---
+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>