From 1aa2299b558fc9eaba74615e8453cfe7da8510d9 Mon Sep 17 00:00:00 2001
From: Jai A <jaiagr+gpg@pm.me>
Date: Sat, 16 Nov 2024 17:44:24 -0800
Subject: [PATCH] fix hcaptcha not loading

---
 apps/frontend/src/components/ui/HCaptcha.vue | 34 ++++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/apps/frontend/src/components/ui/HCaptcha.vue b/apps/frontend/src/components/ui/HCaptcha.vue
index 05262a816..3421afa01 100644
--- a/apps/frontend/src/components/ui/HCaptcha.vue
+++ b/apps/frontend/src/components/ui/HCaptcha.vue
@@ -1,28 +1,34 @@
 <script setup>
 const token = defineModel();
+const id = ref(null);
 
-useHead({
-  script: [
-    {
-      src: "https://js.hcaptcha.com/1/api.js",
-      async: true,
-      defer: true,
-    },
-  ],
-});
-
-function updateToken(newToken) {
+function hCaptchaUpdateToken(newToken) {
   token.value = newToken;
 }
 
+function hCaptchaReady() {
+  window.hCaptchaUpdateToken = hCaptchaUpdateToken;
+  id.value = window.hcaptcha.render("h-captcha");
+}
+
 onMounted(() => {
-  window.updateCatpchaToken = updateToken;
+  window.hCaptchaReady = hCaptchaReady;
+
+  useHead({
+    script: [
+      {
+        src: "https://js.hcaptcha.com/1/api.js?render=explicit&onload=hCaptchaReady",
+        async: true,
+        defer: true,
+      },
+    ],
+  });
 });
 
 defineExpose({
   reset: () => {
     token.value = null;
-    window.hcaptcha.reset();
+    window.hcaptcha.reset(id.value);
   },
 });
 </script>
@@ -33,7 +39,7 @@ defineExpose({
     class="h-captcha"
     data-sitekey="4a7a2c80-68f2-4190-9d52-131c76e0c14e"
     :data-theme="$theme.active === 'light' ? 'light' : 'dark'"
-    data-callback="updateCatpchaToken"
+    data-callback="hCaptchaUpdateToken"
   ></div>
 </template>