Switch to HCaptcha for Auth-related captchas (#2945)

* Switch to HCaptcha for Auth-related captchas

* run fmt

apps/frontend/src/components/ui/HCaptcha.vue

@@ -0,0 +1,53 @@
+<script setup>
+const token = defineModel();
+
+useHead({
+  script: [
+    {
+      src: "https://js.hcaptcha.com/1/api.js",
+      async: true,
+      defer: true,
+    },
+  ],
+});
+
+function updateToken(newToken) {
+  token.value = newToken;
+}
+
+onMounted(() => {
+  window.updateCatpchaToken = updateToken;
+});
+
+defineExpose({
+  reset: () => {
+    token.value = null;
+    window.hcaptcha.reset();
+  },
+});
+</script>
+
+<template>
+  <div
+    id="h-captcha"
+    class="h-captcha"
+    data-sitekey="4a7a2c80-68f2-4190-9d52-131c76e0c14e"
+    :data-theme="$theme.active === 'light' ? 'light' : 'dark'"
+    data-callback="updateCatpchaToken"
+  ></div>
+</template>
+
+<style lang="scss">
+.h-captcha {
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: var(--radius-md);
+  border: 2px solid var(--color-button-bg);
+  height: 78px;
+
+  iframe {
+    margin: -1px;
+  }
+}
+</style>

apps/frontend/src/pages/auth.vue

@@ -60,20 +60,6 @@
   }
 }
 
-.turnstile {
-  display: flex;
-  justify-content: center;
-  overflow: hidden;
-  border-radius: var(--radius-md);
-  border: 2px solid var(--color-button-bg);
-  height: 66px;
-
-  iframe {
-    margin: -1px;
-    min-width: calc(100% + 2px);
-  }
-}
-
 .auth-form {
   display: flex;
   flex-direction: column;

apps/frontend/src/pages/auth/reset-password.vue

@@ -22,12 +22,7 @@
           />
         </div>
 
-        <NuxtTurnstile
-          ref="turnstile"
-          v-model="token"
-          class="turnstile"
-          :options="{ theme: $theme.active === 'light' ? 'light' : 'dark' }"
-        />
+        <HCaptcha ref="captcha" v-model="token" />
 
         <button class="btn btn-primary centered-btn" :disabled="!token" @click="recovery">
           <SendIcon /> {{ formatMessage(methodChoiceMessages.action) }}
@@ -73,6 +68,7 @@
 </template>
 <script setup>
 import { SendIcon, MailIcon, KeyIcon } from "@modrinth/assets";
+import HCaptcha from "@/components/ui/HCaptcha.vue";
 
 const { formatMessage } = useVIntl();
 
@@ -165,7 +161,7 @@ if (route.query.flow) {
   step.value = "passed_challenge";
 }
 
-const turnstile = ref();
+const captcha = ref();
 
 const email = ref("");
 const token = ref("");
@@ -194,7 +190,7 @@ async function recovery() {
       text: err.data ? err.data.description : err,
       type: "error",
     });
-    turnstile.value?.reset();
+    captcha.value?.reset();
   }
   stopLoading();
 }
@@ -227,7 +223,7 @@ async function changePassword() {
       text: err.data ? err.data.description : err,
       type: "error",
     });
-    turnstile.value?.reset();
+    captcha.value?.reset();
   }
   stopLoading();
 }

apps/frontend/src/pages/auth/sign-in.vue

@@ -81,12 +81,7 @@
           />
         </div>
 
-        <NuxtTurnstile
-          ref="turnstile"
-          v-model="token"
-          class="turnstile"
-          :options="{ theme: $theme.active === 'light' ? 'light' : 'dark' }"
-        />
+        <HCaptcha ref="captcha" v-model="token" />
 
         <button
           class="btn btn-primary continue-btn centered-btn"
@@ -127,6 +122,7 @@ import {
   KeyIcon,
   MailIcon,
 } from "@modrinth/assets";
+import HCaptcha from "@/components/ui/HCaptcha.vue";
 
 const { formatMessage } = useVIntl();
 
@@ -189,7 +185,7 @@ if (auth.value.user) {
   await finishSignIn();
 }
 
-const turnstile = ref();
+const captcha = ref();
 
 const email = ref("");
 const password = ref("");
@@ -225,7 +221,7 @@ async function beginPasswordSignIn() {
       text: err.data ? err.data.description : err,
       type: "error",
     });
-    turnstile.value?.reset();
+    captcha.value?.reset();
   }
   stopLoading();
 }
@@ -250,7 +246,7 @@ async function begin2FASignIn() {
       text: err.data ? err.data.description : err,
       type: "error",
     });
-    turnstile.value?.reset();
+    captcha.value?.reset();
   }
   stopLoading();
 }

apps/frontend/src/pages/auth/sign-up.vue

@@ -106,12 +106,7 @@
         </IntlFormatted>
       </p>
 
-      <NuxtTurnstile
-        ref="turnstile"
-        v-model="token"
-        class="turnstile"
-        :options="{ theme: $theme.active === 'light' ? 'light' : 'dark' }"
-      />
+      <HCaptcha ref="captcha" v-model="token" />
 
       <button
         class="btn btn-primary continue-btn centered-btn"
@@ -145,6 +140,7 @@ import {
   SSOGitLabIcon,
 } from "@modrinth/assets";
 import { Checkbox } from "@modrinth/ui";
+import HCaptcha from "@/components/ui/HCaptcha.vue";
 
 const { formatMessage } = useVIntl();
 
@@ -209,7 +205,7 @@ if (auth.value.user) {
   await navigateTo("/dashboard");
 }
 
-const turnstile = ref();
+const captcha = ref();
 
 const email = ref("");
 const username = ref("");
@@ -235,7 +231,7 @@ async function createAccount() {
         }),
         type: "error",
       });
-      turnstile.value?.reset();
+      captcha.value?.reset();
     }
 
     const res = await useBaseFetch("auth/create", {
@@ -264,7 +260,7 @@ async function createAccount() {
       text: err.data ? err.data.description : err,
       type: "error",
     });
-    turnstile.value?.reset();
+    captcha.value?.reset();
   }
   stopLoading();
 }