Fix: Correct reCAPTCHA rendering on auth forms

This commit is contained in:
2025-09-28 12:26:49 -07:00
parent f03c521219
commit 394487de99

View File

@@ -35,7 +35,7 @@
</div> </div>
<!-- Auth Forms View --> <!-- Auth Forms View -->
<div x-data="authForm()" x-init="initRecaptcha()" x-effect="renderCaptcha()" x-show="view !== 'landing'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" class="bg-slate-800/50 backdrop-blur-sm p-8 rounded-xl border border-slate-700" style="display: none;"> <div x-data="authForm()" x-effect="view; renderCaptcha()" x-show="view !== 'landing'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" class="bg-slate-800/50 backdrop-blur-sm p-8 rounded-xl border border-slate-700" style="display: none;">
<button @click="view = 'landing'; error='';" class="absolute top-4 left-4 text-slate-400 hover:text-white transition-colors"> <button @click="view = 'landing'; error='';" class="absolute top-4 left-4 text-slate-400 hover:text-white transition-colors">
<i data-lucide="arrow-left"></i> <i data-lucide="arrow-left"></i>
</button> </button>
@@ -88,7 +88,7 @@
<script>lucide.createIcons();</script> <script>lucide.createIcons();</script>
<script src="https://cdn.jsdelivr.net/npm/scrypt-js@3.0.1/scrypt.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/scrypt-js@3.0.1/scrypt.min.js"></script>
<script> <script>
function authForm(){return{username:"",password:"",error:"",loading:!1,widgetId:null,recaptchaReady:!1,initRecaptcha(){window.grecaptcha?.render?this.recaptchaReady=!0:setTimeout(()=>this.initRecaptcha(),100)},renderCaptcha(){if(this.recaptchaReady){this.widgetId=null;const e=this.$el.querySelector(".recaptcha-container");e&&(this.widgetId=grecaptcha.render(e,{sitekey:"6LeXhdYrAAAAALW6DdgxNeHU0kwBncdicLnVYvXT"}))}},async submit(e){this.loading=!0,this.error="";const c=grecaptcha.getResponse(this.widgetId);if(!c)return this.error="Please complete the CAPTCHA.",this.loading=!1,void 0;try{const t=new TextEncoder,s=t.encode(this.password),o=t.encode(this.username.padEnd(16,"0").substring(0,16)),a=await scrypt.scrypt(s,o,16384,8,1,32),n=Array.from(a).map(e=>e.toString(16).padStart(2,"0")).join(""),i=await fetch(`/api/${e}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({username:this.username,pass_hash:n,"g-recaptcha-response":c})});if(!i.ok)throw new Error(await i.text()||"An error occurred");const r=await i.json();sessionStorage.setItem("pass_hash",n),sessionStorage.setItem("username",r.username),window.location.href="/dash/"}catch(t){this.error=t.message}finally{this.loading=!1,grecaptcha.reset(this.widgetId)}}}} function authForm(){return{username:"",password:"",error:"",loading:!1,widgetId:null,renderCaptcha(){if(!window.grecaptcha?.render)return void setTimeout(()=>this.renderCaptcha(),100);this.$nextTick(()=>{const e=this.$el.querySelector(".recaptcha-container");e&&(e.innerHTML="",this.widgetId=grecaptcha.render(e,{sitekey:"6LeXhdYrAAAAALW6DdgxNeHU0kwBncdicLnVYvXT"}))})},async submit(e){this.loading=!0,this.error="";const c=grecaptcha.getResponse(this.widgetId);if(!c)return this.error="Please complete the CAPTCHA.",this.loading=!1,void 0;try{const t=new TextEncoder,s=t.encode(this.password),o=t.encode(this.username.padEnd(16,"0").substring(0,16)),a=await scrypt.scrypt(s,o,16384,8,1,32),n=Array.from(a).map(e=>e.toString(16).padStart(2,"0")).join(""),i=await fetch(`/api/${e}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({username:this.username,pass_hash:n,"g-recaptcha-response":c})});if(!i.ok)throw new Error(await i.text()||"An error occurred");const r=await i.json();sessionStorage.setItem("pass_hash",n),sessionStorage.setItem("username",r.username),window.location.href="/dash/"}catch(t){this.error=t.message}finally{this.loading=!1,grecaptcha.reset(this.widgetId)}}}}
</script> </script>
</body> </body>
</html> </html>