signup: add reCAPTCHA

can be enabled in settings > captcha, requires a site key & secret key
from google. New wiki article explains getting these. currently a little
ugly looking on the page itself, hopefully fixable.

html/form-base.html

@@ -27,10 +27,23 @@
     window.matrixRequired = {{ .matrixRequired }};
     window.matrixUserID = "{{ .matrixUser }}";
     window.captcha = {{ .captcha }};
+    window.reCAPTCHA = {{ .reCAPTCHA }};
+    window.reCAPTCHASiteKey = "{{ .reCAPTCHASiteKey }}";
 </script>
 {{ if .passwordReset }}
 <script src="js/pwr.js" type="module"></script>
 {{ else }}
 <script src="js/form.js" type="module"></script>
+{{ if .reCAPTCHA }}
+<script>
+    var reCAPTCHACallback = () => {
+        const el = document.getElementsByClassName("g-recaptcha")[0];
+        grecaptcha.render(el, {
+            "sitekey": window.reCAPTCHASiteKey
+        });
+    }
+</script>
+<script src="https://www.google.com/recaptcha/api.js?onload=reCAPTCHACallback&render=explicit" async defer></script>
+{{ end }}
 {{ end }}
 {{ end }}

html/form.html

@@ -180,9 +180,11 @@
                         </div>
                         {{ if .captcha }}
                         <div class="card ~neutral @low mb-4">
-                            <span class="label supra mb-2">CAPTCHA <span id="captcha-regen" title="{{ .strings.refresh }}" class="badge lg @low ~info ml-2 float-right"><i class="ri-refresh-line"></i></span><span id="captcha-success" class="badge lg @low ~critical ml-2 float-right"><i class="ri-close-line"></i></span></span>
-                            <div id="captcha-img" class="mt-2 mb-2"></div>
+                            <span class="label supra mb-2">CAPTCHA {{ if not .reCAPTCHA }}<span id="captcha-regen" title="{{ .strings.refresh }}" class="badge lg @low ~info ml-2 float-right"><i class="ri-refresh-line"></i></span>{{ end }}<span id="captcha-success" class="badge lg @low ~critical ml-2 float-right"><i class="ri-close-line"></i></span></span>
+                            <div id="captcha-img" class="mt-2 mb-2 {{ if .reCAPTCHA }}g-recaptcha{{ end }}"></div>
+                            {{ if not .reCAPTCHA }}
                             <input class="field ~neutral @low" id="captcha-input" class="mt-2" placeholder="CAPTCHA">
+                            {{ end }}
                         </div>
                         {{ end }}
                         {{ if .contactMessage }}