Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-10 04:22:32 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: added show password feature

Browse Source 
Signed-off-by: Adithya Krishna <adikrish@redhat.com>
This commit is contained in:
Adithya Krishna
2023-08-26 12:31:40 +05:30
committed by Mythie
parent 0cc05052fa
commit b733defcd9
3 changed files with 117 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,9 @@
'use client';
import { useState } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { Loader } from 'lucide-react';
import { Eye, EyeOff, Loader } from 'lucide-react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
@ -35,6 +37,8 @@ export type PasswordFormProps = {
export const PasswordForm = ({ className }: PasswordFormProps) => {
const { toast } = useToast();
const [showPassword, setShowPassword] = useState(false);
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
const {
register,
@ -79,6 +83,14 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
}
};
const onShowPassword = () => {
setShowPassword(!showPassword);
};
const onShowConfirmPassword = () => {
setShowConfirmPassword(!showConfirmPassword);
};
return (
<form
className={cn('flex w-full flex-col gap-y-4', className)}
@ -89,12 +101,28 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
Password
</Label>
<Input
id="password"
type="password"
className="bg-background mt-2"
{...register('password')}
/>
<div className="relative">
<Input
id="password"
type={showPassword ? 'text' : '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"
aria-label={showPassword ? 'Mask password' : 'Reveal password'}
onClick={onShowPassword}
>
{showPassword ? (
<EyeOff className="text-slate-500" />
) : (
<Eye className="text-slate-500" />
)}
</Button>
</div>
<FormErrorMessage className="mt-1.5" error={errors.password} />
</div>
@ -104,12 +132,28 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
Repeat Password
</Label>
<Input
id="repeated-password"
type="password"
className="bg-background mt-2"
{...register('repeatedPassword')}
/>
<div className="relative">
<Input
id="repeated-password"
type={showConfirmPassword ? 'text' : 'password'}
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"
aria-label={showConfirmPassword ? 'Mask password' : 'Reveal password'}
onClick={onShowConfirmPassword}
>
{showConfirmPassword ? (
<EyeOff className="text-slate-500" />
) : (
<Eye className="text-slate-500" />
)}
</Button>
</div>
<FormErrorMessage className="mt-1.5" error={errors.repeatedPassword} />
</div>

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

@ -1,7 +1,9 @@
'use client';
import { useState } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { Loader } from 'lucide-react';
import { Eye, EyeOff, Loader } from 'lucide-react';
import { signIn } from 'next-auth/react';
import { useForm } from 'react-hook-form';
import { FcGoogle } from 'react-icons/fc';
@ -26,6 +28,7 @@ export type SignInFormProps = {
export const SignInForm = ({ className }: SignInFormProps) => {
const { toast } = useToast();
const [showPassword, setShowPassword] = useState(false);
const {
register,
@ -73,6 +76,10 @@ export const SignInForm = ({ className }: SignInFormProps) => {
}
};
const onShowPassword = () => {
setShowPassword(!showPassword);
};
return (
<form
className={cn('flex w-full flex-col gap-y-4', className)}
@ -96,12 +103,28 @@ export const SignInForm = ({ className }: SignInFormProps) => {
Password
</Label>
<Input
id="password"
type="password"
className="bg-background mt-2"
{...register('password')}
/>
<div className="relative">
<Input
id="password"
type={showPassword ? 'text' : '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"
aria-label={showPassword ? 'Mask password' : 'Reveal password'}
onClick={onShowPassword}
>
{showPassword ? (
<EyeOff className="text-slate-500" />
) : (
<Eye className="text-slate-500" />
)}
</Button>
</div>
{errors.password && (
<span className="mt-1 text-xs text-red-500">{errors.password.message}</span>

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

@ -1,7 +1,9 @@
'use client';
import { useState } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { Loader } from 'lucide-react';
import { Eye, EyeOff, Loader } from 'lucide-react';
import { signIn } from 'next-auth/react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
@ -29,6 +31,7 @@ export type SignUpFormProps = {
export const SignUpForm = ({ className }: SignUpFormProps) => {
const { toast } = useToast();
const [showPassword, setShowPassword] = useState(false);
const {
register,
@ -72,6 +75,10 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
}
};
const onShowPassword = () => {
setShowPassword(!showPassword);
};
return (
<form
className={cn('flex w-full flex-col gap-y-4', className)}
@ -102,12 +109,28 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
Password
</Label>
<Input
id="password"
type="password"
className="bg-background mt-2"
{...register('password')}
/>
<div className="relative">
<Input
id="password"
type={showPassword ? 'text' : '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"
aria-label={showPassword ? 'Mask password' : 'Reveal password'}
onClick={onShowPassword}
>
{showPassword ? (
<EyeOff className="text-slate-500" />
) : (
<Eye className="text-slate-500" />
)}
</Button>
</div>
</div>
<div>