77 lines
3.3 KiB
JavaScript
77 lines
3.3 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const loginForm = document.getElementById('loginForm');
|
|
const passwordInput = document.getElementById('password');
|
|
const togglePasswordBtn = document.getElementById('togglePassword');
|
|
const errorMessage = document.getElementById('errorMessage');
|
|
const btnSubmit = document.getElementById('btnSubmit');
|
|
|
|
// Alternar visualização da senha
|
|
togglePasswordBtn.addEventListener('click', () => {
|
|
const isPassword = passwordInput.getAttribute('type') === 'password';
|
|
passwordInput.setAttribute('type', isPassword ? 'text' : 'password');
|
|
|
|
// Altera o ícone do olho
|
|
togglePasswordBtn.innerHTML = isPassword
|
|
? `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.815 7.815 3 3m-3-3-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
|
|
</svg>`
|
|
: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
|
</svg>`;
|
|
});
|
|
|
|
// Submissão do formulário
|
|
loginForm.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
// Resetar estado de erro
|
|
errorMessage.classList.remove('visible');
|
|
errorMessage.textContent = '';
|
|
|
|
const password = passwordInput.value;
|
|
if (!password) return;
|
|
|
|
// Desabilitar botão e mostrar loading
|
|
btnSubmit.disabled = true;
|
|
btnSubmit.classList.add('loading');
|
|
btnSubmit.querySelector('span').textContent = 'Conectando...';
|
|
|
|
try {
|
|
const response = await fetch('/api/login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ password })
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok && data.success) {
|
|
// Sucesso - redireciona para a página principal
|
|
btnSubmit.querySelector('span').textContent = 'Autenticado!';
|
|
setTimeout(() => {
|
|
window.location.href = '/';
|
|
}, 600);
|
|
} else {
|
|
// Mostrar erro
|
|
throw new Error(data.error || 'Acesso negado');
|
|
}
|
|
} catch (error) {
|
|
errorMessage.textContent = error.message;
|
|
errorMessage.classList.add('visible');
|
|
|
|
// Habilitar botão novamente
|
|
btnSubmit.disabled = false;
|
|
btnSubmit.classList.remove('loading');
|
|
btnSubmit.querySelector('span').textContent = 'Entrar no Workspace';
|
|
|
|
// Feedback vibratório (se houver API) e animação shake no card
|
|
const card = document.querySelector('.login-card');
|
|
card.classList.add('shake');
|
|
setTimeout(() => card.classList.remove('shake'), 500);
|
|
}
|
|
});
|
|
});
|