I’am created custom AJAX login form
When url of site is http://example.com and I am logged, its ok
but when I try to go into the admin panel, I redirect to the login page, and the url of the site is something like this http://example.com/wp
and IF I reload page, I am logout
This my login code php
<?php
namespace App;
class auth
{
public function __construct()
{
add_action('wp_ajax_am_login', [$this, 'loginAm']);
add_action('wp_ajax_nopriv_am_login', [$this, 'loginAm']);
}
public function loginAm()
{
check_ajax_referer( 'ajax-login-nonce', 'am_auth');
$info = array();
$info['user_login'] = $_POST['login'];
$info['user_password'] = $_POST['password'];
$info['remember'] = isset($_POST['login-remember']) ? true : false;
$user_signon = wp_signon( $info, true );
if ( is_wp_error( $user_signon) ) {
echo json_encode(
array(
'status' => false,
'message' => pll__('Wrong username or password')
)
);
die();
}
echo json_encode(
array(
'status' => true,
'message' => pll__('Login successful, redirecting...')
)
);
die();
}
}
new auth();
HTML form
<form id="amLogin" action="#" method="post" data-url="{{ admin_url('admin-ajax.php') }}">
<p class="status" data-message="status"></p>
<div class="field-group clearable">
<span class="clean-form-field-am"></span>
<input type="text" name="login" id="loginInput" class="form-field-am" placeholder="{{ pll__('Login') }}">
<label class="form-label-am" for="loginInput">{{ pll__('Login') }}</label>
</div>
<div class="field-group password-group">
<span class="visible-pass-am"></span>
<input type="password" name="password" id="passwordInput" class="form-field-am password-field-am"
placeholder="{{ pll__('Password') }}">
<label class="form-label-am password-label" for="passwordInput">{{ pll__('Password') }}</label>
</div>
<div class="remember-block">
<div id="forgotPassBtn">{{ pll__('Forgot your password?') }}</div>
<div class="checkbox-wrap-am">
<input type="checkbox" id="loginRemember" class="styled-checkbox-am" name="login-remember" checked>
<label for="loginRemember">{{ pll__('Remember me') }}</label>
</div>
</div>
<div class="field-group">
<input id="loginSubmit" type="submit" class="btn-am btn-am--black form-btn-am" value="{{ pll__('Login') }}">
</div>
<input type="hidden" name="action" value="am_login">
{!! wp_nonce_field( 'ajax-login-nonce', 'am_auth', false, false ) !!}
</form>
JS file
document.addEventListener('DOMContentLoaded', function () {
const authForm = document.getElementById('amLogin'),
status = authForm.querySelector('[data-message="status"]');
authForm.addEventListener('submit', e => {
e.preventDefault();
resetMessages();
let data = {
name: authForm.querySelector('[name="login"]').value,
password: authForm.querySelector('[name="password"]').value,
nonce: authForm.querySelector('[name="am_auth"]').value,
};
if (!data.name || !data.password) {
status.style.display = 'block';
status.innerHTML = 'Missing Fields';
status.classList.add('error');
return;
}
let url = authForm.dataset.url;
let params = new URLSearchParams(new FormData(authForm));
document.getElementById('loginSubmit').value = 'Logging in...';
document.getElementById('loginSubmit').disabled = true;
fetch(url, {
method: 'POST',
body: params,
}).then(res => res.json())
.catch(error => {
resetMessages();
console.log(error);
})
.then(response => {
resetMessages();
if (response === 0 || !response.status) {
status.style.display = 'block';
status.innerHTML = response.message;
status.classList.add('error');
return;
}
status.style.display = 'block';
status.innerHTML = response.message;
status.classList.add('success');
authForm.reset();
window.location.reload();
})
});
function resetMessages() {
status.style.display = 'none';
status.innerHTML = '';
status.classList.remove('success', 'error');
document.getElementById('loginSubmit').value = 'Login';
document.getElementById('loginSubmit').disabled = false;
}
});