Question :
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>
Answer :
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' => 'AuthAuthController@postLoginAjax']);