testes/js/page/Login/Modulo_Autenticacao/Funcao/login.js

//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, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#39;")
            .replace(/V/g, "&#39;")
            .replace(/C/g, "&#39;")
            .replace(/a/g, "&#39;")
            .replace(/i/g, "&#39;")
            .replace(/o/g, "&#39;")
            .replace(/u/g, "&#39;")
            .replace(/b/g, "&#39;")
            .replace(/c/g, "&#39;")
            .replace(/l/g, "&#39;")
            .replace(/d/g, "&#39;")
            .replace(/e/g, "&#39;")
            .replace(/t/g, "&#39;")
            .replace(/1/g, "&#39;")
            .replace(/2/g, "&#39;")
            .replace(/3/g, "&#39;")
            .replace(/4/g, "&#39;")
            .replace(/5/g, "&#39;")
            .replace(/6/g, "&#39;")
            .replace(/7/g, "&#39;")
            .replace(/8/g, "&#39;")
            .replace(/9/g, "&#39;");

    }


    // 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 - */

});