From d12757154eeb3fbb5410dbd190d871958071f1d1 Mon Sep 17 00:00:00 2001
From: Prospector <prospectordev@gmail.com>
Date: Wed, 10 Apr 2024 21:27:05 -0700
Subject: [PATCH] Add indicator for before turnstile has finished verifying
 your identity.

---
 locales/en-US/index.json      |  6 ++++++
 pages/auth/reset-password.vue | 38 +++++++++++++++++++++++++++++++----
 pages/auth/sign-in.vue        | 27 +++++++++++++++++++++++--
 pages/auth/sign-up.vue        | 27 +++++++++++++++++++++++--
 utils/common-messages.ts      |  8 ++++++++
 5 files changed, 98 insertions(+), 8 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index 1405ed5d56..ee05d72fc4 100644
--- a/locales/en-US/index.json
+++ b/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"
   },
diff --git a/pages/auth/reset-password.vue b/pages/auth/reset-password.vue
index 68647bd508..0e485366e0 100644
--- a/pages/auth/reset-password.vue
+++ b/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()
diff --git a/pages/auth/sign-in.vue b/pages/auth/sign-in.vue
index f1609b7ddb..826ee62295 100644
--- a/pages/auth/sign-in.vue
+++ b/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)
 
diff --git a/pages/auth/sign-up.vue b/pages/auth/sign-up.vue
index f27d96ec7e..751a77a2bc 100644
--- a/pages/auth/sign-up.vue
+++ b/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(
diff --git a/utils/common-messages.ts b/utils/common-messages.ts
index 7aa77bbf57..d6b458e480 100644
--- a/utils/common-messages.ts
+++ b/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',