Google reCaptcha

core/Views/Account/AccountView.class.php

@@ -16,6 +16,16 @@ abstract class AccountView extends View {
     $this->icon = "image";
   }
 
+  public function loadView() {
+    parent::loadView();
+
+    $document = $this->getDocument();
+    $settings = $document->getUser()->getConfiguration()->getSettings();
+    if ($settings->isRecaptchaEnabled()) {
+      $document->getHead()->loadGoogleRecaptcha($settings->getRecaptchaSiteKey());
+    }
+  }
+
   public function getCode() {
     $html = parent::getCode();
 
@@ -38,6 +48,12 @@ abstract class AccountView extends View {
         </div>
       </div>";
 
+    $settings = $this->getDocument()->getUser()->getConfiguration()->getSettings();
+    if ($settings->isRecaptchaEnabled()) {
+      $siteKey = $settings->getRecaptchaSiteKey();
+      $html .= "<input type='hidden' value='$siteKey' id='siteKey' />";
+    }
+
     return $html;
   }
 

core/Views/Account/Register.class.php

@@ -14,16 +14,6 @@ class Register extends AccountView {
     $this->icon = "user-plus";
   }
 
-  public function loadView() {
-    parent::loadView();
-
-    $document = $this->getDocument();
-    $settings = $document->getUser()->getConfiguration()->getSettings();
-    if ($settings->isRecaptchaEnabled()) {
-      $document->getHead()->loadGoogleRecaptcha($settings->getRecaptchaSiteKey());
-    }
-  }
-
   public function getAccountContent() {
 
     $settings = $this->getDocument()->getUser()->getConfiguration()->getSettings();

js/account.js

@@ -11,6 +11,21 @@ $(document).ready(function () {
         $("#alertMessage").hide();
     }
 
+    function submitForm(btn, method, params, onSuccess) {
+        let textBefore = btn.text();
+        btn.prop("disabled", true);
+        btn.html("Submitting… <i class='fas fa-spin fa-spinner'></i>")
+        jsCore.apiCall(method, params, (res) => {
+            btn.prop("disabled", false);
+            btn.text(textBefore);
+            if (!res.success) {
+                showAlert("danger", res.msg);
+            } else {
+                onSuccess();
+            }
+        });
+    }
+
     // Login
     $("#btnLogin").click(function() {
         const username = $("#username").val();
@@ -44,27 +59,30 @@ $(document).ready(function () {
         let email = $("#email").val().trim();
         let password = $("#password").val();
         let confirmPassword = $("#confirmPassword").val();
+        let siteKey = $("#siteKey").val().trim();
 
         if (username === '' || email === '' || password === '' || confirmPassword === '') {
             showAlert("danger", "Please fill out every field.");
         } else if(password !== confirmPassword) {
             showAlert("danger", "Your passwords did not match.");
         } else {
-            let textBefore = btn.text();
             let params = { username: username, email: email, password: password, confirmPassword: confirmPassword };
-
+            if (typeof grecaptcha !== 'undefined') {
-            btn.prop("disabled", true);
+                grecaptcha.ready(function() {
-            btn.html("Submitting… <i class='fas fa-spin fa-spinner'></i>")
+                    grecaptcha.execute(siteKey, {action: 'register'}).then(function(captcha) {
-            jsCore.apiCall("user/register", params, (res) => {
+                        params["captcha"] = captcha;
-                btn.prop("disabled", false);
+                        submitForm(btn, "user/register", params, () => {
-                btn.text(textBefore);
+                            showAlert("success", "Account successfully created, check your emails.");
-                if (!res.success) {
+                            $("input").val("");
-                    showAlert("danger", res.msg);
+                        });
-                } else {
+                    });
+                });
+            } else {
+                submitForm(btn, "user/register", params, () => {
                     showAlert("success", "Account successfully created, check your emails.");
                     $("input").val("");
-                }
+                });
-            });
+            }
         }
     });
 
@@ -105,19 +123,23 @@ $(document).ready(function () {
         let btn = $(this);
         let email = $("#email").val();
 
-        let textBefore = btn.text();
+        let params = { email: email };
-        btn.prop("disabled", true);
+        if (typeof grecaptcha !== 'undefined') {
-        btn.html("Submitting… <i class='fas fa-spin fa-spinner'></i>")
+            grecaptcha.ready(function() {
-        jsCore.apiCall("user/requestPasswordReset", { email: email }, (res) => {
+                grecaptcha.execute(siteKey, {action: 'resetPassword'}).then(function(captcha) {
-            btn.prop("disabled", false);
+                    params["captcha"] = captcha;
-            btn.text(textBefore);
+                    submitForm(btn, "user/requestPasswordReset", params, () => {
-            if (!res.success) {
+                        showAlert("success", "If the e-mail address exists and is linked to a account, you will receive a password reset token.");
-                showAlert("danger", res.msg);
+                        $("input").val("");
-            } else {
+                    });
+                });
+            });
+        } else {
+            submitForm(btn, "user/requestPasswordReset", params, () => {
                 showAlert("success", "If the e-mail address exists and is linked to a account, you will receive a password reset token.");
                 $("input").val("");
-            }
+            });
-        });
+        }
     });
 
     $("#btnResetPassword").click(function (e) {