From 9da6d4ea853a620eadbc024b1eda8e65e8e4948b Mon Sep 17 00:00:00 2001 From: Giteabot Date: Fri, 21 Feb 2025 00:21:31 +0800 Subject: [PATCH] Fix mCaptcha bug (#33659) (#33661) Backport #33659 by wxiaoguang Fix #33658 Co-authored-by: wxiaoguang --- web_src/css/form.css | 2 +- web_src/js/features/captcha.ts | 13 +++++++++---- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/web_src/css/form.css b/web_src/css/form.css index 26f00e4d99..924bcb8c2f 100644 --- a/web_src/css/form.css +++ b/web_src/css/form.css @@ -182,7 +182,7 @@ textarea:focus, height: 76px !important; } .m-captcha-style { - width: 50%; + max-width: 450px; } } diff --git a/web_src/js/features/captcha.ts b/web_src/js/features/captcha.ts index 69b4aa6852..df234d0e5c 100644 --- a/web_src/js/features/captcha.ts +++ b/web_src/js/features/captcha.ts @@ -34,13 +34,18 @@ export async function initCaptcha() { break; } case 'm-captcha': { - const {default: mCaptcha} = await import(/* webpackChunkName: "mcaptcha-vanilla-glue" */'@mcaptcha/vanilla-glue'); - // @ts-expect-error + const mCaptcha = await import(/* webpackChunkName: "mcaptcha-vanilla-glue" */'@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". + + // @ts-expect-error TS2540: Cannot assign to 'INPUT_NAME' because it is a read-only property. mCaptcha.INPUT_NAME = 'm-captcha-response'; const instanceURL = captchaEl.getAttribute('data-instance-url'); - // @ts-expect-error - mCaptcha.default({ + new mCaptcha.default({ siteKey: { instanceUrl: new URL(instanceURL), key: siteKey,