Add Cloudflare Turnstile CAPTCHA support (#9111)

* Add Cloudflare Turnstile CAPTCHA support

* Update packages/client/src/components/MkCaptcha.vue

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

2 files changed, 9 insertions, 1 deletions

diff --git a/packages/client/src/components/MkCaptcha.vue b/packages/client/src/components/MkCaptcha.vue
index 7360734914..b399bb8921 100644
--- a/packages/client/src/components/MkCaptcha.vue
+++ b/packages/client/src/components/MkCaptcha.vue
@@ -20,7 +20,7 @@ type Captcha = {
 	getResponse(id: string): string;
 };
 
-type CaptchaProvider = 'hcaptcha' | 'recaptcha';
+type CaptchaProvider = 'hcaptcha' | 'recaptcha' | 'turnstile';
 
 type CaptchaContainer = {
 	readonly [_ in CaptchaProvider]?: Captcha;
@@ -48,6 +48,7 @@ const variable = computed(() => {
 	switch (props.provider) {
 		case 'hcaptcha': return 'hcaptcha';
 		case 'recaptcha': return 'grecaptcha';
+		case 'turnstile': return 'turnstile';
 	}
 });
 
@@ -57,6 +58,7 @@ const src = computed(() => {
 	switch (props.provider) {
 		case 'hcaptcha': return 'https://js.hcaptcha.com/1/api.js?render=explicit&recaptchacompat=off';
 		case 'recaptcha': return 'https://www.recaptcha.net/recaptcha/api.js?render=explicit';
+		case 'turnstile': return 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
 	}
 });
 
diff --git a/packages/client/src/components/MkSignup.vue b/packages/client/src/components/MkSignup.vue
index a324bb6f5a..c1f91b18c2 100644
--- a/packages/client/src/components/MkSignup.vue
+++ b/packages/client/src/components/MkSignup.vue
@@ -59,6 +59,7 @@
 	</MkSwitch>
 	<MkCaptcha v-if="instance.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" class="_formBlock captcha" provider="hcaptcha" :sitekey="instance.hcaptchaSiteKey"/>
 	<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" class="_formBlock captcha" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
+	<MkCaptcha v-if="instance.enableTurnstile" ref="turnstile" v-model="turnstileResponse" class="_formBlock captcha" provider="turnstile" :sitekey="instance.turnstileSiteKey"/>
 	<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" gradate data-cy-signup-submit>{{ i18n.ts.start }}</MkButton>
 </form>
 </template>
@@ -92,6 +93,7 @@ const host = toUnicode(config.host);
 
 let hcaptcha = $ref();
 let recaptcha = $ref();
+let turnstile = $ref();
 
 let username: string = $ref('');
 let password: string = $ref('');
@@ -106,12 +108,14 @@ let submitting: boolean = $ref(false);
 let ToSAgreement: boolean = $ref(false);
 let hCaptchaResponse = $ref(null);
 let reCaptchaResponse = $ref(null);
+let turnstileResponse = $ref(null);
 
 const shouldDisableSubmitting = $computed((): boolean => {
 	return submitting ||
 		instance.tosUrl && !ToSAgreement ||
 		instance.enableHcaptcha && !hCaptchaResponse ||
 		instance.enableRecaptcha && !reCaptchaResponse ||
+		instance.enableTurnstile && !turnstileResponse ||
 		passwordRetypeState === 'not-match';
 });
 
@@ -198,6 +202,7 @@ function onSubmit(): void {
 		invitationCode,
 		'hcaptcha-response': hCaptchaResponse,
 		'g-recaptcha-response': reCaptchaResponse,
+		'turnstile-response': turnstileResponse,
 	}).then(() => {
 		if (instance.emailRequiredForSignup) {
 			os.alert({
@@ -222,6 +227,7 @@ function onSubmit(): void {
 		submitting = false;
 		hcaptcha.reset?.();
 		recaptcha.reset?.();
+		turnstile.reset?.();
 
 		os.alert({
 			type: 'error',