[IMP] google_recaptcha, *: integrate recaptchaV3

* = base_setup, website_form, website_sale, website_crm,
crm_iap_lead_website, website_hr_recruitment, website_mass_mailing

Integrate reCaptchaV3 on website_form submit and website_mass_mailing
subscription.
You can now use ReCaptchaV3 to add reCaptcha verification in any module
using google_recaptcha.

Also added a better error management on the form with custom messages.

task-2217980

closes odoo/odoo#48466

Related: odoo/enterprise#9649
Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>

2 files changed, 74 insertions, 9 deletions

diff --git a/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js b/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js
index 79e4bb4b6cb..167cd17e9d8 100644
--- a/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js
+++ b/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js
@@ -6,6 +6,8 @@ var rpc = require('web.rpc');
 var WysiwygMultizone = require('web_editor.wysiwyg.multizone');
 var options = require('web_editor.snippets.options');
 var wUtils = require('website.utils');
+
+const qweb = core.qweb;
 var _t = core._t;
 
 
@@ -63,6 +65,39 @@ options.registry.mailing_list_subscribe = options.Class.extend({
     },
 });
 
+options.registry.recaptchaSubscribe = options.Class.extend({
+    xmlDependencies: ['/google_recaptcha/static/src/xml/recaptcha.xml'],
+
+    /**
+     * Toggle the recaptcha legal terms
+     */
+    toggleRecaptchaLegal: function (previewMode, value, params) {
+        const recaptchaLegalEl = this.$target[0].querySelector('.o_recaptcha_legal_terms');
+        if (recaptchaLegalEl) {
+            recaptchaLegalEl.remove();
+        } else {
+            const template = document.createElement('template');
+            template.innerHTML = qweb.render("google_recaptcha.recaptcha_legal_terms");
+            this.$target[0].appendChild(template.content.firstElementChild);
+        }
+    },
+
+    //----------------------------------------------------------------------
+    // Private
+    //----------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _computeWidgetState: function (methodName, params) {
+        switch (methodName) {
+            case 'toggleRecaptchaLegal':
+                return !this.$target[0].querySelector('.o_recaptcha_legal_terms') || '';
+        }
+        return this._super(...arguments);
+    },
+});
+
 options.registry.newsletter_popup = options.registry.mailing_list_subscribe.extend({
     popup_template_id: "editor_new_mailing_list_subscribe_popup",
     popup_title: _t("Add a Newsletter Subscribe Popup"),
diff --git a/addons/website_mass_mailing/static/src/js/website_mass_mailing.js b/addons/website_mass_mailing/static/src/js/website_mass_mailing.js
index 1ea942ddc76..2212a707038 100644
--- a/addons/website_mass_mailing/static/src/js/website_mass_mailing.js
+++ b/addons/website_mass_mailing/static/src/js/website_mass_mailing.js
@@ -6,6 +6,7 @@ var core = require('web.core');
 var Dialog = require('web.Dialog');
 var utils = require('web.utils');
 var publicWidget = require('web.public.widget');
+const {ReCaptcha} = require('google_recaptcha.ReCaptchaV3');
 
 var _t = core._t;
 
@@ -17,6 +18,20 @@ publicWidget.registry.subscribe = publicWidget.Widget.extend({
     },
 
     /**
+     * @constructor
+     */
+    init: function () {
+        this._super(...arguments);
+        this._recaptcha = new ReCaptcha();
+    },
+    /**
+     * @override
+     */
+    willStart: function () {
+        this._recaptcha.loadLibs();
+        return this._super(...arguments);
+    },
+    /**
      * @override
      */
     start: function () {
@@ -50,7 +65,9 @@ publicWidget.registry.subscribe = publicWidget.Widget.extend({
      * @override
      */
     destroy: function () {
-        this.$target.addClass('d-none');
+        if (!this.editableMode) {
+            this.$target.addClass('d-none');
+        }
         this._super.apply(this, arguments);
     },
 
@@ -61,7 +78,7 @@ publicWidget.registry.subscribe = publicWidget.Widget.extend({
     /**
      * @private
      */
-    _onSubscribeClick: function () {
+    _onSubscribeClick: async function () {
         var self = this;
         var $email = this.$(".js_subscribe_email:visible");
 
@@ -70,22 +87,35 @@ publicWidget.registry.subscribe = publicWidget.Widget.extend({
             return false;
         }
         this.$target.removeClass('o_has_error').find('.form-control').removeClass('is-invalid');
+        const tokenObj = await this._recaptcha.getToken('website_form');
+        if (tokenObj.error) {
+            self.displayNotification({
+                type: 'danger',
+                title: _t("Error"),
+                message: tokenObj.error,
+                sticky: true,
+            });
+            return false;
+        }
         this._rpc({
             route: '/website_mass_mailing/subscribe',
             params: {
                 'list_id': this.$target.data('list-id'),
                 'email': $email.length ? $email.val() : false,
+                recaptcha_token_response: tokenObj.token,
             },
         }).then(function (result) {
-            self.$(".js_subscribe_btn").addClass('d-none');
-            self.$(".js_subscribed_btn").removeClass('d-none');
-            self.$('input.js_subscribe_email').prop('disabled', !!result);
-            if (self.$popup.length) {
-                self.$popup.modal('hide');
+            if (result.type === 'success') {
+                self.$(".js_subscribe_btn").addClass('d-none');
+                self.$(".js_subscribed_btn").removeClass('d-none');
+                self.$('input.js_subscribe_email').prop('disabled', !!result);
+                if (self.$popup.length) {
+                    self.$popup.modal('hide');
+                }
             }
             self.displayNotification({
-                type: 'success',
-                title: _t("Success"),
+                type: result.toast_type,
+                title: _t(`${result.toast_type === 'success' ? 'Success' : 'Error'}`),
                 message: result.toast_content,
                 sticky: true,
             });