chg: usr: replace Google ReCaptcha with Cap instance #13

assets/js/cap.js

@@ -0,0 +1,88 @@
+/**
+ * This file is part of the SplendidBear Websites' projects.
+ *
+ * Copyright (c) 2026 @ www.splendidbear.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import 'cap-widget';
+
+const FORMS_SELECTOR = '.auth-form';
+const SUBMIT_SELECTOR = 'button[type="submit"], input[type="submit"]';
+
+const createInvisibleCap = apiEndpoint => {
+  const host = document.createElement('cap-widget');
+  host.style.display = 'none';
+
+  const cap = new window.Cap({ apiEndpoint }, host);
+
+  return { cap, host };
+};
+
+const lockSubmit = (form, locked) => {
+  const submit = form.querySelector(SUBMIT_SELECTOR);
+  if (!submit) return;
+  submit.disabled = locked;
+};
+
+const bindInvisibleCap = (form, apiEndpoint) => {
+  const { cap, host } = createInvisibleCap(apiEndpoint);
+  form.appendChild(host);
+
+  let solving = null;
+
+  const solveToken = async () => {
+    if (!solving) {
+      solving = cap.solve()
+        .finally(() => {
+          solving = null;
+        });
+    }
+
+    const result = await solving;
+    return result?.token ?? cap.token ?? '';
+  };
+
+  lockSubmit(form, true);
+
+  solveToken()
+    .catch(() => '')
+    .finally(() => lockSubmit(form, false));
+
+  form.addEventListener('submit', async e => {
+    if (cap.token) {
+      return;
+    }
+
+    e.preventDefault();
+    lockSubmit(form, true);
+
+    try {
+      const token = await solveToken();
+      if (!token) {
+        lockSubmit(form, false);
+        return;
+      }
+      form.requestSubmit();
+    } catch (_) {
+      lockSubmit(form, false);
+    }
+  });
+};
+
+const initInvisibleCap = () => {
+  const endpointSource =
+    document.querySelector('[data-cap-api-endpoint]') ||
+    document.getElementById('mine-wrapper');
+  const apiEndpoint = endpointSource?.dataset.capApiEndpoint;
+
+  if (!apiEndpoint || typeof window.Cap !== 'function') {
+    return;
+  }
+
+  document.querySelectorAll(FORMS_SELECTOR).forEach(form => bindInvisibleCap(form, apiEndpoint));
+};
+
+initInvisibleCap();

assets/js/components/ContactForm.jsx

@@ -7,83 +7,6 @@
  * file that was distributed with this source code.
  */
 
-import { useEffect, useRef } from 'react';
-import { string } from 'prop-types';
+const ContactForm = () => null;
 
-/**
- * ContactForm Component
- *
- * Handles reCAPTCHA v3 integration for the contact form.
- * Intercepts form submission, executes reCAPTCHA, and submits the form with the token.
- *
- * @param {string} siteKey - Google reCAPTCHA site key
- * @param {string} recaptchaFieldId - ID of the hidden recaptcha input field
- */
-const ContactForm = ({ siteKey, recaptchaFieldId }) => {
-  const formRef = useRef(null);
-  const isSubmittingRef = useRef(false);
-
-  useEffect(() => {
-    const form = document.querySelector('.auth-form');
-
-    if (!form) {
-      console.warn('ContactForm: No .auth-form found');
-      return;
-    }
-
-    formRef.current = form;
-
-    const handleSubmit = e => {
-      e.preventDefault();
-
-      if (isSubmittingRef.current) {
-        return;
-      }
-
-      isSubmittingRef.current = true;
-
-      if ('undefined' !== typeof grecaptcha) {
-        grecaptcha.ready(() => {
-          grecaptcha
-            .execute(siteKey, { action: 'contact' })
-            .then(token => {
-              const recaptchaField = document.getElementById(recaptchaFieldId);
-
-              if (recaptchaField) {
-                recaptchaField.value = token;
-              } else {
-                console.error(`ContactForm: Recaptcha field with ID "${recaptchaFieldId}" not found`);
-              }
-
-              isSubmittingRef.current = false;
-              form.submit();
-            })
-            .catch(error => {
-              console.error('ContactForm: reCAPTCHA execution failed', error);
-              isSubmittingRef.current = false;
-            });
-        });
-      } else {
-        console.error('ContactForm: grecaptcha is not loaded');
-        isSubmittingRef.current = false;
-      }
-    };
-
-    form.addEventListener('submit', handleSubmit);
-
-    return () => {
-      if (formRef.current) {
-        formRef.current.removeEventListener('submit', handleSubmit);
-      }
-    };
-  }, [siteKey, recaptchaFieldId]);
-
-  return null;
-};
-
-ContactForm.propTypes = {
-  siteKey: string.isRequired,
-  recaptchaFieldId: string.isRequired,
-};
-
-export default ContactForm;
+export default ContactForm;

assets/js/mine-seeker/components/CaptchaOverlay.jsx

@@ -7,17 +7,16 @@
  * file that was distributed with this source code.
  */
 
-import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import 'cap-widget';
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { func, node, string } from 'prop-types';
 
 const CAPTCHA_STORAGE_KEY = 'mineseeker_captcha_verified';
 const CAPTCHA_TOKEN_KEY = 'mineseeker_captcha_token';
