How to refresh HTML after AJAX post - ajax

Question

I have a site where guests can sign in via a modal form.
The solution I came up with is working but I feel like it's a dirty/insecure way to do it.
In the master layout, I load the partial view which contains the modal form.
when the user is authenticated I refresh the navbar to show the logged in username. That's the part where I'm kind of confused. Wouldn't it be possible to 'refresh' the navbar which is also a partial view.
login-modal.blade.php:
<div class="ui small modal" id="loginModal">
<div class="header">
Login
</div>
<div class="ui active dimmer" id="loader" style="display: none">
<div class="ui text loader">Loading</div>
</div>
<div class="content">
<div class="ui grid">
<div class="nine wide column centered">
{!! Form::open(array('route' => 'auth.login', 'method' => 'post','id'=>'formLogin','class' => 'ui large form')) !!}
<meta name="csrf_token" content="{{ csrf_token() }}"/>
<div class="field {!! $errors->has('password') ? 'error' : '' !!}">
<div class="ui left icon input">
<i class="user icon"></i>
{!! Form::text('username','',['name'=>'username','id'=>'username','class' => 'pd','placeholder'=>'Username']) !!}
</div>
{!! $errors->first('username', '<span class="ui text" id="" style="color: #bf4d4b">:message</span>') !!}
</div>
<div class="field {!! $errors->has('password') ? 'error' : '' !!}">
<div class="ui left icon input">
<i class="lock icon"></i>
{!! Form::password('password',['name'=>'password','id'=>'password','class' => '','placeholder'=>'Password']) !!}
</div>
{!! $errors->first('password', '<span class="ui text" id="" style="color: #bf4d4b">:message</span>') !!}
</div>
{!! Form::submit('Login',['id'=>'loginButton','class'=>'ui fluid large teal submit button']) !!}
<div class="ui error message"></div>
{!! Form::close() !!}
<div class="ui message">
No account? Sign Up
</div>
</div>
</div>
</div>
<div class="actions">
</div>
</div>
now the javascript in the same file:
<script>
$('#loginButton').click(function () {
$('#loginModal').modal(
{
blurring: true,
closable: true,
})
.modal('show');
});
$(document).ready(function () {
$('form#formLogin').submit(function (e) {
e.preventDefault();
$.ajax({
type: 'post',
timeout: 10000,
url: $('form#formLogin').attr('action'),
dataType: 'json',
data: $('form#formLogin').serialize(),
beforeSend: function (xhr) {
$('div#loader').show();
var token = $('meta[name="csrf_token"]').attr('content');
if (token) {
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
}
},
complete: function () {
$('div#loader').hide();
},
success: function (data) {
if (data.success == false) {
var errors = data.errors; $('#loginModal').find('div.field.error').removeClass("field error").addClass("field");
$('#loginModal').find('span').remove();
$.each(errors, function (field, errormsg) {
if (errormsg.length != 0) {
var currentField = $('#loginModal').find('#' + field);
var currentFieldSpan = $('#loginModal').find('#span' + field);
if (currentFieldSpan.length > 0) {
$('#loginModal').find('div.field.error').removeClass("field error").addClass("field");
$('#loginModal').find('span').remove();
}
currentField.closest("div.field").removeClass("field").addClass("field error");
$("<span class='ui text' id='span" + field + "' style='color: #bf4d4b'>" + errormsg + "</span>").insertAfter(currentField.closest("div.ui.left.icon.input"));
}
});
if ((typeof data.locked != 'undefined') && data.locked.status == true) {
//BIDOUILLE pour disable le button login//
function enableLoginButton() {
$('#loginModal').find('#loginButton').removeClass('disabled');
}
//disable login button
$('#loginModal').find('#loginButton').addClass('disabled');
//after lockout time enable the login button again
setTimeout(enableLoginButton, (data.locked.remainingtime * 1000));
}
}
else if (data.success == true) {//authentication was successful
var cnt = '<div class="ui simple dropdown item">' +
'<img class="logo" src="{{ asset('images/food.png') }}" style="margin-right: 1em">' +
data.user['username'] +
' <i class="dropdown icon"></i>' +
'<div class="menu">' +
'<a class="item" href="#">Link Item</a>' +
'<a class="item" href="#">Link Item</a>' +
'<div class="divider"></div>' +
'<div class="header">Header Item</div>' +
'<div class="item">' +
'<i class="dropdown icon"></i>' +
'Sub Menu' +
'<div class="menu">' +
'<a class="item" href="#">Link Item</a>' +
'<a class="item" href="#">Link Item</a>' +
'</div>' +
'</div>' +
'<a class="item" href="#">Link Item</a>' +
'</div>' +
'</div>'
//remove the signin button
$('#navbartop .right .item').remove();
//add the dropdown with username
$('#navbartop .right').append(cnt);
//dissmis modal
$('#loginModal').modal().modal('hide');
}
},
error: function (xhr) {
var validationerrors = xhr.responseJSON;
$('#loginModal').find('div.field.error').removeClass("field error").addClass("field");
$('#loginModal').find('span').remove();
$.each(validationerrors, function (field, errormsg) {
if (errormsg.length != 0) {
//select the field
var currentField = $('#loginModal').find('#' + field);
var currentFieldSpan = $('#loginModal').find('#span' + field);
if (currentFieldSpan.length > 0) {
$('#loginModal').find('div.field.error').removeClass("field error").addClass("field");
$('#loginModal').find('span').remove();
}
//apply 'field error' class to the closest div with 'field' class
currentField.closest("div.field").removeClass("field").addClass("field error");
//appends a span with red text and the validation error message
$("<span class='ui text' id='span" + field + "' style='color: #bf4d4b'>" + errormsg + "</span>").insertAfter(currentField.closest("div.ui.left.icon.input"));
}
});
}
});
return false;
});
});
</script>
AuthController.php:
protected function handleUserWasAuthenticated(Request $request, $throttles)
{
if ($throttles) {
$this->clearLoginAttempts($request);
}
if (method_exists($this, 'authenticated')) {
return $this->authenticated($request, Auth::guard($this->getGuard())->user());
}
//if user intended to access Logout() while not logged in, avoid instant redirect and logout
if (str_contains(redirect()->intended()->getTargetUrl(),'auth/logout')) {
return redirect()->route('home.index')->with('success', Auth::user()->username.' logged in successfully. ');
}
if($request->ajax())
{
return Response::json(['success' => true, 'errors' => '','user'=> Auth::user()]);
}
return redirect()->intended($this->redirectPath())->with('success', Auth::user()->username.' logged in successfully. ');
}
public function login(Request $request)
{
$this->validateLogin($request);
// If the class is using the ThrottlesLogins trait, we can automatically throttle
// the login attempts for this application. We'll key this by the username and
// the IP address of the client making these requests into this application.
$throttles = $this->isUsingThrottlesLoginsTrait();
if ($throttles && $lockedOut = $this->hasTooManyLoginAttempts($request)) {
$this->fireLockoutEvent($request);
return $this->sendLockoutResponse($request);
}
$credentials = $this->getCredentials($request);
if (Auth::guard($this->getGuard())->attempt($credentials, $request->has('remember'))) {
return $this->handleUserWasAuthenticated($request, $throttles);
}
// If the login attempt was unsuccessful we will increment the number of attempts
// to login and redirect the user back to the login form. Of course, when this
// user surpasses their maximum number of attempts they will get locked out.
if ($throttles && ! $lockedOut) {
$this->incrementLoginAttempts($request);
}
if($request->ajax())
{
return Response::json(['success' => false, 'errors' =>
[$this->loginUsername() => $this->getFailedLoginMessage()]
]);
}
return $this->sendFailedLoginResponse($request);
}
protected function sendLockoutResponse(Request $request)
{
$seconds = app(RateLimiter::class)->availableIn(
$this->getThrottleKey($request)
);
if($request->ajax()) {
return Response::json(['success' => false,
'errors' =>
[$this->loginUsername() => $this->getLockoutErrorMessage($seconds)],
'locked' =>
['status'=>true, 'remainingtime'=>$seconds]]);
}
return redirect()->back()
->withInput($request->only($this->loginUsername(), 'remember'))
->withErrors([
$this->loginUsername() => $this->getLockoutErrorMessage($seconds),
]);
}

Answer 1

I would wrap the navbar into a div like this:
<div id="ajax-nav">
<!-- Nav here -->
</div>
Then you can reload the navbar when your login response was successful:
$('#ajax-nav').load("some url that returns the html of the navbar");
Then you just need a route that leads to a Controller that can generate the navbar based on the user login state (logged in or guest).
With this procedure, you can completely replace the content of the navbar with a newly generated one after a specific event like your successful login or you could even set an interval to refresh the navbar - but that should not be needed in your case.

Answer 2

I guess you need to change this line:
'<img class="logo" src="{{ asset('images/food.png') }}" style="margin-right: 1em">'
For
'<img class="logo" src="{{ asset(\'images/food.png\') }}" style="margin-right: 1em">'
I hope it works ;)