268 lines
10 KiB
JavaScript
268 lines
10 KiB
JavaScript
/* Base de comunicação com mid -abertura- */
|
|
// Função para obter a URL base do servidor
|
|
async function getApiUrl() {
|
|
try {
|
|
const response = await fetch('../../../php/config_url.php'); // Solicita a URL base do PHP
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
const data = await response.json();
|
|
return data.apiUrl; // Retorna a URL base
|
|
} catch (error) {
|
|
console.error('Error fetching API URL:', error);
|
|
throw error;
|
|
}
|
|
}
|
|
/* -fechamento- */
|
|
|
|
/* Frontend - abertura - - envio da ação - */
|
|
|
|
// Adiciona um ouvinte de evento ao formulário de login para tratar o evento de submissão
|
|
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");
|
|
const passwordElement = document.getElementById("password");
|
|
const errorMessageElement = document.getElementById("errorMessage");
|
|
const erro5003 = document.getElementById("erro_503");
|
|
|
|
|
|
// Limpa qualquer mensagem de erro anterior e bordas de campo
|
|
errorMessageElement.innerHTML = '';
|
|
erro5003.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();
|
|
const password = passwordElement.value.trim();
|
|
|
|
|
|
/*Caso em que o usuario não preenche os dois campos inputs, ou um deles*/
|
|
if (!username || !password) {
|
|
errorMessageElement.innerHTML = `<p>Preencha ambos os campos</p>`;
|
|
usernameElement.style.borderColor = 'red';
|
|
passwordElement.style.borderColor = 'red';
|
|
|
|
errorMessageElement.style.height = '10vh';
|
|
errorMessageElement.style.opacity = '1';
|
|
errorMessageElement.style.transition = ' 1s ease';
|
|
|
|
const tempoDeExibicao = 5000;
|
|
setTimeout(() => {
|
|
|
|
errorMessageElement.style.height = '0vh'; // Oculta a mensagem
|
|
usernameElement.style.borderColor = '#1478cf';
|
|
passwordElement.style.borderColor = '#1478cf';
|
|
|
|
errorMessageElement.style.opacity = '0';
|
|
errorMessageElement.style.transition = ' 1s ease';
|
|
}, tempoDeExibicao);
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
/* Frontend - fechamento - - envio da ação - */
|
|
|
|
/* Nesse caso seria uma dupla utilização pois ele enviaria para o mid*/
|
|
try {
|
|
// Obtém a URL base do servidor
|
|
const apiUrl = await getApiUrl();
|
|
|
|
// Envia uma requisição POST para o servidor de login com os dados de usuário e senha
|
|
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
|
|
|
|
});
|
|
/* - fechamento -*/
|
|
|
|
|
|
/*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_copy.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
|
|
|
|
/*Caso erro, onde o email usado é invalido*/
|
|
if (comunica === 400) {
|
|
|
|
errorMessageElement.innerHTML = `<p>O E-mail usado é invalido, o formato esperado é "usuario@domino.com.br"</p>`;
|
|
|
|
|
|
errorMessageElement.style.height = '10vh';
|
|
errorMessageElement.style.opacity = '1';
|
|
|
|
usernameElement.style.borderColor = 'red'; // Marca o campo do usuário com erro
|
|
errorMessageElement.style.transition = ' 1s ease';
|
|
|
|
const tempoDeExibicao = 5000;
|
|
setTimeout(() => {
|
|
|
|
usernameElement.style.borderColor = '#1478cf'; // Marca o campo do usuário com erro
|
|
errorMessageElement.style.height = '0vh'; // Oculta a mensagem
|
|
errorMessageElement.style.opacity = '0';
|
|
errorMessageElement.style.transition = ' 1s ease';
|
|
}, tempoDeExibicao);
|
|
|
|
}
|
|
|
|
/*Caso erro, quando há um erro na autenticação com o banco de dados*/
|
|
if (comunica === 401) {
|
|
|
|
errorMessageElement.innerHTML = `<p>Erro na autenticação, informe seu o usuário, ao suporte@itguys.com.br</p>`;
|
|
|
|
|
|
errorMessageElement.style.height = '10vh';
|
|
errorMessageElement.style.opacity = '1';
|
|
errorMessageElement.style.transition = ' 1s ease';
|
|
|
|
const tempoDeExibicao = 5000;
|
|
setTimeout(() => {
|
|
|
|
errorMessageElement.style.height = '0vh'; // Oculta a mensagem
|
|
errorMessageElement.style.opacity = '0';
|
|
errorMessageElement.style.transition = ' 1s ease';
|
|
}, tempoDeExibicao);
|
|
|
|
}
|
|
|
|
/*Caso erro, onde o usuário ou senha podem estar incorretos*/
|
|
if (comunica === 404) {
|
|
|
|
errorMessageElement.innerHTML = `<p>Usuário ou Senha, estão incorretos</p>`;
|
|
|
|
|
|
errorMessageElement.style.height = '10vh';
|
|
errorMessageElement.style.opacity = '1';
|
|
|
|
usernameElement.style.borderColor = 'red'; // Marca o campo do usuário com erro
|
|
passwordElement.style.borderColor = 'red'; // Marca o campo da senha com erro
|
|
errorMessageElement.style.transition = ' 1s ease';
|
|
|
|
const tempoDeExibicao = 5000;
|
|
setTimeout(() => {
|
|
|
|
usernameElement.style.borderColor = '#1478cf'; // Marca o campo do usuário com erro
|
|
passwordElement.style.borderColor = '#1478cf'; // Marca o campo da senha com erro
|
|
errorMessageElement.style.height = '0vh'; // Oculta a mensagem
|
|
errorMessageElement.style.opacity = '0';
|
|
errorMessageElement.style.transition = ' 1s ease';
|
|
}, tempoDeExibicao);
|
|
|
|
}
|
|
|
|
/*Caso de erro especial, que é apresentado em um pop up, essa estrutura pega a informações da resposta em json e os apresenta sobre o pop up na tela*/
|
|
if (comunica === 500) {
|
|
|
|
const erro_500 = await response.json();
|
|
const erroMessage = JSON.stringify(erro_500, null, 2); // O segundo argumento é para substituição, e o terceiro é para a indentação
|
|
|
|
erro5003.innerHTML = `<p> Contate o suporte suporte@itguys.com.br e informe esse erro ${erroMessage} </p>
|
|
<button class='X' id='x'>X</button>`;
|
|
erro5003.style.height = '45vh'; // Oculta a mensagem
|
|
erro5003.style.opacity = '1';
|
|
erro5003.style.transition = ' 1s ease';
|
|
|
|
//função para fechar o pop up de erro.
|
|
var botao = window.document.getElementById('x');
|
|
|
|
botao.addEventListener('click', clicou);
|
|
|
|
function clicou() {
|
|
erro5003.style.height = '0vh'; // Oculta a mensagem
|
|
erro5003.style.opacity = '0';
|
|
erro5003.style.transition = ' 1s ease';
|
|
}
|
|
|
|
}
|
|
|
|
/*Caso de erro, onde acontece um problema na comunicação com o proprio servidor*/
|
|
if (comunica === 503) {
|
|
|
|
errorMessageElement.innerHTML = `<p>Não foi possivel se conectar ao servidor, informe ao suporte@itguys.com.br</p>`;
|
|
|
|
errorMessageElement.style.height = '15vh';
|
|
errorMessageElement.style.opacity = '1';
|
|
|
|
errorMessageElement.style.transition = ' 1s ease';
|
|
|
|
const tempoDeExibicao = 5000;
|
|
setTimeout(() => {
|
|
|
|
errorMessageElement.style.height = '0vh'; // Oculta a mensagem
|
|
errorMessageElement.style.opacity = '0';
|
|
errorMessageElement.style.transition = ' 1s ease';
|
|
}, tempoDeExibicao);
|
|
|
|
}
|
|
|
|
/*Caso de erro, onde acontece um problema na comunicação com o proprio servidor*/
|
|
if (comunica === 502) {
|
|
|
|
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 = '0vh'; // Oculta a mensagem
|
|
errorMessageElement.style.opacity = '0';
|
|
errorMessageElement.style.transition = ' 1s ease';
|
|
}, tempoDeExibicao);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/*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 - */
|
|
|
|
});
|