-const RECAPTCHA_ACTION = 'mineseeker_play';
 
-const CaptchaOverlay = ({ siteKey, onVerified, children }) => {
+const CaptchaOverlay = ({ apiEndpoint, onVerified, children }) => {
   const [verified, setVerified] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(false);
+  const capRef = useRef(null);
 
   const handleToken = useCallback(token => {
     const wrapper = document.getElementById('mine-wrapper');
@@ -30,15 +29,9 @@ const CaptchaOverlay = ({ siteKey, onVerified, children }) => {
     onVerified?.();
   }, [onVerified]);
 
-  const buttonClasses = useMemo(() => [
-    'captcha-button',
-    error && 'captcha-button--error',
-    loading && 'captcha-button--loading',
-  ].filter(Boolean).join(' '), [error, loading]);
-
   useEffect(() => {
     const storedToken = sessionStorage.getItem(CAPTCHA_TOKEN_KEY);
-    const storedTime = sessionStorage.getItem(CAPTCHA_STORAGE_KEY);
+    const storedTime  = sessionStorage.getItem(CAPTCHA_STORAGE_KEY);
 
     if (storedToken && storedTime) {
       const elapsed = (Date.now() - parseInt(storedTime)) / 1000;
@@ -52,40 +45,42 @@ const CaptchaOverlay = ({ siteKey, onVerified, children }) => {
         return;
       }
     }
+  }, [onVerified]);
 
-    if (window.grecaptcha) {
-      window.grecaptcha.ready(() => {
-        window.grecaptcha
-          .execute(siteKey, { action: RECAPTCHA_ACTION })
-          .then(token => {
-            handleToken(token);
-          })
-          .catch(() => {
-            setError(true);
-          });
-      });
-    }
-  }, [siteKey, onVerified, handleToken]);
+  useEffect(() => {
+    const widget = document.createElement('cap-widget');
+    widget.style.display = 'none';
+    capRef.current = widget;
+    document.body.appendChild(widget);
 
+    const cap = new window.Cap({ apiEndpoint }, widget);
+    let cancelled = false;
 
-  const handleClick = () => {
-    setLoading(true);
-    setError(false);
+    const run = async () => {
+      try {
+        const result = await cap.solve();
+        if (!cancelled && result?.token) {
+          handleToken(result.token);
+        }
+      } catch (_) {
+        if (!cancelled) {
+          setTimeout(() => {
+            if (!cancelled) {
+              run();
+            }
+          }, 1200);
+        }
+      }
+    };
 
-    window.grecaptcha.ready(() => {
-      window.grecaptcha
-        .execute(siteKey, { action: RECAPTCHA_ACTION })
-        .then(token => {
-          handleToken(token);
-          setLoading(false);
-        })
-        .catch(() => {
-          setLoading(false);
-          setError(true);
-          setTimeout(() => setError(false), 2000);
-        });
-    });
-  };
+    run();
+
+    return () => {
+      cancelled = true;
+      widget.remove();
+      capRef.current = null;
+    };
+  }, [handleToken]);
 
   if (verified) {
     return <Fragment>{children}</Fragment>;
@@ -99,16 +94,8 @@ const CaptchaOverlay = ({ siteKey, onVerified, children }) => {
         </div>
         <h1 className="captcha-title">Ready to Play?</h1>
         <p className="captcha-description">
-          Click below to verify you&apos;re human and start playing.
+          Verifying your session...
         </p>
-        <button
-          className={buttonClasses}
-          onClick={handleClick}
-          disabled={loading}
-        >
-          <i className={`fa ${loading ? 'fa-spinner fa-spin' : error ? 'fa-exclamation-circle' : 'fa-play'}`} />
-          {loading ? 'Verifying...' : error ? 'Try Again' : 'Start Playing'}
-        </button>
       </div>
     </div>
   );
@@ -117,7 +104,7 @@ const CaptchaOverlay = ({ siteKey, onVerified, children }) => {
 export default CaptchaOverlay;
 
 CaptchaOverlay.propTypes = {
-  siteKey:    string.isRequired,
-  onVerified: func,
-  children:   node,
+  apiEndpoint: string.isRequired,
+  onVerified:  func,
+  children:    node,
 };

assets/js/mine-seeker/components/GameBoard.jsx

@@ -19,7 +19,7 @@ export const GameBoard = ({ gameAssoc, gameInherited, opponentName = '', isEnvDe
   const { onClick, resign } = useServerCommunication(gameAssoc, gameInherited, opponentName, isEnvDev);
   const [captchaVerified, setCaptchaVerified] = useState(false);
 
-  const siteKey = document.getElementById('mine-wrapper')?.dataset.recaptchaSiteKey;
+  const apiEndpoint = document.getElementById('mine-wrapper')?.dataset.capApiEndpoint;
 
   if (!gridReady) {
     return (
@@ -29,9 +29,9 @@ export const GameBoard = ({ gameAssoc, gameInherited, opponentName = '', isEnvDe
     );
   }
 
-  if (!captchaVerified && siteKey) {
+  if (!captchaVerified && apiEndpoint) {
     return (
-      <CaptchaOverlay siteKey={siteKey} onVerified={() => setCaptchaVerified(true)} />
+      <CaptchaOverlay apiEndpoint={apiEndpoint} onVerified={() => setCaptchaVerified(true)} />
     );
   }