refactor: handle cases when grecaptcha failed to load

Author: Miodec

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

@@ -6,6 +6,27 @@ const siteKey = envConfig.recaptchaSiteKey;
 
 const captchas: Record<string, number> = {};
 
+type Grecaptcha = {
+  render: (
+    element: HTMLElement,
+    options: { sitekey: string; callback?: (responseToken: string) => void }
+  ) => number;
+  reset: (widgetId: number) => void;
+  getResponse: (widgetId: number) => string;
+};
+
+function getGrecaptcha(): Grecaptcha {
+  if (!("grecaptcha" in window)) {
+    throw new Error("grecaptcha is not defined");
+  }
+
+  return window.grecaptcha as Grecaptcha;
+}
+
+export function isCaptchaAvailable(): boolean {
+  return "grecaptcha" in window;
+}
+
 export function render(
   element: HTMLElement,
   id: string,
@@ -14,32 +35,23 @@ export function render(
   if (captchas[id] !== undefined && captchas[id] !== null) {
     return;
   }
-
-  //@ts-expect-error 3rd party code, no types
-  const widgetId = grecaptcha.render(element, {
+  const widgetId = getGrecaptcha().render(element, {
     sitekey: siteKey,
     callback,
   });
-
-  captchas[id] = widgetId as number;
+  captchas[id] = widgetId;
 }
 
 export function reset(id: string): void {
   if (captchas[id] === undefined || captchas[id] === null) {
     return;
   }
-
-  //@ts-expect-error 3rd party code, no types
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-  grecaptcha.reset(captchas[id]);
+  getGrecaptcha().reset(captchas[id]);
 }
 
 export function getResponse(id: string): string {
   if (captchas[id] === undefined || captchas[id] === null) {
     return "";
   }
-
-  //@ts-expect-error 3rd party code, no types
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call
-  return grecaptcha.getResponse(captchas[id]);
+  return getGrecaptcha().getResponse(captchas[id]);
 }

frontend/src/ts/modals/forgot-password.ts

@@ -6,6 +6,14 @@ import * as Loader from "../elements/loader";
 import { z } from "zod";
 
 export function show(): void {
+  if (!CaptchaController.isCaptchaAvailable()) {
+    Notifications.add(
+      "Could not show forgot password popup: Captcha is not available. This could happen due to a blocked or failed network request. Please refresh the page or contact support if this issue persists.",
+      -1
+    );
+    return;
+  }
+
   void modal.show({
     mode: "dialog",
     focusFirstInput: true,

frontend/src/ts/modals/google-sign-up.ts

@@ -23,14 +23,27 @@ function show(credential: UserCredential): void {
     mode: "dialog",
     focusFirstInput: true,
     beforeAnimation: async () => {
+      signedInUser = credential;
+
+      if (!CaptchaController.isCaptchaAvailable()) {
+        Notifications.add(
+          "Could not show google sign up popup: Captcha is not avilable. This could happen due to a blocked or failed network request. Please refresh the page or contact support if this issue persists.",
+          -1
+        );
+        return;
+      }
       CaptchaController.reset("googleSignUpModal");
       CaptchaController.render(
         $("#googleSignUpModal .captcha")[0] as HTMLElement,
         "googleSignUpModal"
       );
       enableInput();
       disableButton();
-      signedInUser = credential;
+    },
+    afterAnimation: async () => {
+      if (!CaptchaController.isCaptchaAvailable()) {
+        void hide();
+      }
     },
   });
 }

frontend/src/ts/modals/quote-report.ts

@@ -24,6 +24,14 @@ export async function show(
   quoteId: number,
   showOptions?: ShowOptions
 ): Promise<void> {
+  if (!CaptchaController.isCaptchaAvailable()) {
+    Notifications.add(
+      "Could not show quote report popup: Captcha is not available. This could happen due to a blocked or failed network request. Please refresh the page or contact support if this issue persists.",
+      -1
+    );
+    return;
+  }
+
   void modal.show({
     mode: "dialog",
     ...showOptions,

frontend/src/ts/modals/quote-submit.ts

@@ -53,6 +53,14 @@ async function submitQuote(): Promise<void> {
 }
 
 export async function show(showOptions: ShowOptions): Promise<void> {
+  if (!CaptchaController.isCaptchaAvailable()) {
+    Notifications.add(
+      "Could not show quote submit popup: Captcha is not available. This could happen due to a blocked or failed network request. Please refresh the page or contact support if this issue persists.",
+      -1
+    );
+    return;
+  }
+
   void modal.show({
     ...showOptions,
     mode: "dialog",

frontend/src/ts/modals/register-captcha.ts

@@ -1,12 +1,22 @@
 import * as CaptchaController from "../controllers/captcha-controller";
 import AnimatedModal from "../utils/animated-modal";
 import { promiseWithResolvers } from "../utils/misc";
+import * as Notifications from "../elements/notifications";
 
 let { promise, resolve } = promiseWithResolvers<string | undefined>();
 
 export { promise };
 
 export async function show(): Promise<void> {
+  if (!CaptchaController.isCaptchaAvailable()) {
+    Notifications.add(
+      "Could not show register popup: Captcha is not available. This could happen due to a blocked or failed network request. Please refresh the page or contact support if this issue persists.",
+      -1
+    );
+    resolve(undefined);
+    return;
+  }
+
   await modal.show({
     mode: "dialog",
     beforeAnimation: async (modal) => {

frontend/src/ts/modals/user-report.ts

@@ -32,6 +32,14 @@ export async function show(options: ShowOptions): Promise<void> {
     return;
   }
 
+  if (!CaptchaController.isCaptchaAvailable()) {
+    Notifications.add(
+      "Could not show user report popup: Captcha is not available. This could happen due to a blocked or failed network request. Please refresh the page or contact support if this issue persists.",
+      -1
+    );
+    return;
+  }
+
   void modal.show({
     mode: "dialog",
     focusFirstInput: true,