//dispara essa função anônima quando a tela terminar de carregar
window.addEventListener('load', () => {

  //dependendo da velocidade da sua internet, pode ser que carregue muito rápido, daí a tela só pisca a animação de loading
  //portanto, depois de 1s de carregada a página, a tela de loading sumirá
  setTimeout(() => {
    const preloader = document.querySelector('.preload')

    preloader.classList.add('finish'); //essa classe tira a tela de loading 

  }, 1000);

});

const btnSubmit = document.querySelector('#submit');
const inputs = document.querySelectorAll('.form input');

//Essa função vai realizar um loop em cada um dos inputs e verificar se o valor está preenchido
function checkInputs(inputs) {
  var filled = true;

  inputs.forEach(input => {
    //caso algum input esteja vazio, a variável filled, vai ser setada para false e retornada como false
    //daí o botão permanece desabilitado
    if (input.value === "") {
      filled = false;
    }
  });

  return filled;
}

inputs.forEach(function (input) {
  //cada tecla vez que alguma tecla for clicada, vai disparar essa função
  //que chama a função checkInputs, levando a lista de inputs como parâmetro, e verificando se ele é vazio
  input.addEventListener("keyup", () => {
    //usei o operador ternário porque achei mais intuitivo 
    //se a função retornar true, o botão é habilitado, caso contrário, não
    checkInputs(inputs) ? btnSubmit.disabled = false : btnSubmit.disabled = true;
  });
});


//show password
const inputPass = document.querySelector('#pass');
const btnShowPass = document.querySelector('.pass-content button');

function showPass() {
  inputPass.type == 'password' ? 
  inputPass.setAttribute('type', 'text') : inputPass.setAttribute('type', 'password');
}

inputPass.addEventListener('keyup', () => {
  inputPass.value != 0 ?
    btnShowPass.disabled = false : btnShowPass.disabled = true;
})