registering now requires a captcha

frontend/src/ts/controllers/account-controller.ts

@@ -17,6 +17,7 @@ import * as ResultFilters from "../account/result-filters";
 import * as PaceCaret from "../test/pace-caret";
 import * as TagController from "./tag-controller";
 import * as ResultTagsPopup from "../popups/result-tags-popup";
+import * as RegisterCaptchaPopup from "../popups/register-captcha-popup";
 import * as URLHandler from "../utils/url-handler";
 import * as Account from "../pages/account";
 import * as Alerts from "../elements/alerts";
@@ -491,6 +492,12 @@ export function signOut(): void {
 }
 
 async function signUp(): Promise<void> {
+  RegisterCaptchaPopup.show();
+  const captcha = await RegisterCaptchaPopup.promise;
+  if (!captcha) {
+    Notifications.add("Please complete the captcha", -1);
+    return;
+  }
   LoginPage.disableInputs();
   LoginPage.disableSignUpButton();
   LoginPage.showPreloader();
@@ -576,6 +583,7 @@ async function signUp(): Promise<void> {
 
     const signInResponse = await Ape.users.create(
       nname,
+      captcha,
       email,
       createdAuthUser.user.uid
     );

frontend/src/ts/popups/register-captcha-popup.ts

@@ -0,0 +1,53 @@
+import * as CaptchaController from "../controllers/captcha-controller";
+
+let resolvePromise: (data?: string) => void;
+
+export let promise: Promise<string | undefined> = new Promise((resolve) => {
+  resolvePromise = resolve;
+});
+
+export function show(): void {
+  if ($("#registerCaptchaPopupWrapper").hasClass("hidden")) {
+    promise = new Promise((resolve) => {
+      resolvePromise = resolve;
+    });
+    CaptchaController.reset("register");
+    CaptchaController.render(
+      $("#registerCaptchaPopup .g-recaptcha")[0],
+      "register",
+      (data) => {
+        resolvePromise(data);
+        hide();
+      }
+    );
+    $("#registerCaptchaPopupWrapper")
+      .stop(true, true)
+      .css("opacity", 0)
+      .removeClass("hidden")
+      .animate({ opacity: 1 }, 125);
+  }
+}
+
+export function hide(resolveToUndefined = false): void {
+  if (!$("#registerCaptchaPopupWrapper").hasClass("hidden")) {
+    if (resolveToUndefined) resolvePromise();
+    $("#registerCaptchaPopupWrapper")
+      .stop(true, true)
+      .css("opacity", 1)
+      .animate(
+        {
+          opacity: 0,
+        },
+        100,
+        () => {
+          $("#registerCaptchaPopupWrapper").addClass("hidden");
+        }
+      );
+  }
+}
+
+$("#registerCaptchaPopupWrapper").on("click", (e) => {
+  if ($(e.target).attr("id") === "registerCaptchaPopupWrapper") {
+    hide(true);
+  }
+});

frontend/static/html/popups.html

@@ -1,3 +1,9 @@
+<div id="registerCaptchaPopupWrapper" class="popupWrapper hidden">
+  <div id="registerCaptchaPopup">
+    <div class="g-recaptcha"></div>
+  </div>
+</div>
+
 <div id="alertsPopupWrapper" class="popupWrapper hidden">
   <div id="alertsPopup">
     <div class="button mobileClose">
@@ -522,6 +528,7 @@
     <div class="title">Account name</div>
     <div class="text">You need to choose a username before continuing</div>
     <input type="text" placeholder="username" />
+    <div class="captcha"></div>
     <div class="button disabled">Sign up</div>
   </div>
 </div>