I Found the Solution Finally Myself. here you are 🙂
.
inside Fuctions.php
function karnetacom_scripts(){
wp_enqueue_script('ajax-forms-js',get_template_directory_uri().'/logreg/ajax-for-forms.js',array('jquery'),false,true);
wp_localize_script('ajax-forms-js','data',array(
'ajax_url' => admin_url('admin-ajax.php'),
'redirecturlajax' => site_url(),
));
}
add_action('wp_enqueue_scripts','karnetacom_scripts');
// ajax login form
include get_template_directory() . '/logreg/ajax-login-form-function.php';
login form as a template page
<?php /* Template Name: login-form-ajax */ ?>
<?php get_header(); ?>
<div class="usereditprofile">
<?php if ( is_user_logged_in() ) { ?>
<div class="singlepagecontent wwarningparent">
<div class="singlewarning">
<div class="singlewarningicon">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="singlewarningtext">
you are logged in!!!
</div>
</div>
</div>
<?php } else { ?>
<div id="sh-ajax-login-wrapper" class="sh-ajax-login-wrapper">
<div class="ajax-login-message error" style="display: none;"></div>
<form action="<?php echo get_permalink(); ?>" name="sh-ajax-login-form" id="sh-ajax-login-form" method="post">
<input type="text" name="usernameloginajax" id="usernameloginajax" placeholder="username or email" required>
<input type="password" name="passwordloginajax" id="passwordloginajax" placeholder="password" required>
<input type="checkbox" name="rememberme" id="rememberme">
<label for="rememberme">remmeber me</label>
<input type="hidden" name="recaptcha_response" id="recaptchaResponse">
<input type="submit" id="sh-ajax-login-submit" value="login">
<?php wp_nonce_field('ajax-login-form-nonce','security'); ?>
</form>
</div>
<script async src="https://www.google.com/recaptcha/api.js?render=[SITE_KEY]"></script>
<?php } ?>
</div>
<?php get_footer(); ?>
in ajax-for-forms.js
jQuery(document).ready(function ($) {
$('#sh-ajax-login-form').on('submit',function(event){
event.preventDefault();
var $this = $(this);
var $username = $this.find('#usernameloginajax').val();
var $password = $this.find('#passwordloginajax').val();
var $security = $this.find('#security').val();
var $remember = $this.find('#rememberme').prop('checked');
var $message = $('.ajax-login-message');
$message.slideUp(300);
if( $username === "" || $password === "" ){
$message.html('<p>please fill all fields...</p>').slideDown(300);
return false;
} else {
$message.html('<p>sending...</p>').slideDown(300);
}
grecaptcha.ready(function () {
grecaptcha.execute('[site key]', { action: 'ajax_login_form' }).then(function (token) {
var recaptchaResponse = document.getElementById('recaptchaResponse');
recaptchaResponse.value = token;
// Make the Ajax call here
$.ajax({
url:data.ajax_url,
type:'post',
dataType:'json',
data : {
action:'sh_ajax_login_form',
username: $username,
password: $password,
remember: $remember,
security: $security,
token: token,
},
success:function(response){
if( response.error ){
$message.html('<p>'+response.message+'</p>').slideDown(300);
}
if( response.success ){
$message.removeClass('error').addClass('success').html('<p>'+response.message+'</p>').slideDown(300);
//window.location.href="http://7learn.dev/profile";
//window.location.href = data.redirecturlajax;
}
},
error: function () {}
});
});
});
});
});
in ajax-login-form-function.php
<?php
add_action('wp_ajax_nopriv_sh_ajax_login_form','sh_ajax_login_form');
function sh_ajax_login_form(){
check_ajax_referer('ajax-login-form-nonce','security',true);
$username = sanitize_text_field($_POST['username']);
$password = sanitize_text_field($_POST['password']);
$rememberme = isset($_POST['rememberme']);
if( empty($username) || empty($password) ){
$result = array(
'error' => true,
'message' => 'please fill all fields!!!'
);
wp_send_json($result);
} else {
// Build POST request to get the reCAPTCHA v3 score from Google
$recaptcha_url="https://www.google.com/recaptcha/api/siteverify";
$recaptcha_secret="[secret key]";
//$recaptcha_response = $_POST['recaptcha_response'];
$recaptcha_response = sanitize_text_field($_POST['token']);
// Make and decode POST request
$recaptcha = file_get_contents($recaptcha_url . '?secret=" . $recaptcha_secret . "&response=" . $recaptcha_response);
$recaptcha = json_decode($recaptcha);
//if ($recaptcha->success == true && $recaptcha->action == "contact') {
if ($recaptcha->success == true && $recaptcha->score >= 0.5 && $recaptcha->action == 'ajax_login_form') {
//captacha validated successfully.
$creds = array(
'user_login' => $username,
'user_password' => $password,
'rememember' => $rememberme
);
$login_user = wp_signon($creds,false);
if( is_wp_error($login_user)){
$result = array(
'error' => true,
'message' => 'email or username is incorrect.'
);
wp_send_json($result);
}
$result = array(
'success' => true,
'message' => 'you logged in successfully.'
);
wp_send_json($result);
} else {
//echo "Robot verification failed, please try again.";
$result = array(
'error' => true,
'message' => 'Something went wrong. Please try again later'
);
wp_send_json($result);
};
};
}
God Bless You 🙂