From 5a166d2455feb4f2d3c02a5399e6977ead669300 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Thu, 18 Apr 2024 16:36:26 -0700
Subject: [PATCH] Change to non-interactive turnstile (#1678)

---
 nuxt.config.ts                |  2 +-
 pages/auth.vue                | 12 +++++++++++-
 pages/auth/reset-password.vue | 10 ++++++++--
 pages/auth/sign-in.vue        | 13 +++++++++++--
 pages/auth/sign-up.vue        | 15 ++++++++++++---
 5 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 25613149b..6128e42f9 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -366,7 +366,7 @@ export default defineNuxtConfig({
     },
   },
   turnstile: {
-    siteKey: '0x4AAAAAAAHWfmKCm7cUG869',
+    siteKey: '0x4AAAAAAAW3guHM6Eunbgwu',
   },
   nitro: {
     moduleSideEffects: ['@vintl/compact-number/locale-data'],
diff --git a/pages/auth.vue b/pages/auth.vue
index b95f4452c..b55f54f91 100644
--- a/pages/auth.vue
+++ b/pages/auth.vue
@@ -61,7 +61,17 @@
 }
 
 .turnstile {
-  display: none;
+  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 {
diff --git a/pages/auth/reset-password.vue b/pages/auth/reset-password.vue
index 68647bd50..c878a5fb2 100644
--- a/pages/auth/reset-password.vue
+++ b/pages/auth/reset-password.vue
@@ -5,7 +5,6 @@
       <template v-if="step === 'choose_method'">
         <p>
           {{ formatMessage(methodChoiceMessages.description) }}
-          <NuxtTurnstile ref="turnstile" v-model="token" class="turnstile" />
         </p>
 
         <div class="iconified-input">
@@ -23,7 +22,14 @@
           />
         </div>
 
-        <button class="btn btn-primary centered-btn" @click="recovery">
+        <NuxtTurnstile
+          ref="turnstile"
+          v-model="token"
+          class="turnstile"
+          :options="{ theme: $colorMode.value === 'light' ? 'light' : 'dark' }"
+        />
+
+        <button class="btn btn-primary centered-btn" :disabled="!token" @click="recovery">
           <SendIcon /> {{ formatMessage(methodChoiceMessages.action) }}
         </button>
       </template>
diff --git a/pages/auth/sign-in.vue b/pages/auth/sign-in.vue
index f1609b7dd..3b76476ed 100644
--- a/pages/auth/sign-in.vue
+++ b/pages/auth/sign-in.vue
@@ -81,9 +81,18 @@
           />
         </div>
 
-        <NuxtTurnstile ref="turnstile" v-model="token" class="turnstile" />
+        <NuxtTurnstile
+          ref="turnstile"
+          v-model="token"
+          class="turnstile"
+          :options="{ theme: $colorMode.value === 'light' ? 'light' : 'dark' }"
+        />
 
-        <button class="btn btn-primary continue-btn centered-btn" @click="beginPasswordSignIn()">
+        <button
+          class="btn btn-primary continue-btn centered-btn"
+          :disabled="!token"
+          @click="beginPasswordSignIn()"
+        >
           {{ formatMessage(commonMessages.signInButton) }} <RightArrowIcon />
         </button>
 
diff --git a/pages/auth/sign-up.vue b/pages/auth/sign-up.vue
index f27d96ec7..4640a3b62 100644
--- a/pages/auth/sign-up.vue
+++ b/pages/auth/sign-up.vue
@@ -84,8 +84,6 @@
         />
       </div>
 
-      <NuxtTurnstile ref="turnstile" v-model="token" class="turnstile" />
-
       <Checkbox
         v-model="subscribe"
         class="subscribe-btn"
@@ -108,7 +106,18 @@
         </IntlFormatted>
       </p>
 
-      <button class="btn btn-primary continue-btn centered-btn" @click="createAccount">
+      <NuxtTurnstile
+        ref="turnstile"
+        v-model="token"
+        class="turnstile"
+        :options="{ theme: $colorMode.value === 'light' ? 'light' : 'dark' }"
+      />
+
+      <button
+        class="btn btn-primary continue-btn centered-btn"
+        :disabled="!token"
+        @click="createAccount"
+      >
         {{ formatMessage(messages.createAccountButton) }} <RightArrowIcon />
       </button>