Files
FrontFocusAgenda/src/main/resources/static/configuracoes.html
T
2026-05-31 22:19:45 -03:00

324 lines
13 KiB
HTML

<!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="configuracoes.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<title>Configuracoes - 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>
<button id="voltar" onclick="window.location.href='calendario.html'">Voltar</button>
</div>
<div id="log">
<h1 class="titulo-pagina">Configuracoes</h1>
<p class="subtitulo">Gerencie seus dados e preferencias</p>
<div id="mensagem-erro" role="alert"></div>
<div id="mensagem-sucesso" role="status"></div>
<div class="secao">
<div class="secao-titulo">Dados Pessoais</div>
<form id="dadosForm" novalidate>
<div class="campo">
<label for="nomeid">Nome</label>
<input type="text" placeholder="Seu nome completo" id="nomeid" autocomplete="name" required>
</div>
<div class="campo">
<label for="emailid">Email</label>
<input type="email" placeholder="Seu email" id="emailid" autocomplete="email" required disabled>
</div>
<div class="campo">
<label for="cursoid">Curso</label>
<input type="text" placeholder="Ex: Tecnico em Informatica" id="cursoid" required>
</div>
<div class="linha-dupla">
<div class="campo">
<label for="periodoid">Periodo</label>
<select id="periodoid" required>
<option value="">Selecione</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
</div>
<button type="submit" id="logbtn">Salvar Alteracoes</button>
</form>
</div>
<div class="secao">
<div class="secao-titulo">Alterar Senha</div>
<form id="senhaForm" novalidate>
<div class="campo">
<label for="senhaAtualid">Senha Atual</label>
<input type="password" placeholder="Digite sua senha atual" id="senhaAtualid" autocomplete="current-password" required>
</div>
<div class="campo">
<label for="novaSenhaid">Nova Senha</label>
<input type="password" placeholder="Minimo 6 caracteres" id="novaSenhaid" autocomplete="new-password" required minlength="6">
</div>
<div class="campo">
<label for="confirmaNovaid">Confirmar Nova Senha</label>
<input type="password" placeholder="Confirme a nova senha" id="confirmaNovaid" autocomplete="new-password" required>
</div>
<button type="submit" id="btnSenha">Alterar Senha</button>
</form>
</div>
<div class="secao">
<div class="secao-titulo">Seus Dados (LGPD)</div>
<p class="secao-descricao">
Conforme a Lei Geral de Protecao de Dados (Lei n 13.709/2018),
voce tem direito de acessar, exportar e excluir seus dados pessoais.
</p>
<div class="acoes-lgpd">
<div class="acao-lgpd">
<div>
<strong>Exportar meus dados</strong>
<p>Baixe um arquivo JSON com todas as suas tarefas, eventos e disciplinas.</p>
</div>
<button type="button" id="btnExportarDados">Exportar JSON</button>
</div>
<div class="acao-lgpd">
<div>
<strong>Politica de Privacidade</strong>
<p>Veja como seus dados sao tratados e quais sao seus direitos.</p>
</div>
<a href="politica-privacidade.html" class="btn-link-politica">Ver politica</a>
</div>
</div>
</div>
<div class="zona-perigo">
<div class="secao-titulo">Zona de Perigo</div>
<p>
Ao excluir sua conta, exercendo o direito previsto no Art. 18, VI da LGPD,
todos os seus dados pessoais (tarefas, eventos, disciplinas e notificacoes)
serao removidos <strong>permanentemente e imediatamente</strong> dos nossos servidores.
Esta acao e irreversivel.
</p>
<button type="button" id="btnExcluirConta">Excluir Minha Conta</button>
</div>
</div>
<script>
const token = localStorage.getItem('fa_token');
const userStr = localStorage.getItem('fa_user');
if (!token) {
window.location.href = 'login.html';
}
let usuario = null;
try { usuario = JSON.parse(userStr); } catch(e) {}
const erroEl = document.getElementById('mensagem-erro');
const sucessoEl = document.getElementById('mensagem-sucesso');
function mostrarErro(msg) {
erroEl.textContent = msg;
erroEl.style.display = 'block';
sucessoEl.style.display = 'none';
erroEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
function mostrarSucesso(msg) {
sucessoEl.textContent = msg;
sucessoEl.style.display = 'block';
erroEl.style.display = 'none';
sucessoEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
async function api(method, path, body) {
const opts = {
method,
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token
}
};
if (body) opts.body = JSON.stringify(body);
const res = await fetch(path, opts);
const json = await res.json().catch(() => ({}));
if (!res.ok) {
throw new Error(json.message || 'Erro na requisicao');
}
return json.data;
}
async function carregarUsuario() {
try {
const u = await api('GET', '/api/estudantes/me');
usuario = u;
localStorage.setItem('fa_user', JSON.stringify(u));
document.getElementById('nomeid').value = u.nome || '';
document.getElementById('emailid').value = u.email || '';
document.getElementById('cursoid').value = u.curso || '';
document.getElementById('periodoid').value = u.periodo || '';
} catch(e) {
mostrarErro('Erro ao carregar dados: ' + e.message);
}
}
document.getElementById('dadosForm').addEventListener('submit', async (e) => {
e.preventDefault();
erroEl.style.display = 'none';
sucessoEl.style.display = 'none';
const nome = document.getElementById('nomeid').value.trim();
const curso = document.getElementById('cursoid').value.trim();
const periodo = parseInt(document.getElementById('periodoid').value, 10);
if (!nome || !curso || !periodo) {
mostrarErro('Preencha todos os campos.');
return;
}
const btn = document.getElementById('logbtn');
btn.disabled = true;
btn.textContent = 'Salvando...';
try {
const atualizado = await api('PUT', '/api/estudantes/me', { nome, curso, periodo });
localStorage.setItem('fa_user', JSON.stringify(atualizado));
mostrarSucesso('Dados atualizados com sucesso!');
} catch(err) {
mostrarErro(err.message);
} finally {
btn.disabled = false;
btn.textContent = 'Salvar Alteracoes';
}
});
document.getElementById('senhaForm').addEventListener('submit', async (e) => {
e.preventDefault();
erroEl.style.display = 'none';
sucessoEl.style.display = 'none';
const senhaAtual = document.getElementById('senhaAtualid').value;
const novaSenha = document.getElementById('novaSenhaid').value;
const confirmaNova = document.getElementById('confirmaNovaid').value;
if (!senhaAtual || !novaSenha || !confirmaNova) {
mostrarErro('Preencha todos os campos.');
return;
}
if (novaSenha.length < 6) {
mostrarErro('A nova senha deve ter pelo menos 6 caracteres.');
return;
}
if (novaSenha !== confirmaNova) {
mostrarErro('As senhas nao conferem.');
document.getElementById('confirmaNovaid').focus();
return;
}
if (senhaAtual === novaSenha) {
mostrarErro('A nova senha deve ser diferente da atual.');
return;
}
const btn = document.getElementById('btnSenha');
btn.disabled = true;
btn.textContent = 'Alterando...';
try {
await api('PUT', '/api/estudantes/senha', { senhaAtual, novaSenha });
mostrarSucesso('Senha alterada com sucesso!');
document.getElementById('senhaAtualid').value = '';
document.getElementById('novaSenhaid').value = '';
document.getElementById('confirmaNovaid').value = '';
} catch(err) {
mostrarErro(err.message);
} finally {
btn.disabled = false;
btn.textContent = 'Alterar Senha';
}
});
document.getElementById('btnExportarDados').addEventListener('click', async () => {
const btn = document.getElementById('btnExportarDados');
btn.disabled = true;
btn.textContent = 'Gerando...';
try {
const res = await fetch('/api/estudantes/me/dados', {
headers: { 'Authorization': 'Bearer ' + localStorage.getItem('fa_token') }
});
if (res.status === 401) {
localStorage.clear();
window.location.href = '/login.html?sessao=expirada';
return;
}
const data = await res.json();
const blob = new Blob([JSON.stringify(data.data, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'focusagenda-meus-dados.json';
a.click();
URL.revokeObjectURL(url);
} catch (err) {
alert('Erro ao exportar dados: ' + err.message);
} finally {
btn.disabled = false;
btn.textContent = 'Exportar JSON';
}
});
document.getElementById('btnExcluirConta').addEventListener('click', async () => {
if (!confirm('Tem certeza que deseja excluir sua conta? Esta acao e irreversivel!')) {
return;
}
const confirmacao = prompt('Digite "EXCLUIR" para confirmar a exclusao da sua conta:');
if (confirmacao !== 'EXCLUIR') {
mostrarErro('Exclusao cancelada.');
return;
}
const btn = document.getElementById('btnExcluirConta');
btn.disabled = true;
btn.textContent = 'Excluindo...';
try {
await api('DELETE', '/api/estudantes/me');
localStorage.removeItem('fa_token');
localStorage.removeItem('fa_user');
mostrarSucesso('Conta excluida. Redirecionando...');
setTimeout(() => window.location.href = 'login.html', 2000);
} catch(err) {
mostrarErro(err.message);
btn.disabled = false;
btn.textContent = 'Excluir Minha Conta';
}
});
carregarUsuario();
</script>
</body>
</html>