feat: Add missing password validation at signup (#4441)

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

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

@@ -21,7 +21,8 @@
     "PASSWORD": {
       "LABEL": "Password",
       "PLACEHOLDER": "Password",
-      "ERROR": "Password is too short"
+      "ERROR": "Password is too short",
+      "IS_INVALID_PASSWORD": "Password should contain atleast 1 uppercase letter, 1 lowercase letter, 1 number and 1 special character"
     },
     "CONFIRM_PASSWORD": {
       "LABEL": "Confirm Password",

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

@@ -54,14 +54,9 @@
             :class="{ error: $v.credentials.password.$error }"
             :label="$t('LOGIN.PASSWORD.LABEL')"
             :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
-            :error="
+            :error="passwordErrorText"
-              $v.credentials.password.$error
-                ? $t('SET_NEW_PASSWORD.PASSWORD.ERROR')
-                : ''
-            "
             @blur="$v.credentials.password.$touch"
           />
-
           <woot-input
             v-model.trim="credentials.confirmPassword"
             type="password"
@@ -122,6 +117,7 @@ import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import alertMixin from 'shared/mixins/alertMixin';
 import { DEFAULT_REDIRECT_URL } from '../../constants';
 import VueHcaptcha from '@hcaptcha/vue-hcaptcha';
+import { isValidPassword } from 'shared/helpers/Validators';
 export default {
   components: {
     VueHcaptcha,
@@ -158,6 +154,7 @@ export default {
       },
       password: {
         required,
+        isValidPassword,
         minLength: minLength(6),
       },
       confirmPassword: {
@@ -187,6 +184,19 @@ export default {
       }
       return true;
     },
+    passwordErrorText() {
+      const { password } = this.$v.credentials;
+      if (!password.$error) {
+        return '';
+      }
+      if (!password.minLength) {
+        return this.$t('REGISTER.PASSWORD.ERROR');
+      }
+      if (!password.isValidPassword) {
+        return this.$t('REGISTER.PASSWORD.IS_INVALID_PASSWORD');
+      }
+      return '';
+    },
   },
   methods: {
     async submit() {

app/javascript/shared/helpers/Validators.js

@@ -2,3 +2,17 @@ export const isPhoneE164 = value => !!value.match(/^\+[1-9]\d{1,14}$/);
 export const isPhoneE164OrEmpty = value => isPhoneE164(value) || value === '';
 export const shouldBeUrl = (value = '') =>
   value ? value.startsWith('http') : true;
+export const isValidPassword = value => {
+  const containsUppercase = /[A-Z]/.test(value);
+  const containsLowercase = /[a-z]/.test(value);
+  const containsNumber = /[0-9]/.test(value);
+  const containsSpecialCharacter = /[!@#$%^&*()_+\-=[\]{}|'"/\\.,`<>:;?~]/.test(
+    value
+  );
+  return (
+    containsUppercase &&
+    containsLowercase &&
+    containsNumber &&
+    containsSpecialCharacter
+  );
+};

app/javascript/shared/helpers/specs/ValidatorsHelper.spec.js

@@ -1,7 +1,24 @@
 import { shouldBeUrl } from '../Validators';
+import { isValidPassword } from '../Validators';
 
 describe('#shouldBeUrl', () => {
   it('should return correct url', () => {
     expect(shouldBeUrl('http')).toEqual(true);
   });
 });
+
+describe('#isValidPassword', () => {
+  it('should return correct password', () => {
+    expect(isValidPassword('testPass4!')).toEqual(true);
+    expect(isValidPassword('testPass4-')).toEqual(true);
+    expect(isValidPassword('testPass4\\')).toEqual(true);
+    expect(isValidPassword("testPass4'")).toEqual(true);
+  });
+
+  it('should return wrong password', () => {
+    expect(isValidPassword('testpass4')).toEqual(false);
+    expect(isValidPassword('testPass4')).toEqual(false);
+    expect(isValidPassword('testpass4!')).toEqual(false);
+    expect(isValidPassword('testPass!')).toEqual(false);
+  });
+});