From b97a0380dff07700fb894b1cd02d5d7e1a0d3d6a Mon Sep 17 00:00:00 2001
From: nsylke <nicksylke@outlook.com>
Date: Sat, 26 Aug 2023 09:53:58 -0500
Subject: [PATCH] feat: set min/max lengths for password

---
 apps/web/src/components/forms/password.tsx | 64 ++++++----------------
 apps/web/src/components/forms/signin.tsx   | 32 +++--------
 apps/web/src/components/forms/signup.tsx   | 32 +++--------
 3 files changed, 36 insertions(+), 92 deletions(-)

diff --git a/apps/web/src/components/forms/password.tsx b/apps/web/src/components/forms/password.tsx
index 9e9837ca5..73837868f 100644
--- a/apps/web/src/components/forms/password.tsx
+++ b/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),
-    repeatedPassword: z.string().min(6),
+    password: z.string().min(6).max(72),
+    repeatedPassword: z.string().min(6).max(72),
   })
   .refine((data) => data.password === data.repeatedPassword, {
     message: 'Passwords do not match',
@@ -93,28 +93,14 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
           Password
         </Label>
 
-        <div className="relative">
-          <Input
-            id="password"
-            type={showPassword ? 'text' : 'password'}
-            className="bg-background mt-2 pr-10"
-            {...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>
+        <Input
+          id="password"
+          type="password"
+          minLength={6}
+          maxLength={72}
+          className="bg-background mt-2"
+          {...register('password')}
+        />
 
         <FormErrorMessage className="mt-1.5" error={errors.password} />
       </div>
@@ -124,28 +110,14 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
           Repeat Password
         </Label>
 
-        <div className="relative">
-          <Input
-            id="repeated-password"
-            type={showConfirmPassword ? 'text' : 'password'}
-            className="bg-background mt-2 pr-10"
-            {...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>
+        <Input
+          id="repeated-password"
+          type="password"
+          minLength={6}
+          maxLength={72}
+          className="bg-background mt-2"
+          {...register('repeatedPassword')}
+        />
 
         <FormErrorMessage className="mt-1.5" error={errors.repeatedPassword} />
       </div>
diff --git a/apps/web/src/components/forms/signin.tsx b/apps/web/src/components/forms/signin.tsx
index f8add10c4..34b13bb2c 100644
--- a/apps/web/src/components/forms/signin.tsx
+++ b/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,28 +99,14 @@ export const SignInForm = ({ className }: SignInFormProps) => {
           Password
         </Label>
 
-        <div className="relative">
-          <Input
-            id="password"
-            type={showPassword ? 'text' : 'password'}
-            className="bg-background mt-2 pr-10"
-            {...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>
+        <Input
+          id="password"
+          type="password"
+          minLength={6}
+          maxLength={72}
+          className="bg-background mt-2"
+          {...register('password')}
+        />
 
         {errors.password && (
           <span className="mt-1 text-xs text-red-500">{errors.password.message}</span>
diff --git a/apps/web/src/components/forms/signup.tsx b/apps/web/src/components/forms/signup.tsx
index fae5d6277..0b61bb967 100644
--- a/apps/web/src/components/forms/signup.tsx
+++ b/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'}
-            className="bg-background mt-2 pr-10"
-            {...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>
+        <Input
+          id="password"
+          type="password"
+          minLength={6}
+          maxLength={72}
+          className="bg-background mt-2"
+          {...register('password')}
+        />
       </div>
 
       <div>