teste
/
testes
Template
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

Atualização 1

This commit is contained in:
Daivid.alves 2024-08-30 17:20:45 -03:00
parent 6a9fb45829
commit af79066ca0
12 changed files with 434 additions and 669 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Css/Ambiente_Usuario/Blocos.css → Css/global/Blocos.css
View File

@ -61,6 +61,7 @@ div.ativo {
}
.capitulo_1:hover {
width: 15vw;

1
Css/global/Estrutura.css Normal file
View File

@ -0,0 +1 @@
/*Usar para construir toda a estrutura padrão do ambiente */

53
Css/global/import.css vendored Normal file
View File

@ -0,0 +1,53 @@
/*Definir elementos que estão sendo importando ou pré definidos*/
body {
margin: 0;
padding: 0;
}
@font-face {
font-family: fonteTi;
src: url(../../Acessts/Fontes/zekton\ rg.otf);
}
@font-face {
font-family: fonteTa;
src: url(../../Acessts/Fontes/MADE\ Evolve\ Sans\ Bold\ \(PERSONAL\ USE\).otf);
}
/*Alinhamento de definições para todo o ambiente do usuário*/
:root {
/*Fundos das telas de iframe de cada monitoramento*/
--fundo_5: rgb(226, 226, 226);
/*padrão de fonts*/
--font_titulo: fonteTi;
--font_conteudo: fonteTa;
/*Cor matriz*/
--Matriz: #ffffff;
/*Paleta de cores padrão*/
--Cor_Primaria_1: #1B8C51;
--Cor_Primaria_2: #1B8C77;
--Cor_Primaria_3: #1B7C8C;
--Cor_Primaria_4: #1B8C2A;
--Cor_Primaria_5: #1B588C;
/*Paleta de cores padrão claro*/
--Cor_Segundaria_1_1: #22bb6c;
--Cor_Segundaria_2_1: #22c0a3;
--Cor_Segundaria_3_1: #26b1c7;
--Cor_Segundaria_4_1: #26c03a;
--Cor_Segundaria_5_1: #1478cf;
/*Paleta de cores padrão escuro*/
--Cor_Segundaria_1_1: #115834;
--Cor_Segundaria_2_2: #125f51;
--Cor_Segundaria_3_2: #1B7C8C;
--Cor_Segundaria_4_2: #105018;
--Cor_Segundaria_5_2: #123655;
}

52
Css/padraouser.css → Css/global/padraouser.css
View File

@ -1,55 +1,3 @@
body {
margin: 0;
padding: 0;
}
@font-face {
font-family: fonteTi;
src: url(../Acessts/Fontes/zekton\ rg.otf);
}
@font-face {
font-family: fonteTa;
src: url(../Acessts/Fontes/MADE\ Evolve\ Sans\ Bold\ \(PERSONAL\ USE\).otf);
}
@font-face {
font-family: fonteseta;
src: url(../Acessts/Fontes/venus\ rising\ rg.otf);
}
:root {
--fundo_1: #1478cf;
--fundo_2: #1B588C;
--fudno_3: #ffffff;
--fundo_4: #123655;
/*Fundos das telas de iframe de cada monitoramento*/
--fundo_5: rgb(226, 226, 226);
--font_titulo: fonteTi;
--font_conteudo: fonteTa;
--variante_font_1: #ffffff;
--variante_font_2: #000000;
--variante_font_3: #1B588C;
--variante_font_4: #1478cf;
--sombra_variante_1: #000000;
}
/* Estilos para o tema escuro */
.dark-theme {
background-color: #1B588C;
color: #1478CF;
--font_titulo: fonteTi;
--font_conteudo: fonteTa;
}
.menu {
width: 100%;
display: flex;

422
Css/padrao.css
View File

@ -1,422 +0,0 @@
/*----------------------------- Cabe<62>alho inicial do site com os iconis externos -------------------------------------- */
/* Define as margens e preenchimentos padr<64>o para o corpo e a p<>gina HTML */
html,
body {
margin: 0;
padding: 0;
}
/* Estilos para o Bloco_1 */
.Bloco_1 {
position: absolute;
/* Define a posi<73><69>o absoluta do bloco */
top: 0vh;
/* Alinha o topo do bloco */
display: flex;
/* Define o display como flex<65>vel */
justify-content: flex-end;
/* Alinha os itens <20> direita */
width: 100%;
/* Define a largura total */
backdrop-filter: blur(1vw);
/* Aplica um efeito de desfoque ao fundo */
background-color: #3535352a;
/* Cor de fundo com transpar<61>ncia */
/* Defini<6E><69>o de preenchimento e altura */
padding-top: 10px;
padding-bottom: 10px;
height: 3.9vh;
z-index: 99999;
/* Z-index para posicionamento em camadas */
}
.Bloco_1 a {
text-decoration: none;
}
/* Estilos para a classe icon2 */
.icon2 {
width: 1.6vw;
/* Largura do <20>cone */
padding-right: 20px;
/* Preenchimento <20> direita */
transition: ease 1s;
/* Transi<73><69>o suave */
}
.icon2:hover {
transform: scale(1.5);
/* Aumenta o tamanho do <20>cone ao passar o mouse */
transition: ease 1s;
/* Transi<73><69>o suave */
}
/*----------------------------- Fechamento do Cabe<62>alho inicial da p<>gina -------------------------------------- */
/*----------------------------- Fontes externas que est<73>o sendo usadas no site -------------------------------------- */
@font-face {
font-family: fonteTi;
src: url(../Acessts/Fontes/zekton\ rg.otf);
}
@font-face {
font-family: fonteTa;
src: url(../Acessts/Fontes/MADE\ Evolve\ Sans\ Bold\ \(PERSONAL\ USE\).otf);
}
@font-face {
font-family: fonteseta;
src: url(../Acessts/Fontes/venus\ rising\ rg.otf);
}
/*----------------------------- Fechamento das fontes que est<73>o sendo usados no site -------------------------------------- */
/*----------------------------- Todos os elementos dedicados para o menu -------------------------------------- */
/* Estilos para o Bloco_nav_1 */
.Bloco_nav_1 {
position: absolute;
/* Define a posi<73><69>o absoluta do bloco */
top: 8vh;
/* Alinha o topo do bloco */
display: flex;
/* Define o display como flex<65>vel */
flex-direction: row;
/* Define a dire<72><65>o dos itens como linha */
justify-content: space-around;
/* Distribui o espa<70>o ao redor dos itens */
backdrop-filter: blur(1vw);
/* Aplica um efeito de desfoque ao fundo */
width: 100%;
/* Define a largura total */
background-color: #3535352a;
/* Cor de fundo com transpar<61>ncia */
padding: 2px 0px;
/* Preenchimento superior e inferior */
height: 10vh;
/* Altura do bloco */
z-index: 99;
/* Z-index para posicionamento em camadas */
}
/* Estilos para os links no menu */
.Bloco_nav_1 a {
text-decoration: none;
/* Remove a decora<72><61>o do link */
}
/* Estilos para o Bloco_nav_2 */
.Bloco_nav_2 {
width: 60vw;
/* Largura do bloco */
order: 2;
/* Define a ordem do bloco */
display: flex;
/* Define o display como flex<65>vel */
align-content: center;
/* Alinha o conte<74>do verticalmente */
align-items: center;
/* Alinha os itens verticalmente */
}
/* Estilos para os itens do menu */
.nav_bloco_iten {
display: inline-block;
/* Define o display como bloco */
width: 6vw;
/* Largura do item */
padding-left: 5vw;
/* Preenchimento <20> esquerda */
font-size: 1.3vw;
/* Tamanho da fonte */
font-family: fonteTi;
/* Fonte */
justify-content: space-around;
/* Distribui o espa<70>o ao redor dos itens */
color: white;
/* Cor do texto */
transition: ease 1s;
/* Transi<73><69>o suave */
}
.nav_bloco_iten:hover {
color: rgb(0, 89, 255);
/* Cor do texto ao passar o mouse */
transition: ease 1s;
/* Transi<73><69>o suave */
}
/* Estilos para a classe Logo */
.Logo {
order: 1;
/* Define a ordem do elemento */
width: 15vw;
/* Largura do elemento */
}
/* Estilos para o Botao1 */
.Botao1 {
order: 3;
/* Define a ordem do elemento */
position: relative;
/* Define a posi<73><69>o como relativa */
display: flex;
/* Define o display como flex<65>vel */
align-items: center;
/* Alinha os itens verticalmente */
transition: ease 1s;
/* Transi<73><69>o suave */
}
.Botao1 button {
outline: none;
/* Remove o contorno do bot<6F>o */
background: none;
/* Remove o plano de fundo do bot<6F>o */
border: none;
/* Remove a borda do bot<6F>o */
color: white;
/* Cor do texto */
font-family: fonteTi;
/* Fonte */
font-size: 1.2vw;
/* Tamanho da fonte */
border: 2px solid white;
/* Borda do bot<6F>o */
padding: 1vh 1vw;
/* Preenchimento do bot<6F>o */
}
.Botao1 a {
text-decoration: none;
/* Remove a decora<72><61>o do link */
}
.Botao1:hover {
transform: scale(0.8);
/* Reduz o tamanho ao passar o mouse */
cursor: pointer;
/* Altera o cursor ao passar o mouse */
transition: ease 1s;
/* Transi<73><69>o suave */
}
.Botao1 button:hover {
border: 2px solid rgb(0, 89, 255);
/* Borda do bot<6F>o ao passar o mouse */
color: rgb(0, 89, 255);
/* Cor do texto ao passar o mouse */
}
/*----------------------------- Fechamento do menu -------------------------------------- */
/*----------------------------- Rodap<61> final do site -------------------------------------- */
/* Estilos para o Bloco_Rodape1 */
.Bloco_Rodape1 {
display: flex;
/* Define o display como flex<65>vel */
flex-direction: row;
/* Define a dire<72><65>o dos itens como linha */
justify-content: space-around;
/* Distribui o espa<70>o ao redor dos itens */
background-color: #3457a2;
/* Cor de fundo */
padding: 20px;
/* Preenchimento */
}
/* Estilos para a Coluna_Rod_1 */
.Coluna_Rod_1 {
width: 25vw;
/* Largura da coluna */
border-left: 1px solid white;
/* Borda <20> esquerda */
display: flex;
/* Define o display como flex<65>vel */
flex-direction: column;
/* Define a dire<72><65>o dos itens como coluna */
justify-content: center;
/* Alinha os itens verticalmente */
align-items: center;
/* Alinha os itens horizontalmente */
align-content: center;
/* Alinha o conte<74>do verticalmente */
}
/* Estilos para as Coluna_Rod_2, Coluna_Rod_3, Coluna_Rod_4 */
.Coluna_Rod_2,
.Coluna_Rod_3,
.Coluna_Rod_4 {
width: 20vw;
/* Largura das colunas */
display: flex;
/* Define o display como flex<65>vel */
justify-content: center;
/* Alinha os itens horizontalmente */
align-items: center;
/* Alinha os itens verticalmente */
align-content: center;
/* Alinha o conte<74>do verticalmente */
border-left: 1px solid white;
/* Borda <20> esquerda */
}
/* Estilos para os links nas colunas */
.Coluna_Rod_2 a,
.Coluna_Rod_3 a,
.Coluna_Rod_4 a {
font-family: fonteTi;
/* Fonte */
color: white;
/* Cor do texto */
text-decoration: none;
/* Remove a decora<72><61>o do link */
}
/* Estilos para as listas nas colunas */
.Coluna_Rod_2 li,
.Coluna_Rod_3 li,
.Coluna_Rod_4 li {
font-family: fonteTi;
/* Fonte */
font-size: 1vw;
/* Tamanho da fonte */
list-style: none;
/* Remove os marcadores de lista */
transition: 0.2s ease;
/* Transi<73><69>o suave */
}
/* Estilos para os itens da lista ao passar o mouse */
.Coluna_Rod_2 li:hover,
.Coluna_Rod_3 li:hover,
.Coluna_Rod_4 li:hover {
font-family: fonteTi;
/* Fonte */
font-size: 1vw;
/* Tamanho da fonte */
color: #11bb9c;
/* Cor do texto ao passar o mouse */
list-style: none;
/* Remove os marcadores de lista */
transition: 0.2s ease;
/* Transi<73><69>o suave */
}
/* Estilos para os t<>tulos nas colunas */
.Coluna_Rod_2 h2,
.Coluna_Rod_3 h2,
.Coluna_Rod_4 h2 {
font-family: fonteTi;
/* Fonte */
text-align: center;
/* Alinhamento do texto no centro */
color: white;
/* Cor do texto */
}
/* Estilos para a sub_coluna_Rod_1_1 */
.sub_coluna_Rod_1_1 img {
padding: auto;
/* Preenchimento autom<6F>tico */
width: 10vw;
/* Largura da imagem */
font-size: 15px;
/* Tamanho da fonte */
color: white;
/* Cor do texto */
}
/* Estilos para a sub_coluna_Rod_1_2 */
.sub_coluna_Rod_1_2 {
display: flex;
/* Define o display como flex<65>vel */
align-items: center;
/* Alinha os itens verticalmente */
justify-content: center;
/* Alinha os itens horizontalmente */
align-content: center;
/* Alinha o conte<74>do verticalmente */
}
/* Estilos para a classe icon2_rod */
.icon2_rod {
width: 1.6vw;
/* Largura do <20>cone */
gap: 160vw;
/* Espa<70>amento entre os <20>cones */
margin-top: 2vh;
/* Margem superior */
cursor: pointer;
/* Cursor do mouse */
padding: 5px;
/* Preenchimento */
border: solid 2px white;
/* Borda */
background-color: #3457a2;
/* Cor de fundo */
transition: ease 1s;
/* Transi<73><69>o suave */
}
.icon2_rod:hover {
transform: scale(1.2);
/* Aumenta o tamanho ao passar o mouse */
transition: ease 1s;
/* Transi<73><69>o suave */
}
/* Estilos para os par<61>grafos dentro de Bloco_Rodape1 */
.Bloco_Rodape1 p {
padding: auto;
/* Preenchimento autom<6F>tico */
font-size: 1vw;
/* Tamanho da fonte */
font-family: fonteTi;
/* Fonte */
margin-left: 20px;
/* Margem esquerda */
color: white;
/* Cor do texto */
}
/* Estilos para o Bloco_Rodape2 */
.Bloco_Rodape2 {
background-color: #3457a2;
/* Cor de fundo */
border-top: solid 1px white;
/* Borda superior */
padding: 5px;
/* Preenchimento */
}
/* Estilos para os t<>tulos dentro de Bloco_Rodape2 */
.Bloco_Rodape2 h2 {
padding: auto;
/* Preenchimento autom<6F>tico */
font-size: 1vw;
/* Tamanho da fonte */
font-family: fonteTi;
/* Fonte */
color: white;
/* Cor do texto */
text-align: center;
/* Alinhamento do texto no centro */
}
.error-message {
color: red;
margin-top: 1vh;
font-size: 1vw;
font-family: fonteTi;
}
/*----------------------------- Fechamento final do site -------------------------------------- */

0
Css/Ambiente_Usuario/erro_404.css → Css/page/Telas_acao/erro_404.css
View File

75
Css/page/login/Erros_login.css Normal file
View File

@ -0,0 +1,75 @@
/*Classe padrão para estilizar o dimensionamento de todas mensagens de erro*/
.error-message {
color: var(--Cor_Segundaria_2_1);
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
text-align: center;
}
/*Sub classe para edições especificas, para a tag p, usando como referencia da classe, error-message*/
.error-message p {
font-size: 1.2vw;
font-family: var(--font_conteudo);
}
/*Cria toda a estilização do painel de pop up*/
.pop {
position: absolute;
opacity: 0;
z-index: 10000;
background-color: var(--Matriz);
border-bottom: 0.2vw solid var(--Cor_Segundaria_5_1);
border-top: 0.2vw solid var(--Cor_Segundaria_5_1);
border-left: 0.2vw solid var(--Cor_Segundaria_5_1);
border-right: 0.2vw solid var(--Cor_Segundaria_5_1);
color: var(--Cor_Segundaria_5_1);
width: 45vw;
overflow: auto;
display: flex;
position: relative;
justify-content: center;
align-items: center;
align-content: center;
text-align: center;
font-size: 1.2vw;
font-family: var(--font_conteudo);
}
/*Cria toda a estilização de botão para fechar o pop up*/
.X {
position: absolute;
left: 0.5vw;
top: 0.8vh;
border: none;
background: none;
outline: none;
color: var(--Cor_Segundaria_5_1);
font-family: var(--font_conteudo);
transition: 1s ease;
font-size: 1.5vw;
}
/*Defini uma interatividade com o mouse, onde toda a vez que o mouse ficar sobre ele, ele por sua vez ira mudar de cor*/
.X:hover {
color: var(--Cor_Segundaria_2_1);
transition: 1s ease;
}

143
Css/Ambiente_Usuario/login.css → Css/page/login/Estrutura_login.css
View File

@ -1,14 +1,16 @@
/*importações de outros estilos css para o funcionamento desse proprio */
@import '../../global/import.css';
@import './Erros_login.css';
/*Alinhamento da propria pagina, tirar parametros bases da propria página html*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.fundo {
background-image: url('../../Acessts/Imagens/21321.png');
background-size: cover;
}
/*Alinhamento da propria pagina, define um alinhamento de centralização do painel de login no centro da propria página*/
.centralizar {
display: flex;
justify-content: center;
@ -17,22 +19,16 @@
min-height: 100vh;
}
@font-face {
font-family: fonteTi;
src: url(../Acessts/Fontes/zekton\ rg.otf);
}
@font-face {
font-family: fonteTa;
src: url(../Acessts/Fontes/MADE\ Evolve\ Sans\ Bold\ \(PERSONAL\ USE\).otf);
}
/*
.invisivel {
display: none;
}
*/
/*Sendo todo o painel principal da pagina, e aplicações de alinhamento dentro desse proprio painel, sendo o proprio corpo do painel de login*/
.Bloco {
box-shadow: 10px 10px 5px rgb(68, 68, 68);
box-shadow: 10px 10px 5px var(--Cor_Segundaria_5_2);
;
padding: 30px 45px;
width: 30vw;
height: 75vh;
@ -50,29 +46,31 @@
}
/*sendo a classe que defini alinhamentos para a propria logo*/
.logo {
align-items: center;
text-align: center;
}
/*Sendo uma especificação para toda a tag img, que esteja dentro da tag que está usando a classe logo, terá esse dimensionamento */
.logo img {
width: 10vw;
}
/*Resumindamente lida diretamente em alinhar todos os elementos inputs e labels dentro do painel de login*/
.login_central {
align-items: center;
text-align: center;
color: rgb(0, 119, 255);
font-family: fonteTi;
color: var(--Cor_Segundaria_5_1);
font-family: var(--font_conteudo);
font-size: 1.5vw;
padding: 0vw 1vh;
margin-bottom: 4vh;
}
/*São as caixa de alinhamento tanto para o tudo relacionado a senha quanto para tudo que é relacionado a login*/
.Login,
.Senha {
display: flex;
@ -85,6 +83,7 @@
margin-top: 2vh;
}
/*São os textos sobre tanto a caixa de texto de usuario quanto a caixa de texto de senha*/
.Login_label,
.Senha_label {
@ -96,12 +95,14 @@
}
/*edição especifica usando as classes superiores para editar tag img dento delas, sendo os iconis de login e senha*/
.Login img,
.Senha img {
width: 3.5vw;
}
/*São a edição sobre as caixa de texto, tanto do usuário quanto da senha.*/
.Login_input,
.Senha_input {
width: 90%;
@ -114,13 +115,15 @@
outline: none;
font-size: 1vw;
color: #0077ff;
border: 2.5px solid #0077ff;
color: var(--Cor_Segundaria_5_1);
border: 2.5px solid var(--Cor_Segundaria_5_1);
transition: 1s ease;
}
/*Aqui só defini alguma dependencia de dimensionamento da tags inputs para as tags superiores com as classes .Login_input,
.Senha_input, ao mesmo tempo que defini os fundo do input transparentes */
.Login_input input,
.Senha_input input {
width: 100%;
@ -128,110 +131,31 @@
background: transparent;
}
/*Defini pequena mudança de cor, para o momento que o mouse interage com o input*/
.Login_input:hover,
.Senha_input:hover {
border: 2.5px solid rgb(30, 121, 132);
border: 2.5px solid var(--Cor_Segundaria_2_1);
transition: 1s ease;
}
/*Defini edições em funcionalidade dos inputs que no caso é o placeholder, que resumidamente é textinho que fica inicialmente, antes do usuario escrever.*/
.Login input::placeholder,
.Senha input::placeholder {
font-family: fonteTi;
font-family: var(--font_conteudo);
color: #696969;
font-size: 1vw;
}
.select-menu {
margin-top: 2vh;
width: 100%;
cursor: pointer;
position: relative;
}
.select {
border: 0.2vw solid #0077ff;
width: 100%;
height: 6vh;
color: #0077ff;
font-family: fonteTi;
font-weight: 500;
display: flex;
align-items: center;
justify-content: space-around;
transition: ease 1s;
}
.select:hover {
background-color: #0077ff;
width: 100%;
height: 6vh;
color: #ffffff;
font-family: fonteTi;
font-weight: 500;
display: flex;
align-items: center;
justify-content: space-around;
transition: ease 1s;
}
.options-list {
position: absolute;
width: 100%;
height: 0;
background-color: rgba(139, 139, 139, 0.459);
backdrop-filter: blur(20px);
overflow-y: auto;
transition: 1s ease;
}
.option {
border-top: 0.2vh solid rgb(255, 255, 255);
color: white;
font-family: fonteTi;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 0;
font-weight: 500;
font-size: 14px;
transition: .3s ease-in-out;
}
.option:hover {
background-color: #0077ff;
}
.options-list::-webkit-scrollbar {
background-color: transparent;
}
.options-list::-webkit-scrollbar-thumb {
background-color: #0077ff;
width: 0.2vw;
}
.options-list.active {
position: absolute;
height: 20vh;
}
/*Define edições para o botão do painel de login*/
.botao {
margin-top: 20px;
width: 100%;
height: 6vh;
background-color: #0077ff;
font-family: fonteTi;
background-color: var(--Cor_Segundaria_5_1);
font-family: var(--font_conteudo);
font-size: 1vw;
color: rgb(255, 255, 255);
border: none;
@ -239,8 +163,9 @@
transition: 1s ease;
}
/*Define pequena interatividade com o mouse, onde o botão muda a cor de seu fundo e seu proprio dimensionamento muda*/
.botao:hover {
background-color: rgb(30, 121, 132);
background-color: var(--Cor_Segundaria_2_1);
color: white;
transform: scale(0.9);
transition: 1s ease;

238
js/Login/login.js Normal file
View File

@ -0,0 +1,238 @@
// Função para obter a URL base do servidor
async function getApiUrl() {
try {
const response = await fetch('../ambiente_python/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;
}
}
// 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;
}
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
});
/*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_python/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, 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 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>Usuario 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 nem mesmo acontece uma comunicação com o servidor*/
} catch (error) {
console.error('Error:', error); // Loga qualquer erro ocorrido
errorMessageElement.innerHTML = '<p>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);
}
});

