I'm trying to add recaptcha to odoo signup page. The form gets submitted and the results are good but I get UncaughtPromiseError popup, before the page gets loaded agin.
This is my js code:
/** @odoo-module **/
import publicWidget from '@web/legacy/js/public/public_widget';
import {ReCaptcha} from "@google_recaptcha/js/recaptcha";
import dom from "@web/legacy/js/core/dom";
publicWidget.registry.SignUpForm = publicWidget.Widget.extend({
selector: '.oe_signup_form',
events: {
'submit': '_onSubmit',
},
init: function () {
this._super(...arguments);
this._recaptcha = new ReCaptcha();
},
_onSubmit: async function (ev) {
ev.preventDefault();
const $btn = this.$('.oe_login_buttons > button[type="submit"]');
$btn.addClass('disabled').attr('disabled', 'disabled');
$btn.prepend('<i class="fa fa-refresh fa-spin"/> ');
try {
await this._recaptcha.loadLibs();
const tokenObj = await this._recaptcha.getToken('signup')
const form = ev.target.closest('form');
if (tokenObj.token) {
const recaptchaToken = document.createElement('input');
recaptchaToken.type = 'hidden';
recaptchaToken.name = 'recaptcha_token_response';
recaptchaToken.value = tokenObj.token;
form.appendChild(recaptchaToken);
}
form.submit();
} catch (error) {
console.error('Error getting reCAPTCHA token:', error);
$btn.removeClass('disabled').removeAttr('disabled');
$btn.find('.fa-spin').remove();
// Optionally notify the user
alert('There was an error with reCAPTCHA. Please try again.');
}
},
});