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',