const USERNAME_INPUT = document.getElementById("username");
const USERNAME_ICON_CANCEL = document.getElementById("icon-cancel__username");
const USERNAME_ICON_CHECK = document.getElementById("icon-check__username");
const USERNAME_INPUT_ERROR = document.getElementById("input-error__username");
const PASSWORD = document.getElementById("password");
const PASSWORD_ICON_CANCEL = document.getElementById("icon-cancel__password");
const PASSWORD_ICON_CHECK = document.getElementById("icon-check__password");
const PASSWORD_INPUT_ERROR = document.getElementById("input-error__password");

USERNAME_INPUT.addEventListener('input', validate_username);
PASSWORD.addEventListener('input', validate_password);

function validate_username(e){
  const USERNAME = e.target.value;
  var valid_username = /^[a-zA-Z0-9\_\-]{4,16}$/.test(USERNAME);
  if(valid_username){
    USERNAME_ICON_CHECK.style.display = "block";
    USERNAME_ICON_CANCEL.style.display = "none";
    USERNAME_INPUT_ERROR.style.display = "none";
  }
  if(!valid_username){
    USERNAME_ICON_CHECK.style.display = "none";
    USERNAME_ICON_CANCEL.style.display = "block";
    USERNAME_INPUT_ERROR.style.display = "block";
  }
}
function validate_password(e){
  const PASSWORD = e.target.value;
  var valid_password = /^.{4,12}$/.test(PASSWORD);
  if(valid_password){
    PASSWORD_ICON_CHECK.style.display = "block";
    PASSWORD_ICON_CANCEL.style.display = "none";
    PASSWORD_INPUT_ERROR.style.display = "none";
  }
  if(!valid_password){
    PASSWORD_ICON_CHECK.style.display = "none";
    PASSWORD_ICON_CANCEL.style.display = "block";
    PASSWORD_INPUT_ERROR.style.display = "block";
  }
}