fix: Reset Captcha if account signup is an error (#4279)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue

@@ -23,7 +23,7 @@ export default {
     background: var(--s-500);
   }
   &__busy {
-    background: var(--y-700);
+    background: var(--y-400);
   }
 }
 </style>

app/javascript/dashboard/i18n/locale/en/setNewPassword.json

@@ -15,6 +15,9 @@
       "SUCCESS_MESSAGE": "Successfully changed the password",
       "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
     },
+    "CAPTCHA": {
+      "ERROR": "Verification expired. Please solve captcha again."
+    },
     "SUBMIT": "Submit"
   }
 }

app/javascript/dashboard/routes/auth/Signup.vue

@@ -77,9 +77,17 @@
           />
           <div v-if="globalConfig.hCaptchaSiteKey" class="h-captcha--box">
             <vue-hcaptcha
+              ref="hCaptcha"
+              :class="{ error: !hasAValidCaptcha && didCaptchaReset }"
               :sitekey="globalConfig.hCaptchaSiteKey"
               @verify="onRecaptchaVerified"
             />
+            <span
+              v-if="!hasAValidCaptcha && didCaptchaReset"
+              class="captcha-error"
+            >
+              {{ $t('SET_NEW_PASSWORD.CAPTCHA.ERROR') }}
+            </span>
           </div>
           <woot-submit-button
             :disabled="isSignupInProgress || !hasAValidCaptcha"
@@ -129,6 +137,7 @@ export default {
         confirmPassword: '',
         hCaptchaClientResponse: '',
       },
+      didCaptchaReset: false,
       isSignupInProgress: false,
       error: '',
     };
@@ -183,6 +192,7 @@ export default {
     async submit() {
       this.$v.$touch();
       if (this.$v.$invalid) {
+        this.resetCaptcha();
         return;
       }
       this.isSignupInProgress = true;
@@ -194,6 +204,7 @@ export default {
       } catch (error) {
         let errorMessage = this.$t('REGISTER.API.ERROR_MESSAGE');
         if (error.response && error.response.data.message) {
+          this.resetCaptcha();
           errorMessage = error.response.data.message;
         }
         this.showAlert(errorMessage);
@@ -203,6 +214,15 @@ export default {
     },
     onRecaptchaVerified(token) {
       this.credentials.hCaptchaClientResponse = token;
+      this.didCaptchaReset = false;
+    },
+    resetCaptcha() {
+      if (!this.globalConfig.hCaptchaSiteKey) {
+        return;
+      }
+      this.$refs.hCaptcha.reset();
+      this.credentials.hCaptchaClientResponse = '';
+      this.didCaptchaReset = true;
     },
   },
 };
@@ -254,6 +274,18 @@ export default {
 
   .h-captcha--box {
     margin-bottom: var(--space-one);
+
+    .captcha-error {
+      color: var(--r-400);
+      font-size: var(--font-size-small);
+    }
+
+    &::v-deep .error {
+      iframe {
+        border: 1px solid var(--r-500);
+        border-radius: var(--border-radius-normal);
+      }
+    }
   }
 }
 </style>