$(document).ready(function() {
console.log("%cWelcome 🫡", "font-size: 20px; font-weight: bold;");

function shakeElement(selector) {
  const element = $(selector);
  const originalLeft = element.css('left');
  element.css('position', 'relative')
    .animate({ left: '+=5px' }, 50)
    .animate({ left: '-=10px' }, 50)
    .animate({ left: '+=10px' }, 50)
    .animate({ left: '-=10px' }, 50)
    .animate({ left: '+=5px' }, 50, function() {
    element.css('left', originalLeft);
    });
  navigator.vibrate(200); }



function signIn(element) {
var username = $('#username').val().trim();
var password = $('#password').val();

if (
password !== "" && username !== "" &&  
password !== "password" && username !== "username") {
  console.log("All fields are valid.");
  $('#button_login').html('');
  $('#button_login').html('<div class="loader_dots"></div>');

  var formData = new FormData( $(element).closest('form')[0] );

  request = $.ajax({
    url: "/services/signin",
    type: "POST",
    processData: false, 
    contentType: false,
    data: formData
  });

  request.done(function (response, textStatus, jqXHR) {
    console.log("Attempting signin...");
    console.log(response);

    if (response === "Granted") {
      console.log("Granted. Proceeding...");
      window.location.href = "/";
    } else { 
      shakeElement(document.querySelector("#form_login"));
      $('#button_login').html('Sign-in');
      console.log("Failed signin.");
    }
  });

  request.fail(function (jqXHR, textStatus, errorThrown) { 
    shakeElement(document.querySelector("#form_login"));
    $('#button_login').html('Sign-in');
    console.log("Error posting to authentication service.");
  }); 

  } else{
    console.log("Invalid fields.");
    shakeElement(document.querySelector("#form_login"));
    $('#button_login').html('Sign-in');
  }



}


$("#button_login").click(function() { 
  signIn(this);
});

$('#form_login input').on('keypress', function(e) {
  if (e.key === "Enter" || e.which === 13) {
    e.preventDefault();
    signIn(this);
  }
});


});