Laravel timeout on auth login

Question

Laravel 5.3 - My goal is to send login form via ajax to login controller (AuthenticatesUsers trait), and to get a response (json would be ok), so i could set timeout before redirect to "dashboard" section (authenticated). I need that timeout for some frontend stuff. So could it be done? If it could, hint would suffice. Thanks in advance.

Javascript example:

$("#login-form").submit(function (e) {

var url = "/login"; // the script where you handle the form input.

$.ajax({
    type: "POST",
    cache : false,
    url: url,
    data: $("#login-form").serialize(), // serializes the form's elements.
    success: function () 
    {       //Do the timeout part, then redirect
            topbar.addClass('success');
            form.addClass('goAway');
            article.addClass('active');
            tries = 0;

    },
    error: function () {
        location.reload(); 
        input.addClass('disabled');
        topbar.addClass('error');
    }

});});

Login form is sent via post, and i would like to do a redirect by myself, not via controller, and my main concern is the csrf token on javascript redirect would change.

edit: Another thing that I discovered is including token inside ajax setup:

$.ajaxSetup({
    headers: {'X-CSRF-TOKEN': _token}
});

and prevent form default action:

$("#login-form").submit(function (e) {
        e.preventDefault();

Here's my login form (all js and css is included in parent view):

@extends('layouts.app')

@section('content')

<form class="form form-horizontal" id="login-form" role="form" method="POST" action="{{ url('/login') }}">
    {{ csrf_field() }}
    <div class="forceColor"></div>
    <div id="logosm_wrapper">
        <img id="logosm_login" src="img/ipism_100x50.png" alt="logo" >
    </div>
    <div class="forceColor"></div>
    @if (count($errors))
    <div class="topbar error">
    @else
    <div class="topbar">
    @endif
        <div class="spanColor"></div>
        <input id="email" type="email" class="input form-control" name="email"  placeholder="E-mail" value="{{ old('email') }}">
    </div>
    @if (count($errors))
    <div class="topbar error">
    @else
        <div class="topbar">
    @endif
        <div class="spanColor"></div>
        <input id="password" type="password" class="input form-control" name="password" placeholder="Password"/>
    </div>
    <button class="submit" id="submit">Login</button>
    <!--input class="submit" id="submit" type="submit"  value="Login"-->
</form>
@endsection

This is working as intended by Laravel Auth, my intention was to green out input fields on authorisation via JS, and then redirect user to dashboard...

Answer 1

I suggest u add this in your ajax:

$.ajax({
  ....    
  async     : false,
 ....