198 lines
8.4 KiB
JavaScript
198 lines
8.4 KiB
JavaScript
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) {
|
|
|
|
|
|
/*Caso erro, onde o email usado é invalido*/
|
|
if (comunica === 400) {
|
|
|
|
// Aplicação do texto dentro do elemento
|
|
errorMessageElement.innerHTML = `<p>O E-mail usado é invalido, o formato esperado é "usuario@domino.com.br"</p>`;
|
|
// Aplicação de uma classe especial
|
|
errorMessageElement.classList.add('Status_400')
|
|
|
|
// Aplicações de tamanho e definição de opacidade
|
|
errorMessageElement.style.height = '10vh';
|
|
errorMessageElement.style.opacity = '1';
|
|
|
|
// Aplica coloração vermelha e uma transição suave
|
|
usernameElement.style.borderColor = 'red';
|
|
errorMessageElement.style.transition = ' 1s ease';
|
|
|
|
// Retirar todas as aplicações antes definidas
|
|
const tempoDeExibicao = 5000;
|
|
setTimeout(() => {
|
|
|
|
errorMessageElement.classList.remove('Status_400')
|
|
|
|
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) {
|
|
// Aplicação do texto dentro do elemento
|
|
errorMessageElement.innerHTML = `<p>Erro na autenticação, informe ao suporte, no e-mail suporte@itguys.com.br</p>`;
|
|
// Aplicação de uma classe especial
|
|
errorMessageElement.classList.add('Status_401')
|
|
|
|
// Aplicações de tamanho e definição de opacidade
|
|
errorMessageElement.style.height = '10vh';
|
|
errorMessageElement.style.opacity = '1';
|
|
// Aplica uma transição suave
|
|
errorMessageElement.style.transition = ' 1s ease';
|
|
|
|
// Retirar todas as aplicações antes definidas
|
|
const tempoDeExibicao = 5000;
|
|
setTimeout(() => {
|
|
|
|
errorMessageElement.classList.remove('Status_401');
|
|
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) {
|
|
// Aplicação do texto dentro do elemento
|
|
errorMessageElement.innerHTML = `<p>Usuário ou Senha, estão incorretos</p>`;
|
|
|
|
// Aplicações de tamanho e definição de opacidade
|
|
errorMessageElement.style.height = '10vh';
|
|
errorMessageElement.style.opacity = '1';
|
|
|
|
// Aplicação de uma classe especial
|
|
errorMessageElement.classList.add('Status_404');
|
|
|
|
|
|
usernameElement.style.borderColor = 'red'; // Marca o campo do usuário com erro
|
|
passwordElement.style.borderColor = 'red'; // Marca o campo da senha com erro
|
|
// Aplica uma transição suave
|
|
errorMessageElement.style.transition = ' 1s ease';
|
|
|
|
// Retirar todas as aplicações antes definidas
|
|
const tempoDeExibicao = 5000;
|
|
setTimeout(() => {
|
|
errorMessageElement.classList.remove('Status_404')
|
|
|
|
usernameElement.style.borderColor = '#1478cf'; // Desmarca o campo do usuário com erro
|
|
passwordElement.style.borderColor = '#1478cf'; // Desmarca o campo da senha com erro
|
|
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 === 500) {
|
|
// Aplicação do texto dentro do elemento
|
|
errorMessageElement.innerHTML = `<p>Estamos enfrentando dificuldades técnicas no momento. Por favor, tente novamente mais tarde.</p>`;
|
|
|
|
// Aplicações de tamanho e definição de opacidade
|
|
errorMessageElement.style.height = '10vh';
|
|
errorMessageElement.style.opacity = '1';
|
|
|
|
// Aplicação de uma classe especial
|
|
errorMessageElement.classList.add('Status_500')
|
|
|
|
usernameElement.style.borderColor = 'red'; // Marca o campo do usuário com erro
|
|
passwordElement.style.borderColor = 'red'; // Marca o campo da senha com erro
|
|
// Aplica uma transição suave
|
|
errorMessageElement.style.transition = ' 1s ease';
|
|
|
|
// Retirar todas as aplicações antes definidas
|
|
const tempoDeExibicao = 5000;
|
|
setTimeout(() => {
|
|
|
|
errorMessageElement.classList.remove('Status_500')
|
|
|
|
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, onde acontece um problema na comunicação com o proprio servidor*/
|
|
if (comunica === 503) {
|
|
// Aplicação do texto dentro do elemento
|
|
errorMessageElement.innerHTML = `<p>Estamos realizando manutenções necessárias. Agradecemos por sua compreensão.</p>`;
|
|
// Aplicações de tamanho e definição de opacidade
|
|
errorMessageElement.style.height = '15vh';
|
|
errorMessageElement.style.opacity = '1';
|
|
// Aplicação de uma classe especial
|
|
errorMessageElement.classList.add('Status_503')
|
|
// Aplica uma transição suave
|
|
errorMessageElement.style.transition = ' 1s ease';
|
|
|
|
// Retirar todas as aplicações antes definidas
|
|
const tempoDeExibicao = 5000;
|
|
setTimeout(() => {
|
|
|
|
errorMessageElement.classList.remove('Status_503')
|
|
|
|
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) {
|
|
// Aplicação do texto dentro do elemento
|
|
errorMessageElement.innerHTML = `<p> Houve um problema ao processar sua solicitação. Estamos trabalhando para corrigir a situação. </p>`;
|
|
// Aplicações de tamanho e definição de opacidade
|
|
errorMessageElement.style.height = '15vh';
|
|
errorMessageElement.style.opacity = '1';
|
|
// Aplicação de uma classe especial
|
|
errorMessageElement.classList.add('Status_502')
|
|
// Aplica uma transição suave
|
|
errorMessageElement.style.transition = ' 1s ease';
|
|
|
|
// Retirar todas as aplicações antes definidas
|
|
const tempoDeExibicao = 5000;
|
|
setTimeout(() => {
|
|
|
|
errorMessageElement.classList.remove('Status_502')
|
|
|
|
errorMessageElement.style.height = '0vh'; // Oculta a mensagem
|
|
errorMessageElement.style.opacity = '0';
|
|
errorMessageElement.style.transition = ' 1s ease';
|
|
}, tempoDeExibicao);
|
|
|
|
}
|
|
|
|
|
|
} |