74
js/login.js
View File

@ -1,74 +0,0 @@
// Função para obter a URL base do servidor
async function getApiUrl() {
try {
const response = await fetch('../ambiente_python/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;
}
}
// 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");
// Limpa qualquer mensagem de erro anterior e bordas de campo
errorMessageElement.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();
if (!username || !password) {
errorMessageElement.innerText = "Preencha ambos os campos.";
usernameElement.style.borderColor = 'red';
passwordElement.style.borderColor = 'red';
return;
}
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
});
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_python/Ambiente_Usuario copy.html";
} else {
errorMessageElement.innerText = "Usuário ou senha incorreto"; // Exibe mensagem de erro
usernameElement.style.borderColor = 'red'; // Marca o campo do usuário com erro
passwordElement.style.borderColor = 'red'; // Marca o campo da senha com erro
}
} catch (error) {
console.error('Error:', error); // Loga qualquer erro ocorrido
errorMessageElement.innerHTML = 'Erro ao tentar se comunicar com o servidor. Por favor, tente novamente mais tarde.';
}
});

42
login.html
View File

@ -1,46 +1,66 @@
<!DOCTYPE html>
<html lang="en-us">
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login | iTGuys</title>
<link rel="stylesheet" href="./Css/Ambiente_Usuario/login.css">
<link rel="stylesheet" href="./Css/padrao.css">
<link rel="stylesheet" href="./Css/page/login/Estrutura_login.css">
<link rel="icon" type="image/x-icon" href="./Acessts/Imagens/iT_Guys/logo1.png">
</head>
<body class="fundo centralizar">
<!--Div usada para apresentar o pop up do caso de erro 503, usando a classe para estilizar, e a id para definir as funções do painel-->
<div class="pop" id="erro_503">
</div>
<!-- Edições para aplicar uma alinhamento centralizado na página, definino a classe centralizar estilizar todo o corpo da página -->
<body class="centralizar">
<main>
<div>
<div id="bloco" class="Bloco">
<!-- essa div organiza todos os elementos do painel, além dela ser o painel com as bordas azuis, definindo a classe bloco para estilizar e alinhar todo o painel -->
<!-- id="bloco" V -->
<div class="Bloco">
<!--div responsavel por apresentar a logo da empresa, dentro no painel de login, defininido a classe logo, para alinhar e dimensionar a logo da empresa-->
<div class="logo">
<img src="./Acessts/Imagens/iT_Guys/Logo_itGuys.png">
</div>
<!--Formulario que alinha todos os inputs da tela de login, usando a id formLogin para criar a base de interatividade com o script login.js-->
<form id="formLogin">
<!--Div responsavel por alinhar o titulo "Login" e definir suas especificações, utilizando o login_central para alinhar o titulo da página-->
<div class="login_central">
<h1>Login</h1>
</div>
<!--Div responsavel por alinhar a label e o input realacionados ao dominio do usuário, usando a classe Login focado unicamente e alinhar todos os elementos relacionados ao usuário.-->
<div class="Login">
<img src="./Acessts/Imagens/Iconis/User 2.png" alt="">
<!--caixa de entrada para os usuario, tendo a classe login_input para estilizar ela-->
<input class="Login_input" type="text" name="usuario" id="username"
placeholder="usuario@dominio.com.br" autocomplete="username" required>
placeholder="usuario@dominio.com.br" autocomplete="username">
</div>
<!--Div responsavel por alinhar a label e o input realacionados ao senha do usuário, usando a classe Senha focado unicamente e alinhar todos os elementos relacionados a senha-->
<div class="Senha">
<img src="./Acessts/Imagens/Iconis/User 1.png" alt="">
<!--caixa de entrada para a senha do usuário, tendo a classe Senha_input para estilizar ela-->
<input class="Senha_input" type="password" name="senha" id="password"
placeholder="Escreva sua senha" autocomplete="current-password" required>
placeholder="escreva sua senha" autocomplete="current-password">
</div>
<div id="errorMessage" class="error-message"></div> <!-- Adicionado para mensagem de erro -->
<div id="errorMessage" class="error-message"></div>
<!-- Dentro dessa div, é onde as mensagens de erro são apresentadas na tela , usando a classe erro-massege para sua estilização, e id erroMessage para aplicação de sua funcionalidades com o login.js-->
<div>
<!--Botão de envio para o mid end, usando a calsse botao para estilização, id submit para sua interação de envio.-->
<button class="botao" id="submit" name="submit">Ok</button>
</div>
</form>
</div>
</div>
</main>
<script src="./js/login.js"></script>
<!--Script responsavel por lidar com o retiro das informações e as processar-->
<script src="./js/Login/login.js"></script>
</body>
</html>

2
python/server.py
View File

@ -91,7 +91,7 @@ def login():
return jsonify({'msg': 'Não foi possível conectar ao servidor LDAP. Verifique a conexão de rede e as configurações do servidor.'}), 503
except LDAPException as e:
# Captura qualquer outra exceção LDAP genérica
return jsonify({'msg': f'Erro LDAP: {str(e)}'}), 500
return jsonify({'Erro 500': f'Erro LDAP: {str(e)}'}), 500
# Decorador para proteger rotas com JWT
def token_required(f):