Fix mCaptcha broken after Vite migration

package.json

@@ -26,7 +26,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.24.1",
     "@replit/codemirror-indentation-markers": "6.5.3",

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');
-
-      // FIXME: the mCaptcha code is not right, it's a miracle that the wrong code could run
-      // * the "vanilla-glue" has some problems with es6 module.
-      // * 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,
-        },
-      });
+      // 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
+      // @mcaptcha/vanilla-glue 0.1.0-rc2 auto-runs on module load, use the existing elements to render.
+      await import('@mcaptcha/vanilla-glue');
       break;
     }
     default: