В моем первом проекте Laravel 6 я написал простую форму входа, которую я отправляю через AJAX на стандартный контроллер входа. Если я введу правильные учетные данные, вход в систему будет успешным, но я не знаю, как правильно перенаправить на стандартную панель пользователя (как стандартная форма Laravel 6 после успешного входа в систему). И я не знаю, как правильно управлять неудачным входом в систему (неверные учетные данные), потому что я получаю ошибку «Необработанный объект» (состояние 422).
Форма HTML и jQuery проверка:
<style>
.invalid-tooltip {
font-size: 0.8rem;
line-height: 1.1;
background-color: #d9364fef;
}
</style>
<form id="inlineLoginForm" method="POST" action="{{ route('login') }}">
@csrf
<div class="form-row align-items-center">
<div class="col-auto">
<label class="sr-only" for="email">{{ __('E-mail') }}</label>
<input type="email" class="form-control" id="email" name="email" value="{{ old('email') }}" placeholder="E-mail" autocomplete="email" autofocus>
<div class="invalid-tooltip" role="alert"></div>
</div>
<div class="col-auto">
<label class="sr-only" for="password">{{ __('Password') }}</label>
<input type="password" class="form-control input-password" id="password" name="password" placeholder="Password" autocomplete="current-password">
<span class="password-icon" aria-hidden="true">
<svg class="password-icon-visible icon icon-sm"><use xlink:href="/svg/sprite.svg#it-password-visible"></use></svg>
<svg class="password-icon-invisible icon icon-sm d-none"><use xlink:href="/svg/sprite.svg#it-password-invisible"></use></svg>
</span>
<div class="invalid-tooltip" role="alert"></div>
</div>
<div class="col-auto">
<div class="form-check m-0">
<input class="form-check-input" type="checkbox" id="remember" name="remember">
<label class="form-check-label" for="remember">
{{ __('Ricordami') }}
</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">{{ __('Accedi') }}</button>
</div>
</div>
</form>
@section('scripts')
<script>
$(document).ready(function() {
$('#inlineLoginForm').validate({
rules: {
email: {
required: true,
email: true
},
password: {
required: true
}
},
messages: {
email: {
required: "{{ __('Per favore inserisci il tuo indirizzo e-mail.') }}",
email: "{{ __('Per favore inserisci un indirizzo e-mail valido.') }}"
},
password: {
required: "{{ __('Per favore inserisci la password.') }}"
}
},
submitHandler: function(form) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
}
});
$.ajax({
type: "post",
url: "{{ route('login') }}",
data: $(form).serialize(),
success: function (response) {
console.log(response.errors.length);
location.reload({{ url('home') }});
},
error: function(data, textStatus, jqXHR) {
alert(textStatus + ': ' + jqXHR + ' (' + data + ')');
}
});
}
});
});
</script>
@endsection
РЕДАКТИРОВАТЬ (рабочий раствор по запросу):
<form class="user" id="loginInlineForm" method="post" action="{{ route('login') }}">
<div class="form-row align-items-center">
<div class="col-auto">
<label class="sr-only" for="email">{{ __('E-mail') }}</label>
<div class="input-group mb-2">
<input type="email" class="form-control form-control-user" id="email" name="email" placeholder="{{ __('E-mail') }}" autocomplete="email" autofocus>
<div class="invalid-tooltip order-last"></div>
<div class="input-group-append">
<div class="input-group-text"><i class="fas fa-at"></i></div>
</div>
</div>
</div>
<div class="col-auto">
<div class="input-group mb-2">
<input type="password" class="form-control form-control-user viewable-password" id="password" name="password" aria-label="User's password" placeholder="{{ __('Password') }}" autocomplete="current-password">
<div class="invalid-tooltip order-last"></div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" data-toggle="tooltip" data-placement="top" title="{{ __('Mostra/nascondi password') }}"><i class="far fa-eye"></i></button>
</div>
</div>
</div>
<div class="col-auto">
<div class="custom-control custom-checkbox mb-2">
<input type="checkbox" class="custom-control-input" id="remember" name="remember">
<label class="custom-control-label" for="remember">{{ __('Ricordami') }}</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary btn-user ml-3 mb-2">{{ __('Accedi') }}</button>
</div>
</div>
</form>
@section('scripts')
<script>
$(document).ready(function() {
$('#loginInlineForm').validate({
rules: {
email: {
required: true,
email: true
},
password: {
required: true
}
},
messages: {
email: {
required: "{{ __('Per favore inserisci il tuo indirizzo e-mail.') }}",
email: "{{ __('Per favore inserisci un indirizzo e-mail valido.') }}"
},
password: {
required: "{{ __('Per favore inserisci la password.') }}"
}
},
submitHandler: function(form) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
}
});
$.ajax({
type: "post",
url: "{{ route('login') }}",
data: $(form).serialize(),
success: function () {
location.href = '{{ route('home') }}';
},
error: function (error) {
if (error.status === 422) {
let $alert = $('<div class="alert alert-warning alert-dismissible fade show" role="alert">\n' +
' <strong>{{ __('Accesso fallito!') }}</strong> {{ __('Non è stato trovato alcun utente con le credenziali specificate.') }}\n' +
' <button type="button" class="close" data-dismiss="alert" aria-label="Close">\n' +
' <span aria-hidden="true">×</span>\n' +
' </button>\n' +
' </div>');
$('#loginFailureAlertContainer').prepend($alert);
setTimeout(function() {
$alert.alert('close');
}, 6000);
}
}
});
}
});
});
</script>
@endsection