118 lines
4.3 KiB
JavaScript
118 lines
4.3 KiB
JavaScript
//Base de comunicação do front end com o back end -abertura-
|
|
// Função para obter a URL base do servidor
|
|
|
|
|
|
//conexões com fatores do front end, e a determinação de uma pequena ação para quando os dois inputs estiverem vazios -abertura-
|
|
//Acapitação das ids do formulário
|
|
document.getElementById("formLogin").addEventListener("submit", async function (event) {
|
|
event.preventDefault();
|
|
|
|
// Previne o comportamento padrão do formulário
|
|
// Obtém os elementos do DOM correspondentes ao nome de usuário, senha e mensagem de erro
|
|
const usernameElement = document.getElementById("username");//dominio
|
|
const passwordElement = document.getElementById("password"); //senha
|
|
const errorMessageElement = document.getElementById("errorMessage"); //painel que apresntação de erro padrão
|
|
const erro5003 = document.getElementById("erro_503"); //pop up de erro 500
|
|
const erro5004 = document.getElementById("erro_504"); //pop de desvio de scripts.
|
|
|
|
// Limpa qualquer mensagem de erro anterior e bordas de campo
|
|
errorMessageElement.innerHTML = '';
|
|
erro5003.innerHTML = '';
|
|
erro5004.innerHTML = '';
|
|
usernameElement.style.borderColor = '';
|
|
passwordElement.style.borderColor = '';
|
|
|
|
// Verifica se os elementos do nome de usuário e senha existem
|
|
if (!usernameElement || !passwordElement) {
|
|
console.error('Username or password element not found');
|
|
return;
|
|
}
|
|
|
|
// Obtém os valores inseridos pelo usuário nos campos de nome de usuário e senha
|
|
const username = usernameElement.value.trim();//usuário
|
|
const password = passwordElement.value.trim();//senha
|
|
|
|
// Verifica se os campos estão preenchidos
|
|
if (!username || !password) {
|
|
|
|
//Função para quando alguns dos inputs estiver vazio
|
|
mensagensVazias(errorMessageElement, usernameElement, passwordElement);
|
|
return;
|
|
}
|
|
|
|
//Fechamento
|
|
|
|
//Função para barrar informações vindas de sqls ou scripts impostos dentro de inputs
|
|
BloqueiSlQ(username, password, erro5004)
|
|
|
|
//Quebra de logica sobre o contexto da aplicação de sql
|
|
if (BloqueiSlQ(username, password, erro5004)) {
|
|
return;
|
|
}
|
|
|
|
// Função principal para enviar dados criptografados para o backend
|
|
|
|
try {
|
|
|
|
const apiUrl = await getApiUrl(); // Recebe o objeto com response e apiUrl
|
|
|
|
// Envia os dados para o backend
|
|
const response = await fetch(`${apiUrl}/login`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json' // Define o tipo de conteúdo como JSON
|
|
},
|
|
body: JSON.stringify({
|
|
username, password
|
|
}) // Converte os dados para JSON antes de enviar
|
|
});
|
|
|
|
|
|
|
|
/*Frontend - Abertura - - Reação á resposta - */
|
|
/*Caso de sucesso*/
|
|
if (response.ok) {
|
|
|
|
const data = await response.json(); // Extrai os dados JSON da resposta
|
|
localStorage.setItem('x-access-token', data.token); // Armazena o token de autenticação no localStorage
|
|
// Redireciona o usuário para a página do ambiente do usuário
|
|
window.location.href = "./Ambiente_Usuario.html";
|
|
|
|
}
|
|
|
|
/* Caso de erro*/
|
|
else {
|
|
|
|
/*Variavel que recebe os status de resposta do servidor, sendo respose uma variavel enquanto status uma tag especial do javascript*/
|
|
const comunica = response.status
|
|
await RespostasErro(comunica, response, errorMessageElement, usernameElement, passwordElement, erro5003)
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Caso de erro onde nem mesmo acontece uma comunicação com o servidor*/
|
|
} catch (error) {
|
|
console.error('Error:', error); // Loga qualquer erro ocorrido
|
|
|
|
errorMessageElement.innerHTML = '<p> Ocorreu um erro, ao tentar se comunicar com o servidor. Por favor, tente novamente mais tarde, entre contato </p>';
|
|
errorMessageElement.style.height = '15vh';
|
|
errorMessageElement.style.opacity = '1';
|
|
errorMessageElement.style.transition = ' 1s ease';
|
|
|
|
|
|
const tempoDeExibicao = 5000;
|
|
setTimeout(() => {
|
|
errorMessageElement.style.height = '1vh';
|
|
errorMessageElement.style.opacity = '0';
|
|
errorMessageElement.style.transition = ' 1s ease';
|
|
}, tempoDeExibicao);
|
|
|
|
}
|
|
|
|
/* Frontend - fechamento - - Reação á resposta - */
|
|
|
|
});
|