73 lines
4.5 KiB
Markdown
73 lines
4.5 KiB
Markdown
---
|
|
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 = '/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> |