fix: improve the validation message for documenso app (#640)

* fix: improve the validation message

* fix: improve the validation message

---------

Co-authored-by: Catalin Pit <catalinpit@gmail.com>

apps/web/src/components/forms/password.tsx

@@ -20,9 +20,18 @@ import { FormErrorMessage } from '../form/form-error-message';
 
 export const ZPasswordFormSchema = z
   .object({
-    currentPassword: z.string().min(6).max(72),
-    password: z.string().min(6).max(72),
-    repeatedPassword: z.string().min(6).max(72),
+    currentPassword: z
+      .string()
+      .min(6, { message: 'Password should contain at least 6 characters' })
+      .max(72, { message: 'Password should not contain more than 72 characters' }),
+    password: z
+      .string()
+      .min(6, { message: 'Password should contain at least 6 characters' })
+      .max(72, { message: 'Password should not contain more than 72 characters' }),
+    repeatedPassword: z
+      .string()
+      .min(6, { message: 'Password should contain at least 6 characters' })
+      .max(72, { message: 'Password should not contain more than 72 characters' }),
   })
   .refine((data) => data.password === data.repeatedPassword, {
     message: 'Passwords do not match',

apps/web/src/components/forms/signin.tsx

@@ -28,7 +28,7 @@ const LOGIN_REDIRECT_PATH = '/documents';
 
 export const ZSignInFormSchema = z.object({
   email: z.string().email().min(1),
-  password: z.string().min(6).max(72),
+  password: z.string().min(6, { message: 'Invalid password' }).max(72),
 });
 
 export type TSignInFormSchema = z.infer<typeof ZSignInFormSchema>;

apps/web/src/components/forms/signup.tsx

@@ -21,7 +21,10 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 export const ZSignUpFormSchema = z.object({
   name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
   email: z.string().email().min(1),
-  password: z.string().min(6).max(72),
+  password: z
+    .string()
+    .min(6, { message: 'Password should contain at least 6 characters' })
+    .max(72, { message: 'Password should not contain more than 72 characters' }),
   signature: z.string().min(1, { message: 'We need your signature to sign documents' }),
 });
 
@@ -134,6 +137,7 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
             )}
           </Button>
         </div>
+        <FormErrorMessage className="mt-1.5" error={errors.password} />
       </div>
 
       <div>