feat(recaptcha): upgrade to v3

Author: themightychris

html-templates/contact/contact.tpl

@@ -7,6 +7,11 @@
 
     {if RemoteSystems\ReCaptcha::$siteKey}
         <script src='https://www.google.com/recaptcha/api.js'></script>
+        <script>
+            function onSubmit(token) {
+                document.getElementById('contact-form').submit();
+            }
+        </script>
     {/if}
 {/block}
 
@@ -20,7 +25,7 @@
 
             {contentBlock "contact-introduction"}
 
-            <form action="/contact" method="POST" class="contact-form">
+            <form action="/contact" method="POST" class="contact-form" id="contact-form">
                 {if $validationErrors}
                     <div class="alert alert-danger">
                         {_ "Please double-check the fields highlighted below."}
@@ -35,15 +40,17 @@
 
                 {textarea inputName=Message label=Message error=$validationErrors.Message required=true}
 
-                {if RemoteSystems\ReCaptcha::$siteKey}
-                    <div class="form-group g-recaptcha" data-sitekey="{RemoteSystems\ReCaptcha::$siteKey|escape}"></div>
-                {/if}
-
                 {if $validationErrors.ReCaptcha}
                     <p class="text-danger">{$validationErrors.ReCaptcha}</p>
                 {/if}
 
-                <button type="submit" class="btn btn-primary">{_ Send}</button>
+                {if RemoteSystems\ReCaptcha::$siteKey}
+                    <button type="submit" class="btn btn-primary g-recaptcha" data-sitekey="{RemoteSystems\ReCaptcha::$siteKey|escape}" data-callback='onSubmit' data-action='submit'>
+                {else}
+                    <button type="submit" class="btn btn-primary">
+                {/if}
+                    {_ "Send"}
+                </button>
             </form>
 
         </div>

html-templates/register/register.tpl

@@ -7,6 +7,11 @@
 
     {if RemoteSystems\ReCaptcha::$siteKey}
         <script src='https://www.google.com/recaptcha/api.js'></script>
+        <script>
+            function onSubmit(token) {
+                document.getElementById('register').submit();
+            }
+        </script>
     {/if}
 {/block}
 
@@ -65,12 +70,16 @@
                         <input type="password" class="form-control" id="PasswordConfirm" name="PasswordConfirm" value="{refill field=PasswordConfirm}">
                     </div>
 
-                    {if RemoteSystems\ReCaptcha::$siteKey}
-                        <div class="form-group g-recaptcha" data-sitekey="{RemoteSystems\ReCaptcha::$siteKey|escape}"></div>
-                    {/if}
-
                     <div class="form-group">
-                        <p><button type="submit" class="btn btn-primary">{_ "Create Account"}</button></p>
+                        <p>
+                            {if RemoteSystems\ReCaptcha::$siteKey}
+                                <button type="submit" class="btn btn-primary g-recaptcha" data-sitekey="{RemoteSystems\ReCaptcha::$siteKey|escape}" data-callback='onSubmit' data-action='submit'>
+                            {else}
+                                <button type="submit" class="btn btn-primary">
+                            {/if}
+                                {_ "Create Account"}
+                            </button>
+                        </p>
                         <p class="help-block">{_ "Already have an account?"} <a href="/login{tif $.request.return ? cat('?return=', escape($.request.return, url))}">{_ "Log in"}</a></p>
                     </div>
                 {/strip}