Refactor: Replace reCAPTCHA with Turnstile on landing

This commit is contained in:
2025-12-15 12:28:12 -08:00
parent 7a33b4504d
commit 03dbb83a6f

View File

@@ -11,7 +11,7 @@
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://unpkg.com/lucide@latest"></script> <script src="https://unpkg.com/lucide@latest"></script>
<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script> <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
<link rel="preconnect" href="https://fonts.bunny.net"> <link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=plus-jakarta-sans:400,500,600,700" rel="stylesheet" /> <link href="https://fonts.bunny.net/css?family=plus-jakarta-sans:400,500,600,700" rel="stylesheet" />
<link href="https://fonts.bunny.net/css?family=architects-daughter:400" rel="stylesheet" /> <link href="https://fonts.bunny.net/css?family=architects-daughter:400" rel="stylesheet" />
@@ -110,7 +110,7 @@
required required
class="w-full p-3 bg-slate-700 border border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-sky-500 text-sm" class="w-full p-3 bg-slate-700 border border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-sky-500 text-sm"
> >
<div class="recaptcha-container flex justify-center"></div> <div class="turnstile-container flex justify-center"></div>
<p <p
x-text="error" x-text="error"
x-show="error" x-show="error"
@@ -151,7 +151,7 @@
required required
class="w-full p-3 bg-slate-700 border border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 text-sm" class="w-full p-3 bg-slate-700 border border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 text-sm"
> >
<div class="recaptcha-container flex justify-center"></div> <div class="turnstile-container flex justify-center"></div>
<p <p
x-text="error" x-text="error"
x-show="error" x-show="error"
@@ -203,20 +203,20 @@
loading:!1, loading:!1,
widgetId:null, widgetId:null,
renderCaptcha(){ renderCaptcha(){
if(!window.grecaptcha?.render) if(!window.turnstile?.render)
return void setTimeout(()=>this.renderCaptcha(),100); return void setTimeout(()=>this.renderCaptcha(),100);
this.$nextTick(()=>{ this.$nextTick(()=>{
const e=this.$el.querySelector(".recaptcha-container"); const e=this.$el.querySelector(".turnstile-container");
e&&(e.innerHTML="", e&&(e.innerHTML="",
this.widgetId=grecaptcha.render(e,{ this.widgetId=turnstile.render(e,{
sitekey:"6LdzaxMsAAAAAEXKHhzqVEFHvnOPIh19MFU1qrO3" sitekey:"0x4AAAAAAB54R0OUQDyuiUS5"
})) }))
}) })
}, },
async submit(e){ async submit(e){
this.loading=!0, this.loading=!0,
this.error=""; this.error="";
const c=grecaptcha.getResponse(this.widgetId); const c=turnstile.getResponse(this.widgetId);
if(!c) if(!c)
return this.error="Please complete the CAPTCHA.", return this.error="Please complete the CAPTCHA.",
this.loading=!1, this.loading=!1,
@@ -233,7 +233,7 @@
body:JSON.stringify({ body:JSON.stringify({
username:this.username, username:this.username,
pass_hash:n, pass_hash:n,
"g-recaptcha-response":c "cf-turnstile-response":c
}) })
}); });
if(!i.ok) if(!i.ok)
@@ -246,7 +246,7 @@
this.error=t.message this.error=t.message
}finally{ }finally{
this.loading=!1, this.loading=!1,
grecaptcha.reset(this.widgetId) turnstile.reset(this.widgetId)
} }
} }
} }