InvisibleRecaptchaType: fix recaptcha setup and keep everything possible in one place (#1435)

Author: glaubinix

Diff for: templates/forms.html.twig

@@ -39,13 +39,7 @@
 
 {% block invisible_recaptcha_widget -%}
     {% if requires_recaptcha() %}
-        <div
-            id='recaptcha'
-            class="g-recaptcha"
-            data-sitekey="{{ recaptcha_site_key }}"
-            data-size="invisible"
-        ></div>
-
-        <script nonce="{{ csp_nonce('script') }}" src="https://www.google.com/recaptcha/api.js" async defer></script>
+        {# @see layout.html.twig for onloadRecaptchaCallback #}
+        <script nonce="{{ csp_nonce('script') }}" src="https://www.google.com/recaptcha/api.js?render=explicit&amp;onload=onloadRecaptchaCallback" async defer></script>
     {% endif %}
 {%- endblock %}

Diff for: templates/layout.html.twig

@@ -24,31 +24,33 @@
 
         {% if requiresRecaptcha|default(false) or (not app.user and requires_recaptcha()) %}
             <script nonce="{{ csp_nonce('script') }}" src="https://www.google.com/recaptcha/api.js?render=explicit&amp;onload=onloadRecaptchaCallback" async defer></script>
-
-            <script nonce="{{ csp_nonce('script') }}">
-                var onloadRecaptchaCallback = function() {
-                    const forms = [
-                        {submit: '_submit', form: 'page_login'},
-                        {submit: '_request_password_submit', form: 'request_password'},
-                        {submit: '_register_submit', form: 'register_form'},
-                        {submit: '_submit_mini', form: 'nav_login'},
-                        {submit: '_reset_password_submit', form: 'reset_password'},
-                    ];
-
-                    forms.forEach(({submit, form}) => {
-                        if (document.getElementById(submit)) {
-                            grecaptcha.render(submit, {
-                                'sitekey' : '{{ recaptcha_site_key }}',
-                                'callback' : function (token) {
-                                    document.getElementById(form).submit();
-                                }
-                            });
-                        }
-                    });
-                };
-            </script>
         {% endif %}
 
+        <script nonce="{{ csp_nonce('script') }}">
+            var onloadRecaptchaCallback = function() {
+                const forms = [
+                    {submit: '_submit', form: 'page_login'},
+                    {submit: '_request_password_submit', form: 'request_password'},
+                    {submit: '_register_submit', form: 'register_form'},
+                    {submit: '_submit_mini', form: 'nav_login'},
+                    {submit: '_reset_password_submit', form: 'reset_password'},
+                    {submit: '_change_password_submit', form: 'change_password'},
+                    {submit: '_edit_profile_submit', form: 'edit_profile'},
+                ];
+
+                forms.forEach(({submit, form}) => {
+                    if (document.getElementById(submit)) {
+                        grecaptcha.render(submit, {
+                            'sitekey' : '{{ recaptcha_site_key }}',
+                            'callback' : function (token) {
+                                document.getElementById(form).submit();
+                            }
+                        });
+                    }
+                });
+            };
+        </script>
+
         {% block head_additions %}{% endblock %}
     </head>
 

Diff for: templates/user/change_password.html.twig

@@ -1,7 +1,7 @@
 {% extends "user/layout.html.twig" %}
 
 {% block user_content %}
-    {{ form_start(form, { 'action': path('change_password'), 'attr': { 'class': 'change_password col-md-6' } }) }}
+    {{ form_start(form, { 'action': path('change_password'), 'attr': { 'class': 'change_password col-md-6', 'id': 'change_password' } }) }}
         {{ form_errors(form) }}
 
         <div class="form-group clearfix">
@@ -24,6 +24,6 @@
 
         {{ form_widget(form) }}
 
-        <input type="submit" class="btn btn-block btn-inverse btn-lg" value="Change password" />
+        <input type="submit" class="btn btn-block btn-inverse btn-lg" value="Change password" id="_change_password_submit" />
     {{ form_end(form) }}
 {% endblock user_content %}

Diff for: templates/user/edit.html.twig

@@ -1,7 +1,7 @@
 {% extends "user/layout.html.twig" %}
 
 {% block user_content %}
-    {{ form_start(form, { 'action': path('edit_profile'), 'attr': { 'class': 'edit_profile col-md-6' } }) }}
+    {{ form_start(form, { 'action': path('edit_profile'), 'attr': { 'class': 'edit_profile col-md-6', 'id': 'edit_profile' } }) }}
         {{ form_errors(form) }}
 
         <div class="form-group clearfix">
@@ -43,7 +43,7 @@
 
         {{ form_rest(form) }}
 
-        <input type="submit" class="btn btn-block btn-success btn-lg" value="Update" />
+        <input type="submit" class="btn btn-block btn-success btn-lg" value="Update" id="_edit_profile_submit" />
 
         <hr>