first commit

common/resources/client/recaptcha/use-recaptcha.ts

@@ -0,0 +1,54 @@
+import lazyLoader from '../utils/http/lazy-loader';
+import {useCallback, useEffect, useState} from 'react';
+import {apiClient} from '../http/query-client';
+import {RecaptchaAction} from '../core/settings/settings';
+import {toast} from '../ui/toast/toast';
+import {message} from '../i18n/message';
+import {useSettings} from '../core/settings/use-settings';
+
+export function useRecaptcha(action: RecaptchaAction) {
+  const {recaptcha: {site_key, enable} = {}} = useSettings();
+  const enabled = site_key && enable?.[action];
+
+  const [isVerifying, setIsVerifying] = useState(false);
+
+  useEffect(() => {
+    if (enabled) {
+      load(site_key);
+    }
+  }, [enabled, site_key]);
+
+  const verify = useCallback(async () => {
+    if (!enabled) return true;
+    setIsVerifying(true);
+    const isValid = await execute(site_key, action);
+    if (!isValid) {
+      toast.danger(message('Could not verify you are human.'));
+    }
+    setIsVerifying(false);
+    return isValid;
+  }, [enabled, site_key, action]);
+
+  return {verify, isVerifying};
+}
+
+async function execute(siteKey: string, action: string): Promise<boolean> {
+  await load(siteKey);
+  return new Promise(resolve => {
+    window.grecaptcha?.ready(async () => {
+      const token = await window.grecaptcha?.execute(siteKey, {action});
+      const result = apiClient
+        .post('recaptcha/verify', {token})
+        .then(r => r.data.success)
+        .catch(() => false);
+      resolve(result ?? false);
+    });
+  });
+}
+
+function load(siteKey: string) {
+  return lazyLoader.loadAsset(
+    `https://www.google.com/recaptcha/api.js?render=${siteKey}`,
+    {id: 'recaptcha-js'},
+  );
+}