Atualização 14 | Conclusção do Modulo de Construção e a Criação do Modulo de Autenticação
This commit is contained in:
parent
62740b873f
commit
a25034a0e3
|
|
@ -11,13 +11,11 @@
|
|||
<link id="conexao" rel="stylesheet" href="./Css/page/Telas_acao/erro_404.css">
|
||||
<link rel="stylesheet" href="./Css/page/Telas_acao/load.css">
|
||||
<link rel="icon" type="image/x-icon" href="./Acessts/Imagens/iT_Guys/logo1.png">
|
||||
<script src="./js/global/Modulo_de_Comunicacao/Funcao/Comunicacao.js"></script>
|
||||
<script src="./js/page/Ambiente/Estrutura/Modulo_Construcao/Funcao/Autencacao.js"></script>
|
||||
|
||||
<script src="./js/page/Ambiente/Estrutura/Modulo_Construcao/Funcao/Controlador_telas.js"></script>
|
||||
<script src="./js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/load.js"></script>
|
||||
<script src="./js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Erro/Painel_Erro.js"></script>
|
||||
<script src="./js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Erro/Html_erro.js"></script>
|
||||
<script src="./js/global/Modulo_de_Comunicacao/Funcao/Comunicacao.js"></script>
|
||||
<script src="./js/page/Modulo_Construcao/Funcao/Estrutura/Autencacao.js"></script>
|
||||
|
||||
<script src="./js/page/Modulo_Construcao/Funcao/Estrutura/Controlador_telas.js"></script>
|
||||
|
||||
|
||||
|
||||
|
|
@ -44,7 +42,7 @@
|
|||
</main>
|
||||
|
||||
<section id="scriptsConstructor"></section>
|
||||
<script src="./js/global/Modulo_de_Insercao_Html/Funcao/Inserirscripts.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,404 +0,0 @@
|
|||
// Função para carregar e exibir as imagens protegidas
|
||||
|
||||
|
||||
|
||||
async function criarBlocos() {
|
||||
|
||||
try {
|
||||
|
||||
|
||||
|
||||
const { response, apiUrl } = await Autenticao(); // Recebe o objeto com response e apiUrl
|
||||
const data = await response.json(); // Faz o parse do JSON retornado
|
||||
|
||||
// Agora acessa as propriedades do objeto
|
||||
const nomeCompleto = data.usuario.nome; // Nome completo do usuário
|
||||
|
||||
const Empresa = data.empresa.nome;
|
||||
const ImagemUser = `${apiUrl}${data.usuario.img_perfil}`;
|
||||
//const ImagemUser2 = `${apiUrl}${data.usuario.img_perfil}`;
|
||||
const logoEmpresa = `${apiUrl}${data.empresa.logo}`;
|
||||
|
||||
// Exibe as imagens protegidas usando os URLs retornados pela API
|
||||
loadImage(ImagemUser, 'profileImage');
|
||||
//loadImage(ImagemUser2, 'profileImage'); // Imagem de perfil do usuário
|
||||
loadImage(logoEmpresa, 'companyLogo'); // Logo da empresa
|
||||
|
||||
// Acessando o primeiro objeto do array retornado
|
||||
console.log(data);
|
||||
console.log(nomeCompleto);
|
||||
console.log(Empresa);
|
||||
console.log('Link da imagem de perfil -' + ImagemUser);
|
||||
console.log('Link da Logo -' + logoEmpresa);
|
||||
|
||||
EstruturaEsqueleto();
|
||||
|
||||
function EstruturaEsqueleto() {
|
||||
|
||||
//constante que controla o estilo css que está estilizando todo o ambiente do usuário.
|
||||
const estilos = document.getElementById('conexao');
|
||||
estilos.href = './Css/page/Ambiente/Estrutura/estrutura.css';
|
||||
const construtor_primario = document.getElementById('entrada_1');
|
||||
|
||||
//Estrutura Html que será apresentada sobre a tela
|
||||
construtor_primario.innerHTML = InterfaceAmbiente();
|
||||
Interatividade();
|
||||
|
||||
function InterfaceAmbiente() {
|
||||
return `
|
||||
<nav>
|
||||
|
||||
<section class="menu_lateral">
|
||||
|
||||
<div class="seguimentacao_1">
|
||||
|
||||
<div class="coluna_1">
|
||||
|
||||
<div class="subcolunas_1">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<img src="./Acessts/Imagens/iT_Guys/Logo_itGuys - Copia.png" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="coluna_2">
|
||||
|
||||
<div class="subcolunas_1">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<img class="img" src="./Acessts/Imagens/Iconis/home.png" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="sub_entrada_moni_1"></div>
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<img class="img" src="./Acessts/Imagens/Iconis/technical-support.png" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<img class="img" src="./Acessts/Imagens/Iconis/caixa-de-ferramentas.png" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="subcolunas_2">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<img class="img" src="./Acessts/Imagens/Iconis/central-de-atendimento.png" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<img class="img" src="./Acessts/Imagens/Iconis/engrenagem - Copia.png" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="seguimentacao_2">
|
||||
|
||||
<div class="coluna_1">
|
||||
|
||||
<div class="subcolunas_1">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<img class="profileImage" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<h2> ${nomeCompleto} </h2>
|
||||
|
||||
<h2> ${Empresa} </h2>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="subcolunas_2">
|
||||
|
||||
<button class="id_ajuste" id="id_ajuste">
|
||||
|
||||
<img class="imgjust" src="./Acessts/Imagens/Iconis/seta-direita.png" alt="">
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="coluna_2">
|
||||
|
||||
<div class="subcolunas_1">
|
||||
|
||||
<a href="./html/Home.html" class="filheira_a" target="frame">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<h2>Home</h2>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
|
||||
<div id="sub_entrada_moni_2"></div>
|
||||
|
||||
<a href="https://suporte.itguys.com.br/" class="filheira_a" target="frame">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<h2>Servicdesk</h2>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
|
||||
<a href="./html/projetos_itguys.html" class="filheira_a" target="frame">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<h2>Ferramentas</h2>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="subcolunas_2">
|
||||
|
||||
<a href="https://api.whatsapp.com/send?phone=5521966344698" class="filheira_a" target="black_">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<h2>Suporte</h2>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
|
||||
<a href="./html/Config.html" class="filheira_a">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<h2>Configurações</h2>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</nav>
|
||||
|
||||
<main class="apresentacao">
|
||||
|
||||
<section class="capitulo_1">
|
||||
|
||||
<div class="Bloco_subcab1_1">
|
||||
|
||||
<img class="companyLogo" alt="" class="icon_subcab1_1">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="Bloco_subcab1_2">
|
||||
|
||||
<a href="https://dev.itguys.com.br/"><button>Logout</button></a>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="capitulo_2">
|
||||
|
||||
<iframe id="test1" name="frame" class="transmissão" src="./html/Home.html"frameborder = "0" ></iframe >
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
function Interatividade() {
|
||||
|
||||
var botao = document.getElementById('id_ajuste');
|
||||
var cabecario = document.querySelector('.capitulo_1');
|
||||
var tela = document.querySelector('.capitulo_2');
|
||||
var menu = document.querySelector('.menu_lateral');
|
||||
|
||||
if (botao) {
|
||||
botao.addEventListener('click', function () {
|
||||
console.log('Botão clicado!');
|
||||
if (menu) menu.classList.toggle('expansao');
|
||||
if (cabecario) cabecario.classList.toggle('expansao');
|
||||
if (tela) tela.classList.toggle('expansao');
|
||||
});
|
||||
} else {
|
||||
console.error('Botão não encontrado!');
|
||||
}
|
||||
|
||||
|
||||
/*if (Permissoes.visuMonitor) {
|
||||
const script2 = document.createElement('script');
|
||||
script2.src = './js/page/Ambiente/Monitoramento/Modulo_Construcao/Funcao/Estrutura_Secundaria_Monitor.js';
|
||||
script2.setAttribute // Acessando a propriedade corretamente
|
||||
document.body.appendChild(script2);
|
||||
}*/
|
||||
|
||||
// Adiciona o listener de clique após a construção do HTML
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
function ApresentarTelas() { }
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
} catch (error) {
|
||||
|
||||
await CasodeErro();
|
||||
console.error('Erro ao criar blocos:', error);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Função para carregar uma imagem protegida com token JWT e exibi-la
|
||||
|
||||
async function loadImage(url, imgElementClass) {
|
||||
try {
|
||||
const token = getAuthToken();
|
||||
console.log('Token:', token);
|
||||
console.log('URL da imagem:', url);
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'x-access-token': token ? token : ''
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Erro ao carregar a imagem: ' + response.statusText);
|
||||
}
|
||||
|
||||
const blob = await response.blob();
|
||||
const imageUrl = URL.createObjectURL(blob);
|
||||
|
||||
// Seleciona todos os elementos com a classe
|
||||
const imgElements = document.getElementsByClassName(imgElementClass);
|
||||
if (imgElements.length > 0) {
|
||||
for (let i = 0; i < imgElements.length; i++) {
|
||||
imgElements[i].src = imageUrl;
|
||||
}
|
||||
} else {
|
||||
console.warn('Nenhum elemento encontrado com a classe:', imgElementClass);
|
||||
}
|
||||
|
||||
return imageUrl; // Retorna a URL da imagem carregada
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar a imagem:', error);
|
||||
console.log('Classe do elemento:', imgElementClass);
|
||||
return null; // Retorna null em caso de erro
|
||||
}
|
||||
}
|
||||
// Função para carregar a imagem de fundo
|
||||
async function loadBackgroundAndUpdateStyle() {
|
||||
try {
|
||||
const apiUrl = await getApiUrl();
|
||||
const token = getAuthToken();
|
||||
const response = await fetch(`${apiUrl}/mounting`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'x-access-token': token ? token : ''
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Erro ao carregar os dados: ' + response.statusText);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const imagemFun = `${apiUrl}${data.usuario.img_fundo}`;
|
||||
|
||||
const fundoResponse = await fetch(imagemFun, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'x-access-token': token ? token : ''
|
||||
}
|
||||
});
|
||||
|
||||
if (!fundoResponse.ok) {
|
||||
throw new Error('Erro ao carregar a imagem de fundo: ' + fundoResponse.statusText);
|
||||
}
|
||||
|
||||
const blob = await fundoResponse.blob();
|
||||
const fundoUserUrl = URL.createObjectURL(blob);
|
||||
|
||||
const fundouser = document.getElementById('fundouser');
|
||||
fundouser.innerHTML =
|
||||
'.seguimentacao_2 .coluna_1 {' +
|
||||
'width: 100%;' +
|
||||
'height: 30vh;' +
|
||||
'display: flex;' +
|
||||
'flex-direction: row;' +
|
||||
'background-image: url("' + fundoUserUrl + '");' +
|
||||
'background-position: center;'
|
||||
'background-position: center;' +
|
||||
'background-size: cover;' +
|
||||
'overflow: hidden;' +
|
||||
'transition: 1s ease;' +
|
||||
'}';
|
||||
|
||||
|
||||
|
||||
|
||||
console.log('Imagem de fundo carregada e estilo aplicado com sucesso.');
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar a imagem de fundo:', error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Aguarda o carregamento completo do DOM
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
setTimeout(async () => {
|
||||
await criarBlocos();
|
||||
await loadBackgroundAndUpdateStyle();
|
||||
setTimeout(localStorage.setItem('Carregou', 'true'), 500) // Salva um valor no localStorage
|
||||
}, 3000); // Executa as funções 3 segundos após o carregamento do DOM
|
||||
});
|
||||
|
||||
|
|
@ -1,346 +0,0 @@
|
|||
//Base de comunicação do front end com o back end -abertura-
|
||||
// Função para obter a URL base do servidor
|
||||
async function getApiUrl() {
|
||||
try {
|
||||
//solicitação do arquivo config_url.php
|
||||
const response = await fetch('../../../Sites/Site_ItGuys/php/config_url.php');
|
||||
//Aplicação de um if caso a resposta do php seja oposta ao ok
|
||||
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
|
||||
|
||||
//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) {
|
||||
errorMessageElement.innerHTML = `<p>Preencha ambos os campos</p>`;//mensagem de erro padrão
|
||||
|
||||
usernameElement.style.borderColor = 'red';//corpo do input usuario em vermelho.
|
||||
passwordElement.style.borderColor = 'red';//corpo do input senha em vermelho.
|
||||
|
||||
errorMessageElement.style.height = '10vh';//Altura do bloco de apresentação
|
||||
errorMessageElement.style.opacity = '1';//Opacidade do bloco de apresentação
|
||||
errorMessageElement.style.transition = '1s ease';//transição
|
||||
|
||||
setTimeout(() => {//Aplicação de tempo para retirar os efeitos
|
||||
|
||||
errorMessageElement.style.height = '0vh'; // Reduz o tamanho do bloco para Oculta a mensagem
|
||||
usernameElement.style.borderColor = '#1478cf'; //volta a cor do inptu, de usuário ao seu padrão
|
||||
passwordElement.style.borderColor = '#1478cf';
|
||||
//volta a cor do inptu, de senha ao seu padrão
|
||||
errorMessageElement.style.opacity = '0'; // define a opacidade do painel de erro a zero
|
||||
errorMessageElement.style.transition = '1s ease'; // define uma tansição suave para tudo isso.
|
||||
}, 5000); //definie um time de 5 segundos, contados em milesegundos 5.000
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
//Fechamento
|
||||
|
||||
|
||||
//Camada de segurança -abertura-
|
||||
|
||||
// Função para escapar caracteres HTML, resumidamente ele pega o paramentro definido e subistitui todas as letras já definidas nela pelos termos descritos em "" para assim quebrar com quaisquer entrada de script dentro dos inputs.
|
||||
function escapeHTML(str) {
|
||||
return str
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'")
|
||||
.replace(/V/g, "'")
|
||||
.replace(/C/g, "'")
|
||||
.replace(/a/g, "'")
|
||||
.replace(/i/g, "'")
|
||||
.replace(/o/g, "'")
|
||||
.replace(/u/g, "'")
|
||||
.replace(/b/g, "'")
|
||||
.replace(/c/g, "'")
|
||||
.replace(/l/g, "'")
|
||||
.replace(/d/g, "'")
|
||||
.replace(/e/g, "'")
|
||||
.replace(/t/g, "'")
|
||||
.replace(/1/g, "'")
|
||||
.replace(/2/g, "'")
|
||||
.replace(/3/g, "'")
|
||||
.replace(/4/g, "'")
|
||||
.replace(/5/g, "'")
|
||||
.replace(/6/g, "'")
|
||||
.replace(/7/g, "'")
|
||||
.replace(/8/g, "'")
|
||||
.replace(/9/g, "'");
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Aqui ele armazena em constantes os termos relacionandos a funções sqls, e funções de scripts para serem redirecionadas.
|
||||
const containsScript = /<script>|<\/script>|script/i;
|
||||
const containsSQL = /select|insert|update|delete|drop|union/i;
|
||||
|
||||
|
||||
//Aqui é definido mais duas constantes para armazenar as comparações boleanas, onde só é necessario que um dos cenários seja verdadeiro.
|
||||
const hasScriptOrSQLInUsername = containsScript.test(username) || containsSQL.test(username);
|
||||
const hasScriptOrSQLInPassword = containsScript.test(password) || containsSQL.test(password);
|
||||
|
||||
//Aplicação dentro de if se trabalhar pelo lapidar das informações de comparação, onde inicialmente ele definiu os parametros, para logo depois aplicas as compações entre eles, registrando as comparações dentro do input
|
||||
if (hasScriptOrSQLInUsername || hasScriptOrSQLInPassword) {
|
||||
erro5004.innerHTML = "<div class='colum_1'><button id='fechar' class='X'>X</button></div>"
|
||||
+ "<div class='colum_2'><p>As entradas desse formulário não podem receber scripts ou comandos SQL.</p></div>";
|
||||
console.log(escapeHTML(username));
|
||||
console.log(escapeHTML(password));
|
||||
|
||||
erro5004.style.height = '45vh'; // Ajusta a altura
|
||||
erro5004.style.opacity = '1'; // Define a opacidade
|
||||
erro5004.style.transition = '1s ease'; // Adiciona a transição
|
||||
|
||||
const fecharBotao = document.getElementById('fechar');
|
||||
fecharBotao.addEventListener('click', () => {
|
||||
erro5004.style.height = '0vh'; // Oculta a mensagem
|
||||
erro5004.style.opacity = '0'; // Define a opacidade
|
||||
erro5004.style.transition = '1s ease'; // Adiciona a transição
|
||||
});
|
||||
|
||||
return; // Interrompe o envio se houver erro
|
||||
//fechar da camada de segurança
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
// Função principal para enviar dados criptografados para o backend
|
||||
|
||||
try {
|
||||
// utiliza função definida no inicio da estrutura para á armazenar na constante api url
|
||||
const apiUrl = await getApiUrl();
|
||||
|
||||
// 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
|
||||
|
||||
/*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 ao suporte, no e-mail 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 =
|
||||
"<div class='colum_1'><button id='fechar' class='X'>X</button></div>"
|
||||
+
|
||||
"<div class='colum_2'><p> Contate o suporte suporte@itguys.com.br e informe esse erro"
|
||||
+
|
||||
erroMessage
|
||||
+
|
||||
"</p></div>";
|
||||
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('fechar');
|
||||
|
||||
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 - */
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
//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 - */
|
||||
|
||||
});
|
||||
|
|
@ -21,8 +21,11 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
|
||||
// Lista de URLs dos scripts permitidos
|
||||
const scriptsPermitidos = [
|
||||
'https://dev.itguys.com.br/ambiente_do_usu%C3%A1rio/js/Login/login.js', // Adicione o nome ou URL do script permitido
|
||||
'https://dev.itguys.com.br/ambiente_do_usu%C3%A1rio/js/Login/seguranca.js'
|
||||
'https://dev.itguys.com.br/Sites/Site_ItGuys/ambiente_do_usu%C3%A1rio/js/global/Modulo_de_Comunicacao/Funcao/Comunicacao.js', // Adicione o nome ou URL do script permitido
|
||||
'https://dev.itguys.com.br/Sites/Site_ItGuys/ambiente_do_usu%C3%A1rio/js/page/Modulo_Autenticacao/Funcao/segurancainput.js',
|
||||
'https://dev.itguys.com.br/Sites/Site_ItGuys/ambiente_do_usu%C3%A1rio/js/page/Modulo_Autenticacao/Funcao/login.js',
|
||||
'https://dev.itguys.com.br/Sites/Site_ItGuys/ambiente_do_usu%C3%A1rio/js/page/Modulo_Autenticacao/Painel/Repostas.js',
|
||||
'https://dev.itguys.com.br/Sites/Site_ItGuys/ambiente_do_usu%C3%A1rio/js/page/Modulo_Autenticacao/Funcao/segurancaWind.js'
|
||||
];
|
||||
|
||||
function observarScripts() {
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
function BloqueiSlQ(username, password, erro5004) {
|
||||
|
||||
//Camada de segurança -abertura-
|
||||
// Função para escapar caracteres HTML, resumidamente ele pega o paramentro definido e subistitui todas as letras já definidas nela pelos termos descritos em "" para assim quebrar com quaisquer entrada de script dentro dos inputs.
|
||||
function escapeHTML(str) {
|
||||
return str
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'")
|
||||
.replace(/V/g, "'")
|
||||
.replace(/C/g, "'")
|
||||
.replace(/a/g, "'")
|
||||
.replace(/i/g, "'")
|
||||
.replace(/o/g, "'")
|
||||
.replace(/u/g, "'")
|
||||
.replace(/b/g, "'")
|
||||
.replace(/c/g, "'")
|
||||
.replace(/l/g, "'")
|
||||
.replace(/d/g, "'")
|
||||
.replace(/e/g, "'")
|
||||
.replace(/t/g, "'")
|
||||
.replace(/1/g, "'")
|
||||
.replace(/2/g, "'")
|
||||
.replace(/3/g, "'")
|
||||
.replace(/4/g, "'")
|
||||
.replace(/5/g, "'")
|
||||
.replace(/6/g, "'")
|
||||
.replace(/7/g, "'")
|
||||
.replace(/8/g, "'")
|
||||
.replace(/9/g, "'");
|
||||
|
||||
}
|
||||
|
||||
// Aqui ele armazena em constantes os termos relacionandos a funções sqls, e funções de scripts para serem redirecionadas.
|
||||
const containsScript = /<script>|<\/script>|script/i;
|
||||
const containsSQL = /select|insert|update|delete|drop|create|table|union/i;
|
||||
|
||||
|
||||
//Aqui é definido mais duas constantes para armazenar as comparações boleanas, onde só é necessario que um dos cenários seja verdadeiro.
|
||||
const hasScriptOrSQLInUsername = containsScript.test(username) || containsSQL.test(username);
|
||||
const hasScriptOrSQLInPassword = containsScript.test(password) || containsSQL.test(password);
|
||||
|
||||
//Aplicação dentro de if se trabalhar pelo lapidar das informações de comparação, onde inicialmente ele definiu os parametros, para logo depois aplicas as compações entre eles, registrando as comparações dentro do input
|
||||
if (hasScriptOrSQLInUsername || hasScriptOrSQLInPassword) {
|
||||
erro5004.innerHTML = "<div class='colum_1'><button id='fechar' class='X'>X</button></div>"
|
||||
+ "<div class='colum_2'><p>As entradas desse formulário não podem receber scripts ou comandos SQL.</p></div>";
|
||||
console.log(escapeHTML(username));
|
||||
console.log(escapeHTML(password));
|
||||
|
||||
erro5004.style.height = '45vh'; // Ajusta a altura
|
||||
erro5004.style.opacity = '1'; // Define a opacidade
|
||||
erro5004.style.transition = '1s ease'; // Adiciona a transição
|
||||
|
||||
const fecharBotao = document.getElementById('fechar');
|
||||
fecharBotao.addEventListener('click', () => {
|
||||
erro5004.style.height = '0vh'; // Oculta a mensagem
|
||||
erro5004.style.opacity = '0'; // Define a opacidade
|
||||
erro5004.style.transition = '1s ease'; // Adiciona a transição
|
||||
});
|
||||
|
||||
return true; // Retorna 'true' para indicar que há um problema e deve impedir o envio
|
||||
//fechar da camada de segurança
|
||||
|
||||
}
|
||||
|
||||
return false; // Retorna 'false' se não houver problemas
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
function mensagensVazias(errorMessageElement, usernameElement, passwordElement) {
|
||||
|
||||
|
||||
errorMessageElement.innerHTML = `<p>Preencha ambos os campos</p>`;//mensagem de erro padrão
|
||||
|
||||
usernameElement.style.borderColor = 'red';//corpo do input usuario em vermelho.
|
||||
passwordElement.style.borderColor = 'red';//corpo do input senha em vermelho.
|
||||
|
||||
errorMessageElement.style.height = '10vh';//Altura do bloco de apresentação
|
||||
errorMessageElement.style.opacity = '1';//Opacidade do bloco de apresentação
|
||||
errorMessageElement.style.transition = '1s ease';//transição
|
||||
|
||||
setTimeout(() => {//Aplicação de tempo para retirar os efeitos
|
||||
|
||||
errorMessageElement.style.height = '0vh'; // Reduz o tamanho do bloco para Oculta a mensagem
|
||||
usernameElement.style.borderColor = '#1478cf'; //volta a cor do inptu, de usuário ao seu padrão
|
||||
passwordElement.style.borderColor = '#1478cf';
|
||||
//volta a cor do inptu, de senha ao seu padrão
|
||||
errorMessageElement.style.opacity = '0'; // define a opacidade do painel de erro a zero
|
||||
errorMessageElement.style.transition = '1s ease'; // define uma tansição suave para tudo isso.
|
||||
}, 5000); //definie um time de 5 segundos, contados em milesegundos 5.000
|
||||
|
||||
}
|
||||
|
||||
async function RespostasErro(comunica, response, errorMessageElement, usernameElement, passwordElement, erro5003) {
|
||||
|
||||
/*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 ao suporte, no e-mail 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 =
|
||||
"<div class='colum_1'><button id='fechar' class='X'>X</button></div>"
|
||||
+
|
||||
"<div class='colum_2'><p> Contate o suporte suporte@itguys.com.br e informe esse erro"
|
||||
+
|
||||
erroMessage
|
||||
+
|
||||
"</p></div>";
|
||||
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('fechar');
|
||||
|
||||
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);
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
// Função para carregar e exibir as imagens protegidas
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
insercaoFunc_Total();
|
||||
});
|
||||
|
||||
function insercaoFunc_Total() {
|
||||
|
||||
const script_Load = document.createElement('script');
|
||||
script_Load.src = './js/page/Modulo_Construcao/Painel/Estrutura/load.js';
|
||||
document.body.appendChild(script_Load);
|
||||
|
||||
|
||||
}
|
||||
|
||||
async function criarBlocos() {
|
||||
|
||||
try {
|
||||
|
||||
const { response, apiUrl } = await Autenticao(); // Recebe o objeto com response e apiUrl
|
||||
const data = await response.json(); // Faz o parse do JSON retornado
|
||||
|
||||
// Agora acessa as propriedades do objeto
|
||||
const nomeCompleto = data.usuario.nome; // Nome completo do usuário
|
||||
|
||||
const Empresa = data.empresa.nome;
|
||||
const ImagemUser = `${apiUrl}${data.usuario.img_perfil}`;
|
||||
//const ImagemUser2 = `${apiUrl}${data.usuario.img_perfil}`;
|
||||
const logoEmpresa = `${apiUrl}${data.empresa.logo}`;
|
||||
|
||||
// Exibe as imagens protegidas usando os URLs retornados pela API
|
||||
loadImage(ImagemUser, 'profileImage');
|
||||
//loadImage(ImagemUser2, 'profileImage'); // Imagem de perfil do usuário
|
||||
loadImage(logoEmpresa, 'companyLogo'); // Logo da empresa
|
||||
|
||||
// Acessando o primeiro objeto do array retornado
|
||||
console.log(data);
|
||||
console.log(nomeCompleto);
|
||||
console.log(Empresa);
|
||||
console.log('Link da imagem de perfil -' + ImagemUser);
|
||||
console.log('Link da Logo -' + logoEmpresa);
|
||||
|
||||
await insercaoFunc_Estrutura();
|
||||
|
||||
|
||||
async function insercaoFunc_Estrutura() {
|
||||
|
||||
const script_Func = document.createElement('script');
|
||||
script_Func.src = './js/page/Modulo_Construcao/Painel/Estrutura/Estrutura.js';
|
||||
document.body.appendChild(script_Func);
|
||||
|
||||
const script_Html = document.createElement('script');
|
||||
script_Html.src = './js/page/Modulo_Construcao/Painel/Estrutura/Html_estrutura.js';
|
||||
document.body.appendChild(script_Html);
|
||||
|
||||
script_Html.onload = async () => {
|
||||
await EstruturaEsqueleto(); // Chama a função somente após o script ser carregado
|
||||
};
|
||||
|
||||
|
||||
async function EstruturaEsqueleto() {
|
||||
//constante que controla o estilo css que está estilizando todo o ambiente do usuário.
|
||||
const estilos = document.getElementById('conexao');
|
||||
estilos.href = './Css/page/Ambiente/Estrutura/estrutura.css';
|
||||
const construtor_primario = document.getElementById('entrada_1');
|
||||
|
||||
|
||||
//Estrutura Html que será apresentada sobre a tela
|
||||
construtor_primario.innerHTML = InterfaceAmbiente(nomeCompleto, Empresa);
|
||||
Interatividade();
|
||||
ApresentarTelas();
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
} catch (error) {
|
||||
|
||||
insercaoFunc_Erro();
|
||||
|
||||
function insercaoFunc_Erro() {
|
||||
|
||||
const script_ERRO = document.createElement('script');
|
||||
script_ERRO.src = './js/page/Modulo_Construcao/Painel/Estrutura/Painel_Erro.js';
|
||||
document.body.appendChild(script_ERRO);
|
||||
|
||||
script_ERRO.onload = async () => {
|
||||
await CasodeErro(); // Chama a função somente após o script ser carregado
|
||||
};
|
||||
|
||||
const script_ERRO_Html = document.createElement('script');
|
||||
script_ERRO_Html.src = './js/page/Modulo_Construcao/Painel/Estrutura/Html_erro.js';
|
||||
document.body.appendChild(script_ERRO_Html);
|
||||
|
||||
}
|
||||
|
||||
console.error('Erro ao criar blocos:', error);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Função para carregar uma imagem protegida com token JWT e exibi-la
|
||||
|
||||
async function loadImage(url, imgElementClass) {
|
||||
try {
|
||||
const token = getAuthToken();
|
||||
console.log('Token:', token);
|
||||
console.log('URL da imagem:', url);
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'x-access-token': token ? token : ''
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Erro ao carregar a imagem: ' + response.statusText);
|
||||
}
|
||||
|
||||
const blob = await response.blob();
|
||||
const imageUrl = URL.createObjectURL(blob);
|
||||
|
||||
// Seleciona todos os elementos com a classe
|
||||
const imgElements = document.getElementsByClassName(imgElementClass);
|
||||
if (imgElements.length > 0) {
|
||||
for (let i = 0; i < imgElements.length; i++) {
|
||||
imgElements[i].src = imageUrl;
|
||||
}
|
||||
} else {
|
||||
console.warn('Nenhum elemento encontrado com a classe:', imgElementClass);
|
||||
}
|
||||
|
||||
return imageUrl; // Retorna a URL da imagem carregada
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar a imagem:', error);
|
||||
console.log('Classe do elemento:', imgElementClass);
|
||||
return null; // Retorna null em caso de erro
|
||||
}
|
||||
}
|
||||
// Função para carregar a imagem de fundo
|
||||
async function loadBackgroundAndUpdateStyle() {
|
||||
try {
|
||||
const apiUrl = await getApiUrl();
|
||||
const token = getAuthToken();
|
||||
const response = await fetch(`${apiUrl}/mounting`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'x-access-token': token ? token : ''
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Erro ao carregar os dados: ' + response.statusText);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const imagemFun = `${apiUrl}${data.usuario.img_fundo}`;
|
||||
|
||||
const fundoResponse = await fetch(imagemFun, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'x-access-token': token ? token : ''
|
||||
}
|
||||
});
|
||||
|
||||
if (!fundoResponse.ok) {
|
||||
throw new Error('Erro ao carregar a imagem de fundo: ' + fundoResponse.statusText);
|
||||
}
|
||||
|
||||
const blob = await fundoResponse.blob();
|
||||
const fundoUserUrl = URL.createObjectURL(blob);
|
||||
|
||||
const fundouser = document.getElementById('fundouser');
|
||||
fundouser.innerHTML =
|
||||
'.seguimentacao_2 .coluna_1 {' +
|
||||
'width: 100%;' +
|
||||
'height: 30vh;' +
|
||||
'display: flex;' +
|
||||
'flex-direction: row;' +
|
||||
'background-image: url("' + fundoUserUrl + '");' +
|
||||
'background-position: center;'
|
||||
'background-position: center;' +
|
||||
'background-size: cover;' +
|
||||
'overflow: hidden;' +
|
||||
'transition: 1s ease;' +
|
||||
'}';
|
||||
|
||||
|
||||
|
||||
|
||||
console.log('Imagem de fundo carregada e estilo aplicado com sucesso.');
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar a imagem de fundo:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Aguarda o carregamento completo do DOM
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
setTimeout(async () => {
|
||||
await criarBlocos();
|
||||
await loadBackgroundAndUpdateStyle();
|
||||
setTimeout(localStorage.setItem('Carregou', 'true'), 500) // Salva um valor no localStorage
|
||||
}, 3000); // Executa as funções 3 segundos após o carregamento do DOM
|
||||
});
|
||||
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
|
||||
function Interatividade() {
|
||||
|
||||
var botao = document.getElementById('id_ajuste');
|
||||
var cabecario = document.querySelector('.capitulo_1');
|
||||
var tela = document.querySelector('.capitulo_2');
|
||||
var menu = document.querySelector('.menu_lateral');
|
||||
|
||||
if (botao) {
|
||||
botao.addEventListener('click', function () {
|
||||
console.log('Botão clicado!');
|
||||
if (menu) menu.classList.toggle('expansao');
|
||||
if (cabecario) cabecario.classList.toggle('expansao');
|
||||
if (tela) tela.classList.toggle('expansao');
|
||||
});
|
||||
} else {
|
||||
console.error('Botão não encontrado!');
|
||||
}
|
||||
|
||||
|
||||
/*if (Permissoes.visuMonitor) {
|
||||
const script2 = document.createElement('script');
|
||||
script2.src = './js/page/Ambiente/Monitoramento/Modulo_Construcao/Funcao/Estrutura_Secundaria_Monitor.js';
|
||||
script2.setAttribute // Acessando a propriedade corretamente
|
||||
document.body.appendChild(script2);
|
||||
}*/
|
||||
|
||||
// Adiciona o listener de clique após a construção do HTML
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
function ApresentarTelas() { }
|
||||
|
|
@ -0,0 +1,200 @@
|
|||
function InterfaceAmbiente(nomeCompleto, Empresa) {
|
||||
return `
|
||||
<nav>
|
||||
|
||||
<section class="menu_lateral">
|
||||
|
||||
<div class="seguimentacao_1">
|
||||
|
||||
<div class="coluna_1">
|
||||
|
||||
<div class="subcolunas_1">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<img src="./Acessts/Imagens/iT_Guys/Logo_itGuys - Copia.png" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="coluna_2">
|
||||
|
||||
<div class="subcolunas_1">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<img class="img" src="./Acessts/Imagens/Iconis/home.png" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="sub_entrada_moni_1"></div>
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<img class="img" src="./Acessts/Imagens/Iconis/technical-support.png" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<img class="img" src="./Acessts/Imagens/Iconis/caixa-de-ferramentas.png" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="subcolunas_2">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<img class="img" src="./Acessts/Imagens/Iconis/central-de-atendimento.png" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<img class="img" src="./Acessts/Imagens/Iconis/engrenagem - Copia.png" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="seguimentacao_2">
|
||||
|
||||
<div class="coluna_1">
|
||||
|
||||
<div class="subcolunas_1">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<img class="profileImage" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<h2> ${nomeCompleto} </h2>
|
||||
|
||||
<h2> ${Empresa} </h2>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="subcolunas_2">
|
||||
|
||||
<button class="id_ajuste" id="id_ajuste">
|
||||
|
||||
<img class="imgjust" src="./Acessts/Imagens/Iconis/seta-direita.png" alt="">
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="coluna_2">
|
||||
|
||||
<div class="subcolunas_1">
|
||||
|
||||
<a href="./html/Home.html" class="filheira_a" target="frame">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<h2>Home</h2>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
|
||||
<div id="sub_entrada_moni_2"></div>
|
||||
|
||||
<a href="https://suporte.itguys.com.br/" class="filheira_a" target="frame">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<h2>Servicdesk</h2>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
|
||||
<a href="./html/projetos_itguys.html" class="filheira_a" target="frame">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<h2>Ferramentas</h2>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="subcolunas_2">
|
||||
|
||||
<a href="https://api.whatsapp.com/send?phone=5521966344698" class="filheira_a" target="black_">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<h2>Suporte</h2>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
|
||||
<a href="./html/Config.html" class="filheira_a">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<h2>Configurações</h2>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</nav>
|
||||
|
||||
<main class="apresentacao">
|
||||
|
||||
<section class="capitulo_1">
|
||||
|
||||
<div class="Bloco_subcab1_1">
|
||||
|
||||
<img class="companyLogo" alt="" class="icon_subcab1_1">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="Bloco_subcab1_2">
|
||||
|
||||
<a href="https://dev.itguys.com.br/"><button>Logout</button></a>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="capitulo_2">
|
||||
|
||||
<iframe id="test1" name="frame" class="transmissão" src="./html/Home.html"frameborder = "0" ></iframe >
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
`;
|
||||
}
|
||||
|
|
@ -65,3 +65,4 @@ async function CasodeErro() {
|
|||
|
||||
}
|
||||
|
||||
document.body.style.backgroundColor = 'red'
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
async function Autenticao() {
|
||||
const apiUrl = await getApiUrl();
|
||||
const token = getAuthToken();
|
||||
|
||||
const response = await fetch(`${apiUrl}/mounting`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'x-access-token': token ? token : ''
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
return { response, apiUrl }; // Retorne um objeto com a resposta e apiUrl
|
||||
}
|
||||
|
|
@ -89,8 +89,12 @@
|
|||
</div>
|
||||
</main>
|
||||
<!--Script responsavel por lidar com o retiro das informações e as processar-->
|
||||
<script src="./js/page/Login/Modulo_Autenticacao/Funcao/login.js"></script>
|
||||
<script src="./js/page/Login/Modulo_Segurança/Funcao/seguranca.js"></script>
|
||||
<script src="./js/global/Modulo_de_Comunicacao/Funcao/Comunicacao.js"></script>
|
||||
<script src="./js/page/Modulo_Autenticacao/Funcao/segurancainput.js"></script>
|
||||
<script src="./js/page/Modulo_Autenticacao/Funcao/login.js"></script>
|
||||
<script src="./js/page/Modulo_Autenticacao/Painel/Repostas.js"></script>
|
||||
<script src="./js/page/Modulo_Autenticacao/Funcao/segurancaWind.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue