<div class="box box-login">
  <div class="title"><span>crmPRO</span> | logowanie</div>
  <div class="alert login"></div>
  <div class="row">
    <div class="col-md-12">
      <form method="POST" class="login-form">
        <div class="input-group">
          <span class="input-group-addon">
            <i class="fa fa-user-circle-o"></i>
          </span>
          <div class="form-line">
            <input type="text" class="form-control" name="email" id="email" placeholder="Email" autofocus="" >
            <p class="form-error hide">Uzupełnij adres email.</p>
          </div>
        </div>
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-lock"></i></span>
          <div class="form-line">
            <input type="password" class="form-control" id="password" name="password" placeholder="Hasło" >
            <p class="form-error hide">Uzupełnij hasło.</p>
          </div>
        </div>
        <div class="input-group">
          <div class="form-line checkbox">
            <input type="checkbox" id="remeber" name="remeber">Zapamiętaj mnie
          </div>
        </div>
        <button type="button" class="btn btn-primary">Zaloguj się</button>
      </form>
    </div>
  </div>
</div>
<script type="text/javascript">
  $( function()
  {
    $( 'body' ).on( 'keypress', '.login-form input', function(e)
    {
      if ( e.which === 13 )
        submit_login_form();
    });

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

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

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

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

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

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