teste login
Deploy / Deploy (push) Failing after 1m20s
Details
Deploy / Deploy (push) Failing after 1m20s
Details
This commit is contained in:
parent
ae221ba8f1
commit
5dc30abb95
|
|
@ -0,0 +1,177 @@
|
|||
<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>
|
||||
|
|
@ -6,6 +6,7 @@ title: "{{ page.file }}"
|
|||
<div class="publication">
|
||||
<div class="container">
|
||||
<br />
|
||||
{% include modal_login.html %}
|
||||
|
||||
<div class="tabs is-centered is-boxed is-medium mb-6">
|
||||
{% include sidebar.html %}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ permalink: /automation/
|
|||
<div class="publication">
|
||||
<div class="container">
|
||||
<br />
|
||||
{% include modal_login.html %}
|
||||
|
||||
<div class="tabs is-centered is-boxed is-medium mb-6">
|
||||
{% include sidebar.html %}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ permalink: /bassline/
|
|||
<div class="publication">
|
||||
<div class="container">
|
||||
<br />
|
||||
{% include modal_login.html %}
|
||||
|
||||
<div class="tabs is-centered is-boxed is-medium mb-6">
|
||||
{% include sidebar.html %}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ permalink: /envie_seu_projeto/
|
|||
<main class="main-content">
|
||||
<div class="publication">
|
||||
<div class="container">
|
||||
{% include modal_login.html %}
|
||||
<br />
|
||||
|
||||
<div class="tabs is-centered is-boxed is-medium mb-6">
|
||||
|
|
@ -41,7 +42,7 @@ permalink: /envie_seu_projeto/
|
|||
<h3 class="title is-4 has-text-grey-dark">Login Necessário</h3>
|
||||
<p class="mb-5">Você precisa estar logado para enviar projetos e samples para a comunidade.</p>
|
||||
<div class="buttons is-centered">
|
||||
<a href="/mmpSearch/login/" class="button is-info is-medium">
|
||||
<a href="#" class="button is-info is-medium js-trigger-login">
|
||||
<span class="icon"><i class="fa-solid fa-right-to-bracket"></i></span>
|
||||
<span>Fazer Login / Cadastrar</span>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ permalink: /samples/
|
|||
|
||||
<main class="main-content">
|
||||
<div class="publication">
|
||||
{% include modal_login.html %}
|
||||
|
||||
<div class="container">
|
||||
<br />
|
||||
|
|
@ -34,7 +35,7 @@ permalink: /samples/
|
|||
<span>Enviar Sample</span>
|
||||
</button>
|
||||
|
||||
<a href="/mmpSearch/login/" id="btn-login-trigger" class="button is-small is-warning is-light mr-3" title="Fazer Login">
|
||||
<a href="#" class="button is-small is-warning is-light mr-3 js-trigger-login" title="Fazer Login">
|
||||
<span class="icon"><i class="fa-solid fa-lock"></i></span>
|
||||
<span>Login para Enviar</span>
|
||||
</a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue