Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2026-07-24 08:54:20 +10:00
Code Issues Packages Projects Releases Wiki Activity

refactor: forms (#697)

Browse Source 
Updates our older forms to use the appropriate components bringing them in-line with the rest of our codebase.
This commit is contained in:
Lucas Smith
2023-12-22 14:36:00 +11:00
committed by GitHub
parent 5a5d00fb2e 1aa0fc3101
commit 495cd35f7c
13 changed files with 484 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.vscode/settings.json
Vendored
+1 -1
View File
@@ -1,7 +1,7 @@
{ {
"typescript.tsdk": "node_modules/typescript/lib", "typescript.tsdk": "node_modules/typescript/lib",
"editor.codeActionsOnSave": { "editor.codeActionsOnSave": {
"source.fixAll.eslint": true "source.fixAll.eslint": "explicit"
}, },
"eslint.validate": ["typescript", "typescriptreact", "javascript", "javascriptreact"], "eslint.validate": ["typescript", "typescriptreact", "javascript", "javascriptreact"],
"javascript.preferences.importModuleSpecifier": "non-relative", "javascript.preferences.importModuleSpecifier": "non-relative",
apps/web/src/components/forms/2fa/disable-authenticator-app-dialog.tsx
+36 -31
View File
@@ -23,6 +23,7 @@ import {
FormMessage, FormMessage,
} from '@documenso/ui/primitives/form/form'; } from '@documenso/ui/primitives/form/form';
import { Input } from '@documenso/ui/primitives/input'; import { Input } from '@documenso/ui/primitives/input';
import { PasswordInput } from '@documenso/ui/primitives/password-input';
import { useToast } from '@documenso/ui/primitives/use-toast'; import { useToast } from '@documenso/ui/primitives/use-toast';
export const ZDisableTwoFactorAuthenticationForm = z.object({ export const ZDisableTwoFactorAuthenticationForm = z.object({
@@ -107,38 +108,42 @@ export const DisableAuthenticatorAppDialog = ({
)} )}
className="flex flex-col gap-y-4" className="flex flex-col gap-y-4"
> >
<FormField <fieldset
name="password" className="flex flex-col gap-y-4"
control={disableTwoFactorAuthenticationForm.control} disabled={isDisableTwoFactorAuthenticationSubmitting}
render={({ field }) => ( >
<FormItem> <FormField
<FormLabel className="text-muted-foreground">Password</FormLabel> name="password"
<FormControl> control={disableTwoFactorAuthenticationForm.control}
<Input render={({ field }) => (
{...field} <FormItem>
type="password" <FormLabel className="text-muted-foreground">Password</FormLabel>
autoComplete="current-password" <FormControl>
value={field.value ?? ''} <PasswordInput
/> {...field}
</FormControl> autoComplete="current-password"
<FormMessage /> value={field.value ?? ''}
</FormItem> />
)} </FormControl>
/> <FormMessage />
</FormItem>
)}
/>
<FormField <FormField
name="backupCode" name="backupCode"
control={disableTwoFactorAuthenticationForm.control} control={disableTwoFactorAuthenticationForm.control}
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel className="text-muted-foreground">Backup Code</FormLabel> <FormLabel className="text-muted-foreground">Backup Code</FormLabel>
<FormControl> <FormControl>
<Input {...field} type="text" value={field.value ?? ''} /> <Input {...field} type="text" value={field.value ?? ''} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
</fieldset>
<div className="flex w-full items-center justify-between"> <div className="flex w-full items-center justify-between">
<Button type="button" variant="ghost" onClick={() => onOpenChange(false)}> <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx
+2 -2
View File
@@ -27,6 +27,7 @@ import {
FormMessage, FormMessage,
} from '@documenso/ui/primitives/form/form'; } from '@documenso/ui/primitives/form/form';
import { Input } from '@documenso/ui/primitives/input'; import { Input } from '@documenso/ui/primitives/input';
import { PasswordInput } from '@documenso/ui/primitives/password-input';
import { useToast } from '@documenso/ui/primitives/use-toast'; import { useToast } from '@documenso/ui/primitives/use-toast';
import { RecoveryCodeList } from './recovery-code-list'; import { RecoveryCodeList } from './recovery-code-list';
@@ -178,9 +179,8 @@ export const EnableAuthenticatorAppDialog = ({
<FormItem> <FormItem>
<FormLabel className="text-muted-foreground">Password</FormLabel> <FormLabel className="text-muted-foreground">Password</FormLabel>
<FormControl> <FormControl>
<Input <PasswordInput
{...field} {...field}
type="password"
autoComplete="current-password" autoComplete="current-password"
value={field.value ?? ''} value={field.value ?? ''}
/> />
apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx
+2 -3
View File
@@ -22,7 +22,7 @@ import {
FormLabel, FormLabel,
FormMessage, FormMessage,
} from '@documenso/ui/primitives/form/form'; } from '@documenso/ui/primitives/form/form';
import { Input } from '@documenso/ui/primitives/input'; import { PasswordInput } from '@documenso/ui/primitives/password-input';
import { useToast } from '@documenso/ui/primitives/use-toast'; import { useToast } from '@documenso/ui/primitives/use-toast';
import { RecoveryCodeList } from './recovery-code-list'; import { RecoveryCodeList } from './recovery-code-list';
@@ -108,9 +108,8 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
<FormItem> <FormItem>
<FormLabel className="text-muted-foreground">Password</FormLabel> <FormLabel className="text-muted-foreground">Password</FormLabel>
<FormControl> <FormControl>
<Input <PasswordInput
{...field} {...field}
type="password"
autoComplete="current-password" autoComplete="current-password"
value={field.value ?? ''} value={field.value ?? ''}
/> />
apps/web/src/components/forms/forgot-password.tsx
+37 -26
View File
@@ -9,9 +9,15 @@ import { z } from 'zod';
import { trpc } from '@documenso/trpc/react'; import { trpc } from '@documenso/trpc/react';
import { cn } from '@documenso/ui/lib/utils'; import { cn } from '@documenso/ui/lib/utils';
import { Button } from '@documenso/ui/primitives/button'; import { Button } from '@documenso/ui/primitives/button';
import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message'; import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@documenso/ui/primitives/form/form';
import { Input } from '@documenso/ui/primitives/input'; import { Input } from '@documenso/ui/primitives/input';
import { Label } from '@documenso/ui/primitives/label';
import { useToast } from '@documenso/ui/primitives/use-toast'; import { useToast } from '@documenso/ui/primitives/use-toast';
export const ZForgotPasswordFormSchema = z.object({ export const ZForgotPasswordFormSchema = z.object({
@@ -28,18 +34,15 @@ export const ForgotPasswordForm = ({ className }: ForgotPasswordFormProps) => {
const router = useRouter(); const router = useRouter();
const { toast } = useToast(); const { toast } = useToast();
const { const form = useForm<TForgotPasswordFormSchema>({
register,
handleSubmit,
reset,
formState: { errors, isSubmitting },
} = useForm<TForgotPasswordFormSchema>({
values: { values: {
email: '', email: '',
}, },
resolver: zodResolver(ZForgotPasswordFormSchema), resolver: zodResolver(ZForgotPasswordFormSchema),
}); });
const isSubmitting = form.formState.isSubmitting;
const { mutateAsync: forgotPassword } = trpc.profile.forgotPassword.useMutation(); const { mutateAsync: forgotPassword } = trpc.profile.forgotPassword.useMutation();
const onFormSubmit = async ({ email }: TForgotPasswordFormSchema) => { const onFormSubmit = async ({ email }: TForgotPasswordFormSchema) => {
@@ -52,29 +55,37 @@ export const ForgotPasswordForm = ({ className }: ForgotPasswordFormProps) => {
duration: 5000, duration: 5000,
}); });
reset(); form.reset();
router.push('/check-email'); router.push('/check-email');
}; };
return ( return (
<form <Form {...form}>
className={cn('flex w-full flex-col gap-y-4', className)} <form
onSubmit={handleSubmit(onFormSubmit)} className={cn('flex w-full flex-col gap-y-4', className)}
> onSubmit={form.handleSubmit(onFormSubmit)}
<div> >
<Label htmlFor="email" className="text-muted-foreground"> <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
Email <FormField
</Label> control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input type="email" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</fieldset>
<Input id="email" type="email" className="bg-background mt-2" {...register('email')} /> <Button size="lg" loading={isSubmitting}>
{isSubmitting ? 'Sending Reset Email...' : 'Reset Password'}
<FormErrorMessage className="mt-1.5" error={errors.email} /> </Button>
</div> </form>
</Form>
<Button size="lg" loading={isSubmitting}>
{isSubmitting ? 'Sending Reset Email...' : 'Reset Password'}
</Button>
</form>
); );
}; };
apps/web/src/components/forms/password.tsx
+60 -121
View File
@@ -1,23 +1,25 @@
'use client'; 'use client';
import { useState } from 'react';
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from '@hookform/resolvers/zod';
import { Eye, EyeOff, Loader } from 'lucide-react';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { z } from 'zod'; import { z } from 'zod';
import { User } from '@documenso/prisma/client'; import type { User } from '@documenso/prisma/client';
import { TRPCClientError } from '@documenso/trpc/client'; import { TRPCClientError } from '@documenso/trpc/client';
import { trpc } from '@documenso/trpc/react'; import { trpc } from '@documenso/trpc/react';
import { cn } from '@documenso/ui/lib/utils'; import { cn } from '@documenso/ui/lib/utils';
import { Button } from '@documenso/ui/primitives/button'; import { Button } from '@documenso/ui/primitives/button';
import { Input } from '@documenso/ui/primitives/input'; import {
import { Label } from '@documenso/ui/primitives/label'; Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@documenso/ui/primitives/form/form';
import { PasswordInput } from '@documenso/ui/primitives/password-input';
import { useToast } from '@documenso/ui/primitives/use-toast'; import { useToast } from '@documenso/ui/primitives/use-toast';
import { FormErrorMessage } from '../form/form-error-message';
export const ZPasswordFormSchema = z export const ZPasswordFormSchema = z
.object({ .object({
currentPassword: z currentPassword: z
@@ -48,16 +50,7 @@ export type PasswordFormProps = {
export const PasswordForm = ({ className }: PasswordFormProps) => { export const PasswordForm = ({ className }: PasswordFormProps) => {
const { toast } = useToast(); const { toast } = useToast();
const [showPassword, setShowPassword] = useState(false); const form = useForm<TPasswordFormSchema>({
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
const [showCurrentPassword, setShowCurrentPassword] = useState(false);
const {
register,
handleSubmit,
reset,
formState: { errors, isSubmitting },
} = useForm<TPasswordFormSchema>({
values: { values: {
currentPassword: '', currentPassword: '',
password: '', password: '',
@@ -66,6 +59,8 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
resolver: zodResolver(ZPasswordFormSchema), resolver: zodResolver(ZPasswordFormSchema),
}); });
const isSubmitting = form.formState.isSubmitting;
const { mutateAsync: updatePassword } = trpc.profile.updatePassword.useMutation(); const { mutateAsync: updatePassword } = trpc.profile.updatePassword.useMutation();
const onFormSubmit = async ({ currentPassword, password }: TPasswordFormSchema) => { const onFormSubmit = async ({ currentPassword, password }: TPasswordFormSchema) => {
@@ -75,7 +70,7 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
password, password,
}); });
reset(); form.reset();
toast({ toast({
title: 'Password updated', title: 'Password updated',
@@ -101,117 +96,61 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
}; };
return ( return (
<form <Form {...form}>
className={cn('flex w-full flex-col gap-y-4', className)} <form
onSubmit={handleSubmit(onFormSubmit)} className={cn('flex w-full flex-col gap-y-4', className)}
> onSubmit={form.handleSubmit(onFormSubmit)}
<div> >
<Label htmlFor="current-password" className="text-muted-foreground"> <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
Current Password <FormField
</Label> control={form.control}
name="currentPassword"
<div className="relative"> render={({ field }) => (
<Input <FormItem>
id="current-password" <FormLabel>Current Password</FormLabel>
type={showCurrentPassword ? 'text' : 'password'} <FormControl>
minLength={6} <PasswordInput autoComplete="current-password" {...field} />
maxLength={72} </FormControl>
autoComplete="current-password" <FormMessage />
className="bg-background mt-2 pr-10" </FormItem>
{...register('currentPassword')} )}
/> />
<Button <FormField
variant="link" control={form.control}
type="button" name="password"
className="absolute right-0 top-0 flex h-full items-center justify-center pr-3" render={({ field }) => (
aria-label={showCurrentPassword ? 'Mask password' : 'Reveal password'} <FormItem>
onClick={() => setShowCurrentPassword((show) => !show)} <FormLabel>Password</FormLabel>
> <FormControl>
{showCurrentPassword ? ( <PasswordInput autoComplete="new-password" {...field} />
<EyeOff className="text-muted-foreground h-5 w-5" /> </FormControl>
) : ( <FormMessage />
<Eye className="text-muted-foreground h-5 w-5" /> </FormItem>
)} )}
</Button>
</div>
<FormErrorMessage className="mt-1.5" error={errors.currentPassword} />
</div>
<div>
<Label htmlFor="password" className="text-muted-foreground">
Password
</Label>
<div className="relative">
<Input
id="password"
type={showPassword ? 'text' : 'password'}
minLength={6}
maxLength={72}
autoComplete="new-password"
className="bg-background mt-2 pr-10"
{...register('password')}
/> />
<Button <FormField
variant="link" control={form.control}
type="button" name="repeatedPassword"
className="absolute right-0 top-0 flex h-full items-center justify-center pr-3" render={({ field }) => (
aria-label={showPassword ? 'Mask password' : 'Reveal password'} <FormItem>
onClick={() => setShowPassword((show) => !show)} <FormLabel>Repeat Password</FormLabel>
> <FormControl>
{showPassword ? ( <PasswordInput autoComplete="new-password" {...field} />
<EyeOff className="text-muted-foreground h-5 w-5" /> </FormControl>
) : ( <FormMessage />
<Eye className="text-muted-foreground h-5 w-5" /> </FormItem>
)} )}
</Button>
</div>
<FormErrorMessage className="mt-1.5" error={errors.password} />
</div>
<div>
<Label htmlFor="repeated-password" className="text-muted-foreground">
Repeat Password
</Label>
<div className="relative">
<Input
id="repeated-password"
type={showConfirmPassword ? 'text' : 'password'}
minLength={6}
maxLength={72}
autoComplete="new-password"
className="bg-background mt-2 pr-10"
{...register('repeatedPassword')}
/> />
</fieldset>
<Button <div className="mt-4">
variant="link" <Button type="submit" loading={isSubmitting}>
type="button" {isSubmitting ? 'Updating password...' : 'Update password'}
className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
aria-label={showConfirmPassword ? 'Mask password' : 'Reveal password'}
onClick={() => setShowConfirmPassword((show) => !show)}
>
{showConfirmPassword ? (
<EyeOff className="text-muted-foreground h-5 w-5" />
) : (
<Eye className="text-muted-foreground h-5 w-5" />
)}
</Button> </Button>
</div> </div>
</form>
<FormErrorMessage className="mt-1.5" error={errors.repeatedPassword} /> </Form>
</div>
<div className="mt-4">
<Button type="submit" disabled={isSubmitting}>
{isSubmitting && <Loader className="mr-2 h-5 w-5 animate-spin" />}
Update password
</Button>
</div>
</form>
); );
}; };
apps/web/src/components/forms/profile.tsx
+61 -58
View File
@@ -3,22 +3,27 @@
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from '@hookform/resolvers/zod';
import { Loader } from 'lucide-react'; import { useForm } from 'react-hook-form';
import { Controller, useForm } from 'react-hook-form';
import { z } from 'zod'; import { z } from 'zod';
import { User } from '@documenso/prisma/client'; import type { User } from '@documenso/prisma/client';
import { TRPCClientError } from '@documenso/trpc/client'; import { TRPCClientError } from '@documenso/trpc/client';
import { trpc } from '@documenso/trpc/react'; import { trpc } from '@documenso/trpc/react';
import { cn } from '@documenso/ui/lib/utils'; import { cn } from '@documenso/ui/lib/utils';
import { Button } from '@documenso/ui/primitives/button'; import { Button } from '@documenso/ui/primitives/button';
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@documenso/ui/primitives/form/form';
import { Input } from '@documenso/ui/primitives/input'; import { Input } from '@documenso/ui/primitives/input';
import { Label } from '@documenso/ui/primitives/label'; import { Label } from '@documenso/ui/primitives/label';
import { SignaturePad } from '@documenso/ui/primitives/signature-pad'; import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
import { useToast } from '@documenso/ui/primitives/use-toast'; import { useToast } from '@documenso/ui/primitives/use-toast';
import { FormErrorMessage } from '../form/form-error-message';
export const ZProfileFormSchema = z.object({ export const ZProfileFormSchema = z.object({
name: z.string().trim().min(1, { message: 'Please enter a valid name.' }), name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
signature: z.string().min(1, 'Signature Pad cannot be empty'), signature: z.string().min(1, 'Signature Pad cannot be empty'),
@@ -36,12 +41,7 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
const { toast } = useToast(); const { toast } = useToast();
const { const form = useForm<TProfileFormSchema>({
register,
control,
handleSubmit,
formState: { errors, isSubmitting },
} = useForm<TProfileFormSchema>({
values: { values: {
name: user.name ?? '', name: user.name ?? '',
signature: user.signature || '', signature: user.signature || '',
@@ -49,6 +49,8 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
resolver: zodResolver(ZProfileFormSchema), resolver: zodResolver(ZProfileFormSchema),
}); });
const isSubmitting = form.formState.isSubmitting;
const { mutateAsync: updateProfile } = trpc.profile.updateProfile.useMutation(); const { mutateAsync: updateProfile } = trpc.profile.updateProfile.useMutation();
const onFormSubmit = async ({ name, signature }: TProfileFormSchema) => { const onFormSubmit = async ({ name, signature }: TProfileFormSchema) => {
@@ -84,56 +86,57 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
}; };
return ( return (
<form <Form {...form}>
className={cn('flex w-full flex-col gap-y-4', className)} <form
onSubmit={handleSubmit(onFormSubmit)} className={cn('flex w-full flex-col gap-y-4', className)}
> onSubmit={form.handleSubmit(onFormSubmit)}
<div> >
<Label htmlFor="full-name" className="text-muted-foreground"> <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
Full Name <FormField
</Label> control={form.control}
name="name"
<Input id="full-name" type="text" className="bg-background mt-2" {...register('name')} /> render={({ field }) => (
<FormItem>
<FormErrorMessage className="mt-1.5" error={errors.name} /> <FormLabel>Full Name</FormLabel>
</div> <FormControl>
<Input type="text" {...field} />
<div> </FormControl>
<Label htmlFor="email" className="text-muted-foreground"> <FormMessage />
Email </FormItem>
</Label>
<Input id="email" type="email" className="bg-muted mt-2" value={user.email} disabled />
</div>
<div>
<Label htmlFor="signature" className="text-muted-foreground">
Signature
</Label>
<div className="mt-2">
<Controller
control={control}
name="signature"
render={({ field: { onChange } }) => (
<SignaturePad
className="h-44 w-full"
containerClassName="rounded-lg border bg-background"
defaultValue={user.signature ?? undefined}
onChange={(v) => onChange(v ?? '')}
/>
)} )}
/> />
<FormErrorMessage className="mt-1.5" error={errors.signature} />
</div>
</div>
<div className="mt-4"> <div>
<Button type="submit" disabled={isSubmitting}> <Label htmlFor="email" className="text-muted-foreground">
{isSubmitting && <Loader className="mr-2 h-5 w-5 animate-spin" />} Email
Update profile </Label>
<Input id="email" type="email" className="bg-muted mt-2" value={user.email} disabled />
</div>
<FormField
control={form.control}
name="signature"
render={({ field: { onChange } }) => (
<FormItem>
<FormLabel>Signature</FormLabel>
<FormControl>
<SignaturePad
className="h-44 w-full"
containerClassName="rounded-lg border bg-background"
defaultValue={user.signature ?? undefined}
onChange={(v) => onChange(v ?? '')}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</fieldset>
<Button type="submit" loading={isSubmitting}>
{isSubmitting ? 'Updating profile...' : 'Update profile'}
</Button> </Button>
</div> </form>
</form> </Form>
); );
}; };
apps/web/src/components/forms/reset-password.tsx
+48 -87
View File
@@ -1,11 +1,8 @@
'use client'; 'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from '@hookform/resolvers/zod';
import { Eye, EyeOff } from 'lucide-react';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { z } from 'zod'; import { z } from 'zod';
@@ -13,9 +10,15 @@ import { TRPCClientError } from '@documenso/trpc/client';
import { trpc } from '@documenso/trpc/react'; import { trpc } from '@documenso/trpc/react';
import { cn } from '@documenso/ui/lib/utils'; import { cn } from '@documenso/ui/lib/utils';
import { Button } from '@documenso/ui/primitives/button'; import { Button } from '@documenso/ui/primitives/button';
import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message'; import {
import { Input } from '@documenso/ui/primitives/input'; Form,
import { Label } from '@documenso/ui/primitives/label'; FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@documenso/ui/primitives/form/form';
import { PasswordInput } from '@documenso/ui/primitives/password-input';
import { useToast } from '@documenso/ui/primitives/use-toast'; import { useToast } from '@documenso/ui/primitives/use-toast';
export const ZResetPasswordFormSchema = z export const ZResetPasswordFormSchema = z
@@ -40,15 +43,7 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
const { toast } = useToast(); const { toast } = useToast();
const [showPassword, setShowPassword] = useState(false); const form = useForm<TResetPasswordFormSchema>({
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
const {
register,
reset,
handleSubmit,
formState: { errors, isSubmitting },
} = useForm<TResetPasswordFormSchema>({
values: { values: {
password: '', password: '',
repeatedPassword: '', repeatedPassword: '',
@@ -56,6 +51,8 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
resolver: zodResolver(ZResetPasswordFormSchema), resolver: zodResolver(ZResetPasswordFormSchema),
}); });
const isSubmitting = form.formState.isSubmitting;
const { mutateAsync: resetPassword } = trpc.profile.resetPassword.useMutation(); const { mutateAsync: resetPassword } = trpc.profile.resetPassword.useMutation();
const onFormSubmit = async ({ password }: Omit<TResetPasswordFormSchema, 'repeatedPassword'>) => { const onFormSubmit = async ({ password }: Omit<TResetPasswordFormSchema, 'repeatedPassword'>) => {
@@ -65,7 +62,7 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
token, token,
}); });
reset(); form.reset();
toast({ toast({
title: 'Password updated', title: 'Password updated',
@@ -93,81 +90,45 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
}; };
return ( return (
<form <Form {...form}>
className={cn('flex w-full flex-col gap-y-4', className)} <form
onSubmit={handleSubmit(onFormSubmit)} className={cn('flex w-full flex-col gap-y-4', className)}
> onSubmit={form.handleSubmit(onFormSubmit)}
<div> >
<Label htmlFor="password" className="text-muted-foreground"> <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
<span>Password</span> <FormField
</Label> control={form.control}
name="password"
<div className="relative"> render={({ field }) => (
<Input <FormItem>
id="password" <FormLabel>Password</FormLabel>
type={showPassword ? 'text' : 'password'} <FormControl>
minLength={6} <PasswordInput {...field} />
maxLength={72} </FormControl>
autoComplete="new-password" <FormMessage />
className="bg-background mt-2 pr-10" </FormItem>
{...register('password')} )}
/> />
<Button <FormField
variant="link" control={form.control}
type="button" name="repeatedPassword"
className="absolute right-0 top-0 flex h-full items-center justify-center pr-3" render={({ field }) => (
aria-label={showPassword ? 'Mask password' : 'Reveal password'} <FormItem>
onClick={() => setShowPassword((show) => !show)} <FormLabel>Repeat Password</FormLabel>
> <FormControl>
{showPassword ? ( <PasswordInput {...field} />
<EyeOff className="text-muted-foreground h-5 w-5" /> </FormControl>
) : ( <FormMessage />
<Eye className="text-muted-foreground h-5 w-5" /> </FormItem>
)} )}
</Button>
</div>
<FormErrorMessage className="mt-1.5" error={errors.password} />
</div>
<div>
<Label htmlFor="repeatedPassword" className="text-muted-foreground">
<span>Repeat Password</span>
</Label>
<div className="relative">
<Input
id="repeated-password"
type={showConfirmPassword ? 'text' : 'password'}
minLength={6}
maxLength={72}
autoComplete="new-password"
className="bg-background mt-2 pr-10"
{...register('repeatedPassword')}
/> />
</fieldset>
<Button <Button type="submit" size="lg" loading={isSubmitting}>
variant="link" {isSubmitting ? 'Resetting Password...' : 'Reset Password'}
type="button" </Button>
className="absolute right-0 top-0 flex h-full items-center justify-center pr-3" </form>
aria-label={showConfirmPassword ? 'Mask password' : 'Reveal password'} </Form>
onClick={() => setShowConfirmPassword((show) => !show)}
>
{showConfirmPassword ? (
<EyeOff className="text-muted-foreground h-5 w-5" />
) : (
<Eye className="text-muted-foreground h-5 w-5" />
)}
</Button>
</div>
<FormErrorMessage className="mt-1.5" error={errors.repeatedPassword} />
</div>
<Button size="lg" loading={isSubmitting}>
{isSubmitting ? 'Resetting Password...' : 'Reset Password'}
</Button>
</form>
); );
}; };
apps/web/src/components/forms/signin.tsx
+108 -101
View File
@@ -12,9 +12,16 @@ import { ErrorCode, isErrorCode } from '@documenso/lib/next-auth/error-codes';
import { cn } from '@documenso/ui/lib/utils'; import { cn } from '@documenso/ui/lib/utils';
import { Button } from '@documenso/ui/primitives/button'; import { Button } from '@documenso/ui/primitives/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@documenso/ui/primitives/dialog'; import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@documenso/ui/primitives/dialog';
import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message'; import {
import { Input, PasswordInput } from '@documenso/ui/primitives/input'; Form,
import { Label } from '@documenso/ui/primitives/label'; FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@documenso/ui/primitives/form/form';
import { Input } from '@documenso/ui/primitives/input';
import { PasswordInput } from '@documenso/ui/primitives/password-input';
import { useToast } from '@documenso/ui/primitives/use-toast'; import { useToast } from '@documenso/ui/primitives/use-toast';
const ERROR_MESSAGES: Partial<Record<keyof typeof ErrorCode, string>> = { const ERROR_MESSAGES: Partial<Record<keyof typeof ErrorCode, string>> = {
@@ -52,12 +59,7 @@ export const SignInForm = ({ className }: SignInFormProps) => {
'totp' | 'backup' 'totp' | 'backup'
>('totp'); >('totp');
const { const form = useForm<TSignInFormSchema>({
register,
handleSubmit,
setValue,
formState: { errors, isSubmitting },
} = useForm<TSignInFormSchema>({
values: { values: {
email: '', email: '',
password: '', password: '',
@@ -67,9 +69,11 @@ export const SignInForm = ({ className }: SignInFormProps) => {
resolver: zodResolver(ZSignInFormSchema), resolver: zodResolver(ZSignInFormSchema),
}); });
const isSubmitting = form.formState.isSubmitting;
const onCloseTwoFactorAuthenticationDialog = () => { const onCloseTwoFactorAuthenticationDialog = () => {
setValue('totpCode', ''); form.setValue('totpCode', '');
setValue('backupCode', ''); form.setValue('backupCode', '');
setIsTwoFactorAuthenticationDialogOpen(false); setIsTwoFactorAuthenticationDialogOpen(false);
}; };
@@ -78,11 +82,11 @@ export const SignInForm = ({ className }: SignInFormProps) => {
const method = twoFactorAuthenticationMethod === 'totp' ? 'backup' : 'totp'; const method = twoFactorAuthenticationMethod === 'totp' ? 'backup' : 'totp';
if (method === 'totp') { if (method === 'totp') {
setValue('backupCode', ''); form.setValue('backupCode', '');
} }
if (method === 'backup') { if (method === 'backup') {
setValue('totpCode', ''); form.setValue('totpCode', '');
} }
setTwoFactorAuthenticationMethod(method); setTwoFactorAuthenticationMethod(method);
@@ -113,7 +117,6 @@ export const SignInForm = ({ className }: SignInFormProps) => {
if (result?.error && isErrorCode(result.error)) { if (result?.error && isErrorCode(result.error)) {
if (result.error === TwoFactorEnabledErrorCode) { if (result.error === TwoFactorEnabledErrorCode) {
setIsTwoFactorAuthenticationDialogOpen(true); setIsTwoFactorAuthenticationDialogOpen(true);
return; return;
} }
@@ -156,64 +159,68 @@ export const SignInForm = ({ className }: SignInFormProps) => {
}; };
return ( return (
<form <Form {...form}>
className={cn('flex w-full flex-col gap-y-4', className)} <form
onSubmit={handleSubmit(onFormSubmit)} className={cn('flex w-full flex-col gap-y-4', className)}
> onSubmit={form.handleSubmit(onFormSubmit)}
<div>
<Label htmlFor="email" className="text-muted-forground">
Email
</Label>
<Input id="email" type="email" className="bg-background mt-2" {...register('email')} />
<FormErrorMessage className="mt-1.5" error={errors.email} />
</div>
<div>
<Label htmlFor="password" className="text-muted-forground">
<span>Password</span>
</Label>
<PasswordInput
id="password"
minLength={6}
maxLength={72}
className="bg-background mt-2"
autoComplete="current-password"
{...register('password')}
/>
<FormErrorMessage className="mt-1.5" error={errors.password} />
</div>
<Button
size="lg"
loading={isSubmitting}
disabled={isSubmitting}
className="dark:bg-documenso dark:hover:opacity-90"
> >
{isSubmitting ? 'Signing in...' : 'Sign In'} <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
</Button> <FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input type="email" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase"> <FormField
<div className="bg-border h-px flex-1" /> control={form.control}
<span className="text-muted-foreground bg-transparent">Or continue with</span> name="password"
<div className="bg-border h-px flex-1" /> render={({ field }) => (
</div> <FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<PasswordInput {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</fieldset>
<Button <Button
type="button" type="submit"
size="lg" size="lg"
variant={'outline'} loading={isSubmitting}
className="bg-background text-muted-foreground border" className="dark:bg-documenso dark:hover:opacity-90"
disabled={isSubmitting} >
onClick={onSignInWithGoogleClick} {isSubmitting ? 'Signing in...' : 'Sign In'}
> </Button>
<FcGoogle className="mr-2 h-5 w-5" />
Google
</Button>
<div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
<div className="bg-border h-px flex-1" />
<span className="text-muted-foreground bg-transparent">Or continue with</span>
<div className="bg-border h-px flex-1" />
</div>
<Button
type="button"
size="lg"
variant={'outline'}
className="bg-background text-muted-foreground border"
disabled={isSubmitting}
onClick={onSignInWithGoogleClick}
>
<FcGoogle className="mr-2 h-5 w-5" />
Google
</Button>
</form>
<Dialog <Dialog
open={isTwoFactorAuthenticationDialogOpen} open={isTwoFactorAuthenticationDialogOpen}
onOpenChange={onCloseTwoFactorAuthenticationDialog} onOpenChange={onCloseTwoFactorAuthenticationDialog}
@@ -223,40 +230,40 @@ export const SignInForm = ({ className }: SignInFormProps) => {
<DialogTitle>Two-Factor Authentication</DialogTitle> <DialogTitle>Two-Factor Authentication</DialogTitle>
</DialogHeader> </DialogHeader>
<form onSubmit={handleSubmit(onFormSubmit)}> <form onSubmit={form.handleSubmit(onFormSubmit)}>
{twoFactorAuthenticationMethod === 'totp' && ( <fieldset disabled={isSubmitting}>
<div> {twoFactorAuthenticationMethod === 'totp' && (
<Label htmlFor="totpCode" className="text-muted-forground"> <FormField
Authentication Token control={form.control}
</Label> name="totpCode"
render={({ field }) => (
<Input <FormItem>
id="totpCode" <FormLabel>Authentication Token</FormLabel>
type="text" <FormControl>
className="bg-background mt-2" <Input type="text" {...field} />
{...register('totpCode')} </FormControl>
<FormMessage />
</FormItem>
)}
/> />
)}
<FormErrorMessage className="mt-1.5" error={errors.totpCode} /> {twoFactorAuthenticationMethod === 'backup' && (
</div> <FormField
)} control={form.control}
name="backupCode"
{twoFactorAuthenticationMethod === 'backup' && ( render={({ field }) => (
<div> <FormItem>
<Label htmlFor="backupCode" className="text-muted-forground"> <FormLabel> Backup Code</FormLabel>
Backup Code <FormControl>
</Label> <Input type="text" {...field} />
</FormControl>
<Input <FormMessage />
id="backupCode" </FormItem>
type="text" )}
className="bg-background mt-2"
{...register('backupCode')}
/> />
)}
<FormErrorMessage className="mt-1.5" error={errors.backupCode} /> </fieldset>
</div>
)}
<div className="mt-4 flex items-center justify-between"> <div className="mt-4 flex items-center justify-between">
<Button <Button
@@ -268,12 +275,12 @@ export const SignInForm = ({ className }: SignInFormProps) => {
</Button> </Button>
<Button type="submit" loading={isSubmitting}> <Button type="submit" loading={isSubmitting}>
Sign In {isSubmitting ? 'Signing in...' : 'Sign In'}
</Button> </Button>
</div> </div>
</form> </form>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</form> </Form>
); );
}; };
apps/web/src/components/forms/signup.tsx
+81 -91
View File
@@ -1,11 +1,8 @@
'use client'; 'use client';
import { useState } from 'react';
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from '@hookform/resolvers/zod';
import { Eye, EyeOff } from 'lucide-react';
import { signIn } from 'next-auth/react'; import { signIn } from 'next-auth/react';
import { Controller, useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { z } from 'zod'; import { z } from 'zod';
import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics'; import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
@@ -13,9 +10,16 @@ import { TRPCClientError } from '@documenso/trpc/client';
import { trpc } from '@documenso/trpc/react'; import { trpc } from '@documenso/trpc/react';
import { cn } from '@documenso/ui/lib/utils'; import { cn } from '@documenso/ui/lib/utils';
import { Button } from '@documenso/ui/primitives/button'; import { Button } from '@documenso/ui/primitives/button';
import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message'; import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@documenso/ui/primitives/form/form';
import { Input } from '@documenso/ui/primitives/input'; import { Input } from '@documenso/ui/primitives/input';
import { Label } from '@documenso/ui/primitives/label'; import { PasswordInput } from '@documenso/ui/primitives/password-input';
import { SignaturePad } from '@documenso/ui/primitives/signature-pad'; import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
import { useToast } from '@documenso/ui/primitives/use-toast'; import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -38,14 +42,8 @@ export type SignUpFormProps = {
export const SignUpForm = ({ className }: SignUpFormProps) => { export const SignUpForm = ({ className }: SignUpFormProps) => {
const { toast } = useToast(); const { toast } = useToast();
const analytics = useAnalytics(); const analytics = useAnalytics();
const [showPassword, setShowPassword] = useState(false);
const { const form = useForm<TSignUpFormSchema>({
control,
register,
handleSubmit,
formState: { errors, isSubmitting },
} = useForm<TSignUpFormSchema>({
values: { values: {
name: '', name: '',
email: '', email: '',
@@ -55,6 +53,8 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
resolver: zodResolver(ZSignUpFormSchema), resolver: zodResolver(ZSignUpFormSchema),
}); });
const isSubmitting = form.formState.isSubmitting;
const { mutateAsync: signup } = trpc.auth.signup.useMutation(); const { mutateAsync: signup } = trpc.auth.signup.useMutation();
const onFormSubmit = async ({ name, email, password, signature }: TSignUpFormSchema) => { const onFormSubmit = async ({ name, email, password, signature }: TSignUpFormSchema) => {
@@ -90,93 +90,83 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
}; };
return ( return (
<form <Form {...form}>
className={cn('flex w-full flex-col gap-y-4', className)} <form
onSubmit={handleSubmit(onFormSubmit)} className={cn('flex w-full flex-col gap-y-4', className)}
> onSubmit={form.handleSubmit(onFormSubmit)}
<div> >
<Label htmlFor="name" className="text-muted-foreground"> <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
Name <FormField
</Label> control={form.control}
name="name"
<Input id="name" type="text" className="bg-background mt-2" {...register('name')} /> render={({ field }) => (
<FormItem>
{errors.name && <span className="mt-1 text-xs text-red-500">{errors.name.message}</span>} <FormLabel>Name</FormLabel>
</div> <FormControl>
<Input type="text" {...field} />
<div> </FormControl>
<Label htmlFor="email" className="text-muted-foreground"> <FormMessage />
Email </FormItem>
</Label> )}
<Input id="email" type="email" className="bg-background mt-2" {...register('email')} />
{errors.email && <span className="mt-1 text-xs text-red-500">{errors.email.message}</span>}
</div>
<div>
<Label htmlFor="password" className="text-muted-foreground">
Password
</Label>
<div className="relative">
<Input
id="password"
type={showPassword ? 'text' : 'password'}
minLength={6}
maxLength={72}
autoComplete="new-password"
className="bg-background mt-2 pr-10"
{...register('password')}
/> />
<Button <FormField
variant="link" control={form.control}
type="button" name="email"
className="absolute right-0 top-0 flex h-full items-center justify-center pr-3" render={({ field }) => (
aria-label={showPassword ? 'Mask password' : 'Reveal password'} <FormItem>
onClick={() => setShowPassword((show) => !show)} <FormLabel>Email</FormLabel>
> <FormControl>
{showPassword ? ( <Input type="email" {...field} />
<EyeOff className="text-muted-foreground h-5 w-5" /> </FormControl>
) : ( <FormMessage />
<Eye className="text-muted-foreground h-5 w-5" /> </FormItem>
)} )}
</Button> />
</div>
<FormErrorMessage className="mt-1.5" error={errors.password} />
</div>
<div> <FormField
<Label htmlFor="password" className="text-muted-foreground"> control={form.control}
Sign Here name="password"
</Label> render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<PasswordInput {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div> <FormField
<Controller control={form.control}
control={control}
name="signature" name="signature"
render={({ field: { onChange } }) => ( render={({ field: { onChange } }) => (
<SignaturePad <FormItem>
className="h-36 w-full" <FormLabel>Sign Here</FormLabel>
containerClassName="mt-2 rounded-lg border bg-background" <FormControl>
onChange={(v) => onChange(v ?? '')} <SignaturePad
/> className="h-36 w-full"
containerClassName="mt-2 rounded-lg border bg-background"
onChange={(v) => onChange(v ?? '')}
/>
</FormControl>
<FormMessage />
</FormItem>
)} )}
/> />
</div> </fieldset>
<FormErrorMessage className="mt-1.5" error={errors.signature} /> <Button
</div> type="submit"
size="lg"
<Button loading={isSubmitting}
size="lg" className="dark:bg-documenso dark:hover:opacity-90"
loading={isSubmitting} >
disabled={isSubmitting} {isSubmitting ? 'Signing up...' : 'Sign Up'}
className="dark:bg-documenso dark:hover:opacity-90" </Button>
> </form>
{isSubmitting ? 'Signing up...' : 'Sign Up'} </Form>
</Button>
</form>
); );
}; };
packages/ui/primitives/button.tsx
+5 -4
View File
@@ -1,7 +1,8 @@
import * as React from 'react'; import * as React from 'react';
import { Slot } from '@radix-ui/react-slot'; import { Slot } from '@radix-ui/react-slot';
import { VariantProps, cva } from 'class-variance-authority'; import type { VariantProps } from 'class-variance-authority';
import { cva } from 'class-variance-authority';
import { Loader } from 'lucide-react'; import { Loader } from 'lucide-react';
import { cn } from '../lib/utils'; import { cn } from '../lib/utils';
@@ -63,8 +64,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
); );
} }
const showLoader = loading === true; const isLoading = loading === true;
const isDisabled = props.disabled || showLoader; const isDisabled = props.disabled || isLoading;
return ( return (
<button <button
@@ -73,7 +74,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
{...props} {...props}
disabled={isDisabled} disabled={isDisabled}
> >
{showLoader && <Loader className={cn('mr-2 animate-spin', loaderVariants({ size }))} />} {isLoading && <Loader className={cn('mr-2 animate-spin', loaderVariants({ size }))} />}
{props.children} {props.children}
</button> </button>
); );
packages/ui/primitives/input.tsx
+1 -38
View File
@@ -1,9 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import { Eye, EyeOff } from 'lucide-react';
import { cn } from '../lib/utils'; import { cn } from '../lib/utils';
import { Button } from './button';
export type InputProps = React.InputHTMLAttributes<HTMLInputElement>; export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
@@ -28,38 +25,4 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
Input.displayName = 'Input'; Input.displayName = 'Input';
const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>( export { Input };
({ className, ...props }, ref) => {
const [showPassword, setShowPassword] = React.useState(false);
return (
<div className="relative">
<Input
id="password"
type={showPassword ? 'text' : 'password'}
className={cn('pr-10', className)}
ref={ref}
{...props}
/>
<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((show) => !show)}
>
{showPassword ? (
<EyeOff aria-hidden className="text-muted-foreground h-5 w-5" />
) : (
<Eye aria-hidden className="text-muted-foreground h-5 w-5" />
)}
</Button>
</div>
);
},
);
PasswordInput.displayName = 'Input';
export { Input, PasswordInput };
packages/ui/primitives/password-input.tsx
+42
View File
@@ -0,0 +1,42 @@
import * as React from 'react';
import { Eye, EyeOff } from 'lucide-react';
import { cn } from '../lib/utils';
import { Button } from './button';
import { Input, InputProps } from './input';
const PasswordInput = React.forwardRef<HTMLInputElement, Omit<InputProps, 'type'>>(
({ className, ...props }, ref) => {
const [showPassword, setShowPassword] = React.useState(false);
return (
<div className="relative">
<Input
type={showPassword ? 'text' : 'password'}
className={cn('pr-10', className)}
ref={ref}
{...props}
/>
<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((show) => !show)}
>
{showPassword ? (
<EyeOff aria-hidden className="text-muted-foreground h-5 w-5" />
) : (
<Eye aria-hidden className="text-muted-foreground h-5 w-5" />
)}
</Button>
</div>
);
},
);
PasswordInput.displayName = 'PasswordInput';
export { PasswordInput };