Add indicator for before turnstile has finished verifying your identity.

locales/en-US/index.json

@@ -311,6 +311,9 @@
   "label.error": {
     "message": "Error"
   },
+  "label.failed-to-verify": {
+    "message": "Couldn't verify you're a human. Try again later."
+  },
   "label.followed-projects": {
     "message": "Followed projects"
   },
@@ -341,6 +344,9 @@
   "label.unlisted": {
     "message": "Unlisted"
   },
+  "label.verifying": {
+    "message": "Verifying humanity..."
+  },
   "label.visibility": {
     "message": "Visibility"
   },

pages/auth/reset-password.vue

@@ -23,8 +23,16 @@
           />
         </div>
 
-        <button class="btn btn-primary centered-btn" @click="recovery">
-          <SendIcon /> {{ formatMessage(methodChoiceMessages.action) }}
+        <p v-if="!token && takingTooLong" class="known-errors">
+          {{ formatMessage(commonMessages.failedToVerifyLabel) }}
+        </p>
+        <button v-else class="btn btn-primary centered-btn" :disabled="!token" @click="recovery">
+          <template v-if="token">
+            <SendIcon /> {{ formatMessage(methodChoiceMessages.action) }}
+          </template>
+          <template v-else>
+            {{ formatMessage(commonMessages.verifyingLabel) }}
+          </template>
         </button>
       </template>
       <template v-else-if="step === 'passed_challenge'">
@@ -58,8 +66,21 @@
           />
         </div>
 
-        <button class="auth-form__input btn btn-primary continue-btn" @click="changePassword">
-          {{ formatMessage(postChallengeMessages.action) }}
+        <p v-if="!token && takingTooLong" class="known-errors">
+          {{ formatMessage(commonMessages.failedToVerifyLabel) }}
+        </p>
+        <button
+          v-else
+          :disabled="!token"
+          class="auth-form__input btn btn-primary continue-btn"
+          @click="changePassword"
+        >
+          <template v-if="token">
+            {{ formatMessage(postChallengeMessages.action) }}
+          </template>
+          <template v-else>
+            {{ formatMessage(commonMessages.verifyingLabel) }}
+          </template>
         </button>
       </template>
     </section>
@@ -163,6 +184,15 @@ const turnstile = ref()
 
 const email = ref('')
 const token = ref('')
+const takingTooLong = ref(false)
+
+onMounted(() => {
+  setTimeout(() => {
+    if (!token.value) {
+      takingTooLong.value = true
+    }
+  }, 10000)
+})
 
 async function recovery() {
   startLoading()

pages/auth/sign-in.vue

@@ -83,8 +83,22 @@
 
         <NuxtTurnstile ref="turnstile" v-model="token" class="turnstile" />
 
-        <button class="btn btn-primary continue-btn centered-btn" @click="beginPasswordSignIn()">
-          {{ formatMessage(commonMessages.signInButton) }} <RightArrowIcon />
+        <p v-if="!token && takingTooLong" class="known-errors">
+          {{ formatMessage(commonMessages.failedToVerifyLabel) }}
+        </p>
+        <button
+          v-else
+          class="btn btn-primary continue-btn centered-btn"
+          :disabled="!token"
+          @click="beginPasswordSignIn()"
+        >
+          <template v-if="token">
+            {{ formatMessage(commonMessages.signInButton) }}
+            <RightArrowIcon />
+          </template>
+          <template v-else>
+            {{ formatMessage(commonMessages.verifyingLabel) }}
+          </template>
         </button>
 
         <div class="auth-form__additional-options">
@@ -191,6 +205,15 @@ const turnstile = ref()
 const email = ref('')
 const password = ref('')
 const token = ref('')
+const takingTooLong = ref(false)
+
+onMounted(() => {
+  setTimeout(() => {
+    if (!token.value) {
+      takingTooLong.value = true
+    }
+  }, 10000)
+})
 
 const flow = ref(route.query.flow)
 

pages/auth/sign-up.vue

@@ -108,8 +108,21 @@
         </IntlFormatted>
       </p>
 
-      <button class="btn btn-primary continue-btn centered-btn" @click="createAccount">
-        {{ formatMessage(messages.createAccountButton) }} <RightArrowIcon />
+      <p v-if="!token && takingTooLong" class="known-errors">
+        {{ formatMessage(commonMessages.failedToVerifyLabel) }}
+      </p>
+      <button
+        v-else
+        class="btn btn-primary continue-btn centered-btn"
+        :disabled="!token"
+        @click="createAccount"
+      >
+        <template v-if="token">
+          {{ formatMessage(messages.createAccountButton) }} <RightArrowIcon />
+        </template>
+        <template v-else>
+          {{ formatMessage(commonMessages.verifyingLabel) }}
+        </template>
       </button>
 
       <div class="auth-form__additional-options">
@@ -215,6 +228,16 @@ const username = ref('')
 const password = ref('')
 const confirmPassword = ref('')
 const token = ref('')
+const takingTooLong = ref(false)
+
+onMounted(() => {
+  setTimeout(() => {
+    if (!token.value) {
+      takingTooLong.value = true
+    }
+  }, 10000)
+})
+
 const subscribe = ref(true)
 
 const signInLink = computed(

utils/common-messages.ts

@@ -55,6 +55,10 @@ export const commonMessages = defineMessages({
     id: 'notification.error.title',
     defaultMessage: 'An error occurred',
   },
+  failedToVerifyLabel: {
+    id: 'label.failed-to-verify',
+    defaultMessage: "Couldn't verify you're a human. Try again later.",
+  },
   followedProjectsLabel: {
     id: 'label.followed-projects',
     defaultMessage: 'Followed projects',
@@ -131,6 +135,10 @@ export const commonMessages = defineMessages({
     id: 'button.upload-image',
     defaultMessage: 'Upload image',
   },
+  verifyingLabel: {
+    id: 'label.verifying',
+    defaultMessage: 'Verifying humanity...',
+  },
   visibilityLabel: {
     id: 'label.visibility',
     defaultMessage: 'Visibility',