Add new captcha: cloudflare turnstile (#22369)

Added a new captcha(cloudflare turnstile) and its corresponding
document. Cloudflare turnstile official instructions are here:
https://developers.cloudflare.com/turnstile

Signed-off-by: ByLCY <bylcy@bylcy.dev>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: Jason Song <i@wolfogre.com>

4 files changed, 63 insertions, 22 deletions

diff --git a/web_src/js/features/captcha.js b/web_src/js/features/captcha.js
new file mode 100644
index 0000000000..3da5dbda41
--- /dev/null
+++ b/web_src/js/features/captcha.js
@@ -0,0 +1,51 @@
+import {isDarkTheme} from '../utils.js';
+
+export async function initCaptcha() {
+  const captchaEl = document.querySelector('#captcha');
+  if (!captchaEl) return;
+
+  const siteKey = captchaEl.getAttribute('data-sitekey');
+  const isDark = isDarkTheme();
+
+  const params = {
+    sitekey: siteKey,
+    theme: isDark ? 'dark' : 'light'
+  };
+
+  switch (captchaEl.getAttribute('data-captcha-type')) {
+    case 'g-recaptcha': {
+      if (window.grecaptcha) {
+        window.grecaptcha.ready(() => {
+          window.grecaptcha.render(captchaEl, params);
+        });
+      }
+      break;
+    }
+    case 'cf-turnstile': {
+      if (window.turnstile) {
+        window.turnstile.render(captchaEl, params);
+      }
+      break;
+    }
+    case 'h-captcha': {
+      if (window.hcaptcha) {
+        window.hcaptcha.render(captchaEl, params);
+      }
+      break;
+    }
+    case 'm-captcha': {
+      const {default: mCaptcha} = await import(/* webpackChunkName: "mcaptcha-vanilla-glue" */'@mcaptcha/vanilla-glue');
+      mCaptcha.INPUT_NAME = 'm-captcha-response';
+      const instanceURL = captchaEl.getAttribute('data-instance-url');
+
+      mCaptcha.default({
+        siteKey: {
+          instanceUrl: new URL(instanceURL),
+          key: siteKey,
+        }
+      });
+      break;
+    }
+    default:
+  }
+}
diff --git a/web_src/js/features/mcaptcha.js b/web_src/js/features/mcaptcha.js
deleted file mode 100644
index 725e2e28ac..0000000000
--- a/web_src/js/features/mcaptcha.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export async function initMcaptcha() {
-  const mCaptchaEl = document.querySelector('.m-captcha');
-  if (!mCaptchaEl) return;
-
-  const {default: mCaptcha} = await import(/* webpackChunkName: "mcaptcha-vanilla-glue" */'@mcaptcha/vanilla-glue');
-  mCaptcha.INPUT_NAME = 'm-captcha-response';
-  const siteKey = mCaptchaEl.getAttribute('data-sitekey');
-  const instanceURL = mCaptchaEl.getAttribute('data-instance-url');
-
-  mCaptcha.default({
-    siteKey: {
-      instanceUrl: new URL(instanceURL),
-      key: siteKey,
-    }
-  });
-}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 14483f3fa2..74d80776b5 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -88,8 +88,8 @@ import {initCommonOrganization} from './features/common-organization.js';
 import {initRepoWikiForm} from './features/repo-wiki.js';
 import {initRepoCommentForm, initRepository} from './features/repo-legacy.js';
 import {initFormattingReplacements} from './features/formatting.js';
-import {initMcaptcha} from './features/mcaptcha.js';
 import {initCopyContent} from './features/copycontent.js';
+import {initCaptcha} from './features/captcha.js';
 import {initRepositoryActionView} from './components/RepoActionView.vue';
 
 // Run time-critical code as soon as possible. This is safe to do because this
@@ -191,7 +191,7 @@ $(document).ready(() => {
   initRepositoryActionView();
 
   initCommitStatuses();
-  initMcaptcha();
+  initCaptcha();
 
   initUserAuthLinkAccountView();
   initUserAuthOauth2();
diff --git a/web_src/less/_form.less b/web_src/less/_form.less
index 3d2ec9fb8a..1a1c1678f8 100644
--- a/web_src/less/_form.less
+++ b/web_src/less/_form.less
@@ -220,18 +220,24 @@ textarea:focus,
 }
 
 @media @mediaMdAndUp {
-  .g-recaptcha,
-  .h-captcha {
+  .g-recaptcha-style,
+  .h-captcha-style {
     margin: 0 auto !important;
     width: 304px;
     padding-left: 30px;
+
+    iframe {
+      border-radius: 5px !important;
+      width: 302px !important;
+      height: 76px !important;
+    }
   }
 }
 
 @media (max-height: 575px) {
   #rc-imageselect,
-  .g-recaptcha,
-  .h-captcha {
+  .g-recaptcha-style,
+  .h-captcha-style {
     transform: scale(.77);
     transform-origin: 0 0;
   }