feat: set min/max lengths for password

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

@@ -20,8 +20,8 @@ import { FormErrorMessage } from '../form/form-error-message';
 
 export const ZPasswordFormSchema = z
   .object({
-    password: z.string().min(6),
+    password: z.string().min(6).max(72),
-    repeatedPassword: z.string().min(6),
+    repeatedPassword: z.string().min(6).max(72),
   })
   .refine((data) => data.password === data.repeatedPassword, {
     message: 'Passwords do not match',
@@ -93,29 +93,15 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
           Password
         </Label>
 
-        <div className="relative">
         <Input
           id="password"
-            type={showPassword ? 'text' : 'password'}
+          type="password"
-            className="bg-background mt-2 pr-10"
+          minLength={6}
+          maxLength={72}
+          className="bg-background mt-2"
           {...register('password')}
         />
 
-          <Button
-            variant="link"
-            type="button"
-            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
-            aria-label={showPassword ? 'Mask password' : 'Reveal password'}
-            onClick={() => setShowPassword((showPassword) => !showPassword)}
-          >
-            {showPassword ? (
-              <EyeOff className="h-5 w-5 text-slate-500" />
-            ) : (
-              <Eye className="h-5 w-5 text-slate-500" />
-            )}
-          </Button>
-        </div>
-
         <FormErrorMessage className="mt-1.5" error={errors.password} />
       </div>
 
@@ -124,29 +110,15 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
           Repeat Password
         </Label>
 
-        <div className="relative">
         <Input
           id="repeated-password"
-            type={showConfirmPassword ? 'text' : 'password'}
+          type="password"
-            className="bg-background mt-2 pr-10"
+          minLength={6}
+          maxLength={72}
+          className="bg-background mt-2"
           {...register('repeatedPassword')}
         />
 
-          <Button
-            variant="link"
-            type="button"
-            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
-            aria-label={showConfirmPassword ? 'Mask password' : 'Reveal password'}
-            onClick={() => setShowConfirmPassword((showConfirmPassword) => !showConfirmPassword)}
-          >
-            {showConfirmPassword ? (
-              <EyeOff className="h-5 w-5 text-slate-500" />
-            ) : (
-              <Eye className="h-5 w-5 text-slate-500" />
-            )}
-          </Button>
-        </div>
-
         <FormErrorMessage className="mt-1.5" error={errors.repeatedPassword} />
       </div>
 

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

@@ -17,7 +17,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export const ZSignInFormSchema = z.object({
   email: z.string().email().min(1),
-  password: z.string().min(1),
+  password: z.string().min(6).max(72),
 });
 
 export type TSignInFormSchema = z.infer<typeof ZSignInFormSchema>;
@@ -99,29 +99,15 @@ export const SignInForm = ({ className }: SignInFormProps) => {
           Password
         </Label>
 
-        <div className="relative">
         <Input
           id="password"
-            type={showPassword ? 'text' : 'password'}
+          type="password"
-            className="bg-background mt-2 pr-10"
+          minLength={6}
+          maxLength={72}
+          className="bg-background mt-2"
           {...register('password')}
         />
 
-          <Button
-            variant="link"
-            type="button"
-            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
-            aria-label={showPassword ? 'Mask password' : 'Reveal password'}
-            onClick={() => setShowPassword((showPassword) => !showPassword)}
-          >
-            {showPassword ? (
-              <EyeOff className="h-5 w-5 text-slate-500" />
-            ) : (
-              <Eye className="h-5 w-5 text-slate-500" />
-            )}
-          </Button>
-        </div>
-
         {errors.password && (
           <span className="mt-1 text-xs text-red-500">{errors.password.message}</span>
         )}

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

@@ -20,7 +20,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 export const ZSignUpFormSchema = z.object({
   name: z.string().min(1),
   email: z.string().email().min(1),
-  password: z.string().min(1),
+  password: z.string().min(6).max(72),
 });
 
 export type TSignUpFormSchema = z.infer<typeof ZSignUpFormSchema>;
@@ -105,28 +105,14 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
           Password
         </Label>
 
-        <div className="relative">
         <Input
           id="password"
-            type={showPassword ? 'text' : 'password'}
+          type="password"
-            className="bg-background mt-2 pr-10"
+          minLength={6}
+          maxLength={72}
+          className="bg-background mt-2"
           {...register('password')}
         />
-
-          <Button
-            variant="link"
-            type="button"
-            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
-            aria-label={showPassword ? 'Mask password' : 'Reveal password'}
-            onClick={() => setShowPassword((showPassword) => !showPassword)}
-          >
-            {showPassword ? (
-              <EyeOff className="h-5 w-5 text-slate-500" />
-            ) : (
-              <Eye className="h-5 w-5 text-slate-500" />
-            )}
-          </Button>
-        </div>
       </div>
 
       <div>