<div class="login-box">
  <div class="login-header">
    <h1>Witaj ponownie</h1>
    <p>Zaloguj się do swojego konta</p>
  </div>
  <div class="alert login"></div>
  <form method="POST" class="login-form">
    <div class="form-group">
      <label for="email">Email</label>
      <div class="input-with-icon">
        <i class="fa-solid fa-envelope"></i>
        <input type="text" class="form-control" name="email" id="email" placeholder="Wpisz adres email" autofocus>
      </div>
      <p class="form-error hide">Uzupełnij adres email.</p>
    </div>
    <div class="form-group">
      <label for="password">Hasło</label>
      <div class="input-with-icon">
        <i class="fa-solid fa-lock"></i>
        <input type="password" class="form-control" id="password" name="password" placeholder="Wpisz hasło">
      </div>
      <p class="form-error hide">Uzupełnij hasło.</p>
    </div>
    <div class="form-group checkbox-group">
      <label class="checkbox-label">
        <input type="checkbox" id="remember" name="remember">
        <span>Zapamiętaj mnie</span>
      </label>
    </div>
    <button type="button" class="btn btn-primary btn-login">
      <span>Zaloguj się</span>
      <i class="fa-solid fa-arrow-right"></i>
    </button>
  </form>
</div>
<script type="text/javascript">
  $(function() {
    $('body').on('keypress', '.login-form input', function(e) {
      if (e.which === 13)
        submit_login_form();
    });

    $('body').on('click', '.btn-login', function() {
      submit_login_form();
    });

    function submit_login_form() {
      var email = $('#email').val();
      if ($.trim(email) === '') {
        $('#email').parents('.form-group').find('.form-error').removeClass('hide');
        $('#email').focus();
        return false;
      } else
        $('#email').parents('.form-group').find('.form-error').addClass('hide');

      var password = $('#password').val();
      if ($.trim(password) === '') {
        $('#password').parents('.form-group').find('.form-error').removeClass('hide');
        $('#password').focus();
        return false;
      } else
        $('#password').parents('.form-group').find('.form-error').addClass('hide');

      $.ajax({
        type: 'POST',
        cache: false,
        url: '/users/login/',
        data: {
          email: email,
          password: password,
          remember: $('#remember').is(':checked')
        },
        beforeSend: function() {
          $('.btn-login').html('<i class="fa-solid fa-spinner fa-spin"></i> Logowanie...').addClass('disabled');
        },
        success: function(response) {
          $('.btn-login').html('<span>Zaloguj się</span> <i class="fa-solid fa-arrow-right"></i>').removeClass('disabled');

          data = jQuery.parseJSON(response);
          $('.alert.login').html(data.msg);

          if (data.result === 'false')
            $('.alert.login').removeClass('alert-success').addClass('alert-danger').show();
          else {
            $('.alert.login').removeClass('alert-danger').addClass('alert-success').show();
            document.location.href = '/';
          }
        }
      });
      return false;
    }
  });
</script>
