Ajax Colorbox Login Form

kunalthool

replied 8 years ago

Provide controller code as well.

0

rifui

replied 8 years ago

My postLogin() method:


    public function postLogin(Request $request)
    {
        $this->validate($request, [
            $this->loginUsername() => 'required', 'password' => 'required',
        ]);

        // If the class is using the ThrottlesLogins trait, we can automatically throttle
        // the login attempts for this application. We'll key this by the username and
        // the IP address of the client making these requests into this application.
        $throttles = $this->isUsingThrottlesLoginsTrait();

        if ($throttles && $this->hasTooManyLoginAttempts($request)) {
            return $this->sendLockoutResponse($request);
        }

        $credentials = $this->getCredentials($request);

        if (Auth::attempt($credentials, $request->has('remember'))) {
            return $this->handleUserWasAuthenticated($request, $throttles);
        }

        // If the login attempt was unsuccessful we will increment the number of attempts
        // to login and redirect the user back to the login form. Of course, when this
        // user surpasses their maximum number of attempts they will get locked out.
        if ($throttles) {
            $this->incrementLoginAttempts($request);
        }

        return redirect($this->loginPath())
            ->withInput($request->only($this->loginUsername(), 'remember'))
            ->withErrors([
                $this->loginUsername() => $this->getFailedLoginMessage(),
            ]);
    }

0

rifui

replied 8 years ago

I created an entirely fresh project, created the appropriate routes and setup my case as bare minimum as possible. Used CDNs for the the libraries I'm using. Changed absolutely nothing except for .env to hook up the database. This is my test case:

welcome.blade.php

<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>

        <link href="//fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">

        <script src="https://code.jquery.com/jquery-2.1.4.js";></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.2/j...;></script>

        </style>

        <script>

        $(document).ready(function(){

          $(".btn-user-login").colorbox({
            onClosed: function() {
              parent.location.reload(true);
            }
          });

        });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="content">
                <div class="title">Laravel 5</div>

                <ul class="nav nav-pills ">
                  <li role="presentation" class="active"><a class="btn-user-login" href="/auth/login"><strong>Log in here</strong> to join the action!</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

login.blade.php

<script src="https://code.jquery.com/jquery-2.1.4.js";></script>


<script>
  $(document).ready(function(){

    $("#login_form").submit(function(e){

      e.preventDefault();

      var form = $("#login_form");

      $.ajax({
          url     : form.attr("action"),
          type    : form.attr("method"),
          data    : form.serialize(),
          success : function ( json )
          {
              console.log("success");
          },
          error   : function ( jqXhr, json, errorThrown )
          {
            var errors = jqXhr.responseJSON;
            console.log(errors);
          }
      })


    });
  });
</script>

<div class="container">
    <div class="content">
        <div class="title">Laravel 5</div>

        <div id="login">
        <div class="text-center">

          <form id="login_form" method="POST" action="/auth/login">
            {!! csrf_field() !!}

              <div class="page-header">
                <h1>Account</h1>
              </div>

              <div class="form-group">
                  <input type="email" class="form-control" id="cemail" name="email" placeholder="Email" value="{{ old('email') }}">
              </div>
              <div class="form-group">
                  <input type="password" class="form-control" id="cpassword" name="password" placeholder="Password">
              </div>

              <div class="form-group">
                <button id="submit" type="submit" class="btn btn-primary btn-block">Login</button>

                <a class="btn-register btn btn-primary btn-block" href="/auth/register">Register</a>
              </div>

              <div id="form-errors">
              </div>
          </form>

        <div style="clear:both"></div>
        </div>
        </div>

    </div>
</div>

Surely someone knows where I've gone wrong here? I've been stuck on this for almost a week now. I'm at the begging stage D:

0

rifui

replied 8 years ago

bump..

0

Moderators