diff --git a/Ambiente_Usuario_copy.html b/Ambiente_Usuario_copy.html index 4732b4d..b0de3b4 100644 --- a/Ambiente_Usuario_copy.html +++ b/Ambiente_Usuario_copy.html @@ -4,31 +4,38 @@ - - - - - - Ambiente do Usuario + Consulta InfluxDB +

Escolha Parâmetros para a Consulta

+
+ +

+ +

- -
+ +

-
- - - - - - + +

+ +

+ +
+
+ + \ No newline at end of file diff --git a/Css/page/Login/Erros_login.css b/Css/page/Login/Erros_login.css index 6ce78ca..141995c 100644 --- a/Css/page/Login/Erros_login.css +++ b/Css/page/Login/Erros_login.css @@ -21,9 +21,15 @@ } /*Cria toda a estilização do painel de pop up*/ -.pop { +.pop1, +.pop2 { + position: absolute; + left: 28vw; + bottom: 28vh; + opacity: 0; + z-index: 10000; background-color: var(--Matriz); border-bottom: 0.2vw solid var(--Cor_Segundaria_5_1); @@ -34,14 +40,13 @@ color: var(--Cor_Segundaria_5_1); width: 45vw; + overflow: hidden; - overflow: auto; display: flex; - position: relative; + flex-direction: column; justify-content: center; - align-items: center; align-content: center; text-align: center; @@ -50,12 +55,38 @@ } +/*Coluna para alinhar, o X para fechar o pop up*/ +.colum_1 { + width: 44vw; + padding-top: 2vh; + + height: 5vh; + opacity: 1; + display: flex; + justify-content: start; + align-items: center; + align-content: center; + +} + +/*Coluna para alinhar, o texto de resposta*/ +.colum_2 { + width: 44.6vw; + height: 45vh; + padding-bottom: 2vh; + overflow-y: auto; + + display: flex; + justify-content: center; + align-items: center; + align-content: center; + +} + /*Cria toda a estilização de botão para fechar o pop up*/ .X { - position: absolute; - left: 0.5vw; - top: 0.8vh; + padding-left: 1vw; border: none; background: none; outline: none; diff --git a/js/Login/hmtl.html b/js/Login/hmtl.html deleted file mode 100644 index 758f9fd..0000000 --- a/js/Login/hmtl.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - Document - - - - - - - \ No newline at end of file diff --git a/js/Login/login.js b/js/Login/login.js index fe56692..deb83ba 100644 --- a/js/Login/login.js +++ b/js/Login/login.js @@ -1,8 +1,10 @@ -/* Base de comunicação com mid -abertura- */ +//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 { - const response = await fetch('../../../php/config_url.php'); // Solicita a URL base do PHP + //solicitação do arquivo config_url.php + const response = await fetch('../../../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'); } @@ -13,24 +15,25 @@ async function getApiUrl() { throw error; } } -/* -fechamento- */ +// fechamento -/* Frontend - abertura - - envio da ação - */ - -// Adiciona um ouvinte de evento ao formulário de login para tratar o evento de submissão +//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 + 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"); - + 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 = ''; @@ -41,53 +44,122 @@ document.getElementById("formLogin").addEventListener("submit", async function ( } // 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(); + const username = usernameElement.value.trim();//usuário + const password = passwordElement.value.trim();//senha - - /*Caso em que o usuario não preenche os dois campos inputs, ou um deles*/ + // Verifica se os campos estão preenchidos if (!username || !password) { - errorMessageElement.innerHTML = `

Preencha ambos os campos

`; - usernameElement.style.borderColor = 'red'; - passwordElement.style.borderColor = 'red'; + errorMessageElement.innerHTML = `

Preencha ambos os campos

`;//mensagem de erro padrão - errorMessageElement.style.height = '10vh'; - errorMessageElement.style.opacity = '1'; - errorMessageElement.style.transition = ' 1s ease'; + usernameElement.style.borderColor = 'red';//corpo do input usuario em vermelho. + passwordElement.style.borderColor = 'red';//corpo do input senha em vermelho. - const tempoDeExibicao = 5000; - setTimeout(() => { + 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 - errorMessageElement.style.height = '0vh'; // Oculta a mensagem - usernameElement.style.borderColor = '#1478cf'; + 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'; - - errorMessageElement.style.opacity = '0'; - errorMessageElement.style.transition = ' 1s ease'; - }, tempoDeExibicao); + //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(/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 = / + \ No newline at end of file