Fix mCaptcha broken after Vite migration (#37492) (#37509)

package.json

@@ -25,7 +25,7 @@
     "@github/paste-markdown": "1.5.3",
     "@github/text-expander-element": "2.9.4",
     "@lezer/highlight": "1.2.3",
-    "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
+    "@mcaptcha/vanilla-glue": "0.1.0-rc2",
     "@mermaid-js/layout-elk": "0.2.1",
     "@primer/octicons": "19.23.1",
     "@replit/codemirror-indentation-markers": "6.5.3",

pnpm-lock.yaml

@@ -84,8 +84,8 @@ importers:
         specifier: 1.2.3
         version: 1.2.3
       '@mcaptcha/vanilla-glue':
-        specifier: 0.1.0-alpha-3
+        specifier: 0.1.0-rc2
-        version: 0.1.0-alpha-3
+        version: 0.1.0-rc2
       '@mermaid-js/layout-elk':
         specifier: 0.2.1
         version: 0.2.1(mermaid@11.14.0)
@@ -968,11 +968,11 @@ packages:
   '@marijn/find-cluster-break@1.0.2':
     resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
 
-  '@mcaptcha/core-glue@0.1.0-alpha-5':
+  '@mcaptcha/core-glue@0.1.0-rc1':
-    resolution: {integrity: sha512-16qWm5O5X0Y9LXULULaAks8Vf9FNlUUBcR5KDt49aWhFhG5++JzxNmCwQM9EJSHNU7y0U+FdyAWcGmjfKlkRLA==}
+    resolution: {integrity: sha512-P4SgUioJDR38QpnP9sPY72NyaYex8MXD6RbzrfKra+ngamT26XjqVZEHBiZU2RT7u0SsWhuko4N1ntNOghsgpg==}
 
-  '@mcaptcha/vanilla-glue@0.1.0-alpha-3':
+  '@mcaptcha/vanilla-glue@0.1.0-rc2':
-    resolution: {integrity: sha512-GT6TJBgmViGXcXiT5VOr+h/6iOnThSlZuCoOWncubyTZU9R3cgU5vWPkF7G6Ob6ee2CBe3yqBxxk24CFVGTVXw==}
+    resolution: {integrity: sha512-LDjn9lrKioJ3zwaQOfql7PXsnxCAHg7b1rPw7G0OxpvVE7xLB/a40SHfIIiocce2VS9TPI4MbcKm5pcuy8fU5g==}
 
   '@mermaid-js/layout-elk@0.2.1':
     resolution: {integrity: sha512-MX9jwhMyd5zDcFsYcl3duDUkKhjVRUCGEQrdCeNV5hCIR6+3FuDDbRbFmvVbAu15K1+juzsYGG+K8MDvCY1Amg==}
@@ -4809,11 +4809,11 @@ snapshots:
 
   '@marijn/find-cluster-break@1.0.2': {}
 
-  '@mcaptcha/core-glue@0.1.0-alpha-5': {}
+  '@mcaptcha/core-glue@0.1.0-rc1': {}
 
-  '@mcaptcha/vanilla-glue@0.1.0-alpha-3':
+  '@mcaptcha/vanilla-glue@0.1.0-rc2':
     dependencies:
-      '@mcaptcha/core-glue': 0.1.0-alpha-5
+      '@mcaptcha/core-glue': 0.1.0-rc1
 
   '@mermaid-js/layout-elk@0.2.1(mermaid@11.14.0)':
     dependencies:

routers/web/auth/auth.go

@@ -64,7 +64,7 @@ func prepareCommonAuthPageData(ctx *context.Context, opt CommonAuthOptions) {
 		ctx.Data["RecaptchaSitekey"] = setting.Service.RecaptchaSitekey
 		ctx.Data["HcaptchaSitekey"] = setting.Service.HcaptchaSitekey
 		ctx.Data["McaptchaSitekey"] = setting.Service.McaptchaSitekey
-		ctx.Data["McaptchaURL"] = setting.Service.McaptchaURL
+		ctx.Data["McaptchaURL"] = strings.TrimSuffix(setting.Service.McaptchaURL, "/")
 		ctx.Data["CfTurnstileSitekey"] = setting.Service.CfTurnstileSitekey
 		if setting.Service.CaptchaType == setting.ImageCaptcha {
 			ctx.Data["Captcha"] = context.GetImageCaptcha()

services/context/captcha.go

@@ -48,7 +48,7 @@ func GetImageCaptcha() *captcha.Captcha {
 const (
 	gRecaptchaResponseField  = "g-recaptcha-response"
 	hCaptchaResponseField    = "h-captcha-response"
-	mCaptchaResponseField    = "m-captcha-response"
+	mCaptchaResponseField    = "mcaptcha__token" // this form key is hard-coded in the mcaptcha frontend library
 	cfTurnstileResponseField = "cf-turnstile-response"
 )
 

templates/user/auth/captcha.tmpl

@@ -19,7 +19,10 @@
 {{else if eq .CaptchaType "mcaptcha"}}
 	<div class="inline field tw-text-center">
 		<div class="m-captcha-style" id="mcaptcha__widget-container"></div>
-		<div id="captcha" data-captcha-type="m-captcha" data-sitekey="{{.McaptchaSitekey}}" data-instance-url="{{.McaptchaURL}}"></div>
+		<label id="mcaptcha__token-label" hidden data-mcaptcha_url="{{.McaptchaURL}}/widget?sitekey={{.McaptchaSitekey}}">
+			<input id="mcaptcha__token" name="mcaptcha__token">{{/* the id and name are hard-coded in the library, cant't be changed */}}
+		</label>
+		<div id="captcha" data-captcha-type="m-captcha"></div>
 	</div>
 {{else if eq .CaptchaType "cfturnstile"}}
 	<div class="inline field tw-text-center">

web_src/js/features/captcha.ts

@@ -34,22 +34,10 @@ export async function initCaptcha() {
       break;
     }
     case 'm-captcha': {
-      const mCaptcha = await import('@mcaptcha/vanilla-glue');
+      // ref: https://github.com/mCaptcha/glue/blob/master/packages/vanilla/README.md
-
+      // sample: https://github.com/mCaptcha/glue/blob/master/packages/vanilla/static/embeded.html
-      // FIXME: the mCaptcha code is not right, it's a miracle that the wrong code could run
+      // @mcaptcha/vanilla-glue 0.1.0-rc2 auto-runs on module load, use the existing elements to render.
-      // * the "vanilla-glue" has some problems with es6 module.
+      await import('@mcaptcha/vanilla-glue');
-      // * the INPUT_NAME is a "const", it should not be changed.
-      // * the "mCaptcha.default" is actually the "Widget".
-
-      mCaptcha.INPUT_NAME = 'm-captcha-response';
-      const instanceURL = captchaEl.getAttribute('data-instance-url')!;
-
-      new mCaptcha.default({
-        siteKey: {
-          instanceUrl: new URL(instanceURL),
-          key: siteKey,
-        },
-      });
       break;
     }
     default: