JotaChina/mmpSearch
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

teste login

Browse Source
This commit is contained in:
JotaChina committed 2025-12-09 18:41:08 -03:00
1 parent 78fa3f545c
commit 1cdab953f5
1 file changed
Download Patch File Download Diff File Expand all files Collapse all files
_layouts/modal_login.html
-177
View File
@@ -1,177 +0,0 @@
<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>