blsmedia/sign
2
0
Fork 0
Code Issues Packages Releases Activity

feat: set min/max lengths for password

Browse Source
This commit is contained in:
nsylke
2023-08-26 09:53:58 -05:00
committed by Mythie
parent 289e3776fd
commit b97a0380df
3 changed files with 36 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
apps/web/src/components/forms/password.tsx
View File

@@ -20,8 +20,8 @@ import { FormErrorMessage } from '../form/form-error-message';
export const ZPasswordFormSchema = z export const ZPasswordFormSchema = z
.object({ .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, { .refine((data) => data.password === data.repeatedPassword, {
message: 'Passwords do not match', message: 'Passwords do not match',
@@ -93,28 +93,14 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
Password Password
</Label> </Label>
<div className="relative"> <Input
<Input id="password"
id="password" type="password"
type={showPassword ? 'text' : 'password'} minLength={6}
className="bg-background mt-2 pr-10" maxLength={72}
{...register('password')} 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} /> <FormErrorMessage className="mt-1.5" error={errors.password} />
</div> </div>
@@ -124,28 +110,14 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
Repeat Password Repeat Password
</Label> </Label>
<div className="relative"> <Input
<Input id="repeated-password"
id="repeated-password" type="password"
type={showConfirmPassword ? 'text' : 'password'} minLength={6}
className="bg-background mt-2 pr-10" maxLength={72}
{...register('repeatedPassword')} 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} /> <FormErrorMessage className="mt-1.5" error={errors.repeatedPassword} />
</div> </div>

32
apps/web/src/components/forms/signin.tsx
View File

@@ -17,7 +17,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
export const ZSignInFormSchema = z.object({ export const ZSignInFormSchema = z.object({
email: z.string().email().min(1), 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>; export type TSignInFormSchema = z.infer<typeof ZSignInFormSchema>;
@@ -99,28 +99,14 @@ export const SignInForm = ({ className }: SignInFormProps) => {
Password Password
</Label> </Label>
<div className="relative"> <Input
<Input id="password"
id="password" type="password"
type={showPassword ? 'text' : 'password'} minLength={6}
className="bg-background mt-2 pr-10" maxLength={72}
{...register('password')} 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 && ( {errors.password && (
<span className="mt-1 text-xs text-red-500">{errors.password.message}</span> <span className="mt-1 text-xs text-red-500">{errors.password.message}</span>

32
apps/web/src/components/forms/signup.tsx
View File

@@ -20,7 +20,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
export const ZSignUpFormSchema = z.object({ export const ZSignUpFormSchema = z.object({
name: z.string().min(1), name: z.string().min(1),
email: z.string().email().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>; export type TSignUpFormSchema = z.infer<typeof ZSignUpFormSchema>;
@@ -105,28 +105,14 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
Password Password
</Label> </Label>
<div className="relative"> <Input
<Input id="password"
id="password" type="password"
type={showPassword ? 'text' : 'password'} minLength={6}
className="bg-background mt-2 pr-10" maxLength={72}
{...register('password')} 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>
<div> <div>