Change to non-interactive turnstile (#1678)

nuxt.config.ts

@@ -366,7 +366,7 @@ export default defineNuxtConfig({
     },
   },
   turnstile: {
-    siteKey: '0x4AAAAAAAHWfmKCm7cUG869',
+    siteKey: '0x4AAAAAAAW3guHM6Eunbgwu',
   },
   nitro: {
     moduleSideEffects: ['@vintl/compact-number/locale-data'],

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 {

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>

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>
 

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>