How to validate the login without redirecting the page?

4

I have the following login form in a dropdown, my question is, how to do login validation without redirecting the page?

Currently when the user informs a wrong password it is redirected to the login page and informs the error message.

 <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Login</b> <span class="caret"></span></a>
    <ul id="login-dp" class="dropdown-menu">
    <li>
        <div class="row">
        <div class="col-md-12">
            Login via
            <div class="social-buttons">
            <a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a>
            <a href="#" class="btn btn-tw"><i class="fa fa-twitter"></i> Twitter</a>
            </div>
            or
            <form class="form" role="form" method="POST" action="{{ url('/login') }}" action="login" accept-charset="UTF-8" id="login-nav">
            {!! csrf_field() !!}
            <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                <input type="email" class="form-control" name="email" id="exampleInputEmail2" placeholder="Email address" required value="{{ old('email') }}">
                @if ($errors->has('email'))
                <span class="help-block">
                    <strong>{{ $errors->first('email') }}</strong>
                </span>
                @endif
            </div>


            <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                <input type="password" class="form-control" name="password" id="exampleInputPassword2" placeholder="Password" required>
                @if ($errors->has('password'))
                <span class="help-block">
                    <strong>{{ $errors->first('password') }}</strong>
                </span>
                @endif
                <div class="help-block text-right"><a href="{{ url('/password/reset') }}">Forget the password ?</a></div>
            </div>

            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-block">
                <i class="fa fa-btn fa-sign-in"></i>Login
                </button>
            </div>
            {{-- <div class="checkbox">
                <label>
                <input type="checkbox"> keep me logged-in
                </label>
            </div> --}}
            </form>
        </div>
        <div class="bottom text-center">
            Novo por aqui ? <a href="{{ url('/register') }}"><b>Registre-se</b></a>
        </div>
        </div>
    </li>
    </ul>
</li>
    
asked by anonymous 11.03.2016 / 23:35

1 answer

2

Come on. I think the best solution in your case to not redirect the page if there is an authentication error is to use ajax, because I understand you're using a dropdown.

You can make your form send the information in the login form as follows:

$('#login-nav').submit(function (e)
{
    e.preventDefault();

    $.ajax({

        url: '/auth/login-ajax',

        success: function (response)
        {
            if (! response.isLogged)
            {
                // ação quando login é inválido

                return;
            }

            // Ação para quando o cara logar
        }
    })
})

Create method in AuthController to check ajax login:

public function postLoginAjax(Request $request)
{
    $isLogged = auth()->attempt([
        'email'    => $request->get('email'),
        'password' => $request->get('senha')
    ]);        


    return response()->json(['isLogged' => $isLogged]);
}

Do not forget to register the method in routes.php

Route::post('/auth/login-ajax', ['uses' => 'Auth\AuthController@postLoginAjax']);
    
13.03.2016 / 01:14