I am trying to build a custom form, which serves both as login and register form (let's forget the "why?"). Now usually we could simply use the {{ user:login_form }} tag to create to form. But I try to trigger the form by the click on the input.
Everything works with a custom
<
form> and submitting via AJAX to the action URL "/!/User/login". BUT: I would like to receive a e.g. JSON-reposonse to evaluate, wether that login was successful or not. As a response I currently receive the html of the redirected page after login/failed login. Can I somehow receive a success or failure response?
My Form:
<form class="login_form" id="login_form">
<input type="hidden" name="_token" value="{{ csrf_token }}">
<label for="Login_Email" class="text-block40">eMail Adresse</label>
<label for="Login_Passwort" class="text-block40">Passwort</label>
<input type="email" class="textfield40 spaceleft w-input" value="{{ old:email }}" maxlength="256" name="username" data-name="Login_Email" id="Login_Email" required="">
<input type="password" class="textfield40 w-input" value="{{ old:password }}" maxlength="256" name="password" data-name="Login_Passwort" id="Login_Passwort" required="">
<div class="sternchentext">Passwort vergessen? <a href="#" class="link">Hier klicken.</a></div>
<div class="button-wrapper">
<input type="submit" value="Einloggen" class="button_white absenden_button spaceleft w-button">
<input type="submit" value="Registrieren" class="button_white absenden_button w-button">
</div>
</form>
My AJAX call:
$(document).on('click', '#login_form input[value=Einloggen]', function (event) {
event.preventDefault(); //prevent default action
var post_url = "/!/User/login"; //get form action url
var request_method = "POST"; //get form GET/POST method
var form_data = $("#login_form").serialize(); //Encode form elements for submission
$.ajax({
url : post_url,
type: request_method,
data : form_data,
success: function(data){
console.log(data)
}
});
});