From d7de73ce5f702ae810cfa8cb19b99b2fa80c82c8 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 3 Apr 2025 03:49:58 +0530
Subject: [PATCH] fix: Signup form validation issue with captcha handling
 (#11232)

# Pull Request Template

## Description

This PR improves password validation in the signup form and ensures
proper captcha handling during form submission.

**Changes:**
1. Display an error message if the password is invalid.
2. Disable the account creation button when the password is invalid.

Fixes https://linear.app/chatwoot/issue/CW-4199/signup-issues

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

### Loom video

https://www.loom.com/share/d0ff04f12b98473e837b7f43af444f85?sid=04473cea-4717-4de8-b3fe-33ab0faed5e9


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 .../v3/views/auth/signup/components/Signup/Form.vue    | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
index 6636d1e98..9cffea18d 100644
--- a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
+++ b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
@@ -85,10 +85,10 @@ export default {
       if (!password.$error) {
         return '';
       }
-      if (!password.minLength) {
+      if (password.minLength.$invalid) {
         return this.$t('REGISTER.PASSWORD.ERROR');
       }
-      if (!password.isValidPassword) {
+      if (password.isValidPassword.$invalid) {
         return this.$t('REGISTER.PASSWORD.IS_INVALID_PASSWORD');
       }
       return '';
@@ -96,6 +96,9 @@ export default {
     showGoogleOAuth() {
       return Boolean(window.chatwootConfig.googleOAuthClientId);
     },
+    isFormValid() {
+      return !this.v$.$invalid && this.hasAValidCaptcha;
+    },
   },
   methods: {
     async submit() {
@@ -120,6 +123,7 @@ export default {
     onRecaptchaVerified(token) {
       this.credentials.hCaptchaClientResponse = token;
       this.didCaptchaReset = false;
+      this.v$.$touch();
     },
     resetCaptcha() {
       if (!this.globalConfig.hCaptchaSiteKey) {
@@ -198,7 +202,7 @@ export default {
       </div>
       <SubmitButton
         :button-text="$t('REGISTER.SUBMIT')"
-        :disabled="isSignupInProgress || !hasAValidCaptcha"
+        :disabled="isSignupInProgress || !isFormValid"
         :loading="isSignupInProgress"
         icon-class="arrow-chevron-right"
       />