[Resolved] Password reset page

[Author]

Posts

[nilsM]

Hey there,

I create a lost password page but if I try to request a new password. I get the following error:
"Error: Google reCAPTCHA verification failed. Do you have JavaScript enabled?"

I use the Simple Google reCAPTCHA Plugin on this page and the page is registered. I inserted the Site key and the secret key at the page of the plugin and in the settings of toolset at the category "forms->reCAPTCHA-API".

It´s about this page:
hidden link

It would be great if you could helping me with this issue.

Best
Nils

[Christian Cox]

Hello, can you confirm this is the RECAPTCHA plugin you are using?
https://wordpress.org/plugins/simple-google-recaptcha/

If this is the same plugin, I will try to set up a similar test to see if it is compatible with Toolset's reset password workflow. I did a quick search in the forums and cannot find any other tickets that mention this plugin specifically, so I'm not sure what to expect.

[nilsM]

Hallo Christian,

thanks for your fast reply. Yes, exactly, this is the plugin I use.

Best Nils

[Christian Cox]

Thanks, I was able to install the plugin and replicate the problem in my local test site. I'm not sure it is a Toolset-specific problem, or if the plugin is designed in a way that does not support third-party implementations of these forms. Based on this support ticket, it seems that the plugin does not support custom login forms, like the WooCommerce login form: https://wordpress.org/support/topic/forms-integration/
But based on another ticket, it seems that the plugin relies on actions and WordPress best practices:
https://wordpress.org/support/topic/support-for-different-login-urls/
I'm asking my 2nd tier team to take a closer look and see if we can do anything in Toolset to make the Forgot Password form more compatible with this reCAPTCHA plugin, or if the problem lies in the Simple Google reCAPTCHA plugin.

I will keep you posted here as I receive additional informaion.

[Christian Cox]

My 2nd tier support team did some investigation and found a possible workaround for the Forgot Password form. It requires adding a custom PHP snippet that injects the same code injected by the Simple Google reCAPTCHA plugin . You can add this code in a child theme's functions.php file. Or, you can create a new code snippet in Toolset > Settings > Custom Code, set the snippet to run everywhere, and activate the snippet.

/**
 * Forgot password form customisation
 * Toolset support reference: https://toolset.com/forums/topic/password-reset-page/
 */
add_filter( 'forgot_password_form_middle', 'ts_forgot_password_form_middle', 101, 1 );
function ts_forgot_password_form_middle( $middle ){
 
	$middle .= '<div class="sgr-main"></div>';
 
	// From Simple Google Recaptcha plugin
		$apiUrlBase = sprintf('<em><u>hidden link</u></em>', get_locale());
		$jsUrl = sprintf('%s&onload=sgr_2&render=explicit', $apiUrlBase);
		wp_enqueue_script('sgr_recaptcha', $jsUrl, [], time());
 
	return $middle;
}

Here is the technical analysis:

I looked into our code to see how the forgot password form is generated and checked what the plugin is doing, and because they have fundamentally different approaches to outputting the form content and recaptcha fields there isn’t a simple fix involving triggering the lostpassword_form action in the right place.

Because we implement the form via a shortcode, that means that we build the entirety of the form as a string, then the shortcode returns that string, which then outputs it (i.e. adds the markup to the page).

It *is* possible to intervene in the process of constructing that string to insert some additional content.

But the plugin uses the lostpassword_form hook to insert the markup required for the recaptcha field by *echoing* it, i.e. dropping it into the markup for the page at that very point, rather than returning it is a string which can be added to the string being constructed with the form markup.

So triggering that lostpassword_form hook to insert the recaptcha could only ever be done directly before the form is built, or after, never during.

I do have a solution, though, which uses a filter for the middle part of the form (before the submit button) to add the markup required by the plugin and enqueue the script needed, too.

This is specifically for the forgot password form, if you needed to get this working with other log in forms it would require variations on the same solution using different filters

[nilsM]

Hey Christian,

great, thanks a lot for the support and the php snippet. I created a new code snippet at the toolset > settings > custom code page.
The Code is working but I get another error message, now. "Google reCAPTCHA verification failed. The response parameter is invalid or malformed".

Attached you find a screenshot how I implemented the code.

It would be great if you and your team can look at this issue again.

Thanks a lot!

Nils

[Shane]

Hi Nils,

Christian is currently on vacation at the moment and wont be back until next monday. For now i will be covering his tickets.

Can you provide a little more information on this. Is it still with the forget password for that you're having this issue or is it a different component.

Please let me know.
Thanks,
Shane

[nilsM]

Hi Shane,

thanks for your reply. Yes, it is still the forget password page. I inserted the custom code your 2nd tier team provided and now I get a error message on the forget password page, see the attached file. The message means that the key is invalid and if I klick on the button for new password request, i get this error "Google reCAPTCHA verification failed. The response parameter is invalid or malformed."

You can try it here:
hidden link

Best Nils

[Shane]

Hi Nil,

I've spoken with the second tier supporter who looked at this and he mentioned that there isn't anything else that we can do here.

The plugin uses an action hook to insert the recaptcha, but the way our custom login forms are generated it is impossible to trigger the same action within the form.

The action can only be done before or after, neither of which helped. He looked deeper into the plugin's code to see if there was a workaround that does add the recaptcha but no solution was found.

I must apologize for not able to assist you with fully resolving this but there isn't anything else we can do on this one.

Thanks,
Shane