Files
FocusAgenda/src/main/resources/static/login.html
T

105 lines
3.7 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="imagens/icone.png">
<link rel="stylesheet" href="login.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<title>Login Focus Agenda</title>
<script src="theme.js"></script>
</head>
<body>
<div id="topo">
<h1 id="textotop">Focus Agenda</h1>
<button class="theme-toggle-btn" onclick="toggleTheme()" title="Tema Escuro"><img src="imagens/moon-svgrepo-com.svg" class="theme-icon" alt="Tema"></button>
</div>
<div id="log">
<h1 class="mens">Bem-vindo!</h1>
<h3 class="mens">Faca seu login</h3>
<div id="mensagem-erro" role="alert"></div>
<form id="loginForm" novalidate>
<div class="campo">
<label for="emailid">Email</label>
<input type="email" placeholder="Digite seu email" id="emailid" autocomplete="email" required>
</div>
<div class="campo">
<label for="senhaid">Senha</label>
<input type="password" placeholder="Digite sua senha" id="senhaid" autocomplete="current-password" required>
</div>
<button type="submit" id="logbtn">Entrar</button>
</form>
<p class="mens"><a href="cadastro.html">Cadastrar-se</a></p>
</div>
<script>
(function () {
const params = new URLSearchParams(window.location.search);
if (params.get('sessao') === 'expirada') {
const erroEl = document.getElementById('mensagem-erro');
erroEl.textContent = 'Sua sessao expirou. Faca login novamente.';
erroEl.style.display = 'block';
}
if (localStorage.getItem('fa_token')) {
window.location.href = 'calendario.html';
}
})();
const form = document.getElementById('loginForm');
const erroEl = document.getElementById('mensagem-erro');
const btn = document.getElementById('logbtn');
function mostrarErro(msg) {
erroEl.textContent = msg;
erroEl.style.display = 'block';
}
form.addEventListener('submit', async (e) => {
e.preventDefault();
erroEl.style.display = 'none';
const email = document.getElementById('emailid').value.trim();
const senha = document.getElementById('senhaid').value;
if (!email || !senha) {
mostrarErro('Preencha todos os campos.');
return;
}
btn.disabled = true;
btn.textContent = 'Entrando...';
try {
const res = await fetch('/api/estudantes/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, senha })
});
const json = await res.json();
if (!res.ok) {
mostrarErro(json.message || 'Email ou senha incorretos.');
return;
}
localStorage.setItem('fa_token', json.data.token);
localStorage.setItem('fa_user', JSON.stringify(json.data.estudante));
window.location.href = 'calendario.html';
} catch (err) {
mostrarErro('Erro de conexao. Verifique se o servidor esta rodando.');
} finally {
btn.disabled = false;
btn.textContent = 'Entrar';
}
});
</script>
</body>
</html>