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

refactor: forms

Browse Source
This commit is contained in:
nafees nazik
2023-11-30 15:55:29 +05:30
parent 231a307b89
commit 6bbeaa084c
6 changed files with 259 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
apps/web/src/components/forms/forgot-password.tsx
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} loadingText="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>
); );
}; };

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

@ -1,7 +1,6 @@
'use client'; 'use client';
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from '@hookform/resolvers/zod';
import { Loader } from 'lucide-react';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { z } from 'zod'; import { z } from 'zod';
@ -102,51 +101,52 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
className={cn('flex w-full flex-col gap-y-4', className)} className={cn('flex w-full flex-col gap-y-4', className)}
onSubmit={form.handleSubmit(onFormSubmit)} onSubmit={form.handleSubmit(onFormSubmit)}
> >
<FormField <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
control={form.control} <FormField
name="currentPassword" control={form.control}
render={({ field }) => ( name="currentPassword"
<FormItem> render={({ field }) => (
<FormLabel>Current Password</FormLabel> <FormItem>
<FormControl> <FormLabel>Current Password</FormLabel>
<PasswordInput autoComplete="current-password" {...field} /> <FormControl>
</FormControl> <PasswordInput autoComplete="current-password" {...field} />
<FormMessage /> </FormControl>
</FormItem> <FormMessage />
)} </FormItem>
/> )}
/>
<FormField <FormField
control={form.control} control={form.control}
name="password" name="password"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Password</FormLabel> <FormLabel>Password</FormLabel>
<FormControl> <FormControl>
<PasswordInput autoComplete="new-password" {...field} /> <PasswordInput autoComplete="new-password" {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="repeatedPassword" name="repeatedPassword"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel> Repeat Password</FormLabel> <FormLabel>Repeat Password</FormLabel>
<FormControl> <FormControl>
<PasswordInput autoComplete="new-password" {...field} /> <PasswordInput autoComplete="new-password" {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
</fieldset>
<div className="mt-4"> <div className="mt-4">
<Button type="submit" disabled={isSubmitting}> <Button type="submit" loadingText="Updating password..." loading={isSubmitting}>
{isSubmitting && <Loader className="mr-2 h-5 w-5 animate-spin" />}
Update password Update password
</Button> </Button>
</div> </div>

115
apps/web/src/components/forms/profile.tsx
View File

@ -3,8 +3,7 @@
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 { User } from '@documenso/prisma/client';
@ -12,13 +11,19 @@ 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
</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" loadingText="Updating profile..." loading={isSubmitting}>
Update profile Update profile
</Button> </Button>
</div> </form>
</form> </Form>
); );
}; };

59
apps/web/src/components/forms/reset-password.tsx
View File

@ -95,35 +95,38 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
className={cn('flex w-full flex-col gap-y-4', className)} className={cn('flex w-full flex-col gap-y-4', className)}
onSubmit={form.handleSubmit(onFormSubmit)} onSubmit={form.handleSubmit(onFormSubmit)}
> >
<FormField <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
control={form.control} <FormField
name="password" control={form.control}
render={({ field }) => ( name="password"
<FormItem> render={({ field }) => (
<FormLabel>Password</FormLabel> <FormItem>
<FormControl> <FormLabel>Password</FormLabel>
<PasswordInput {...field} /> <FormControl>
</FormControl> <PasswordInput {...field} />
<FormMessage /> </FormControl>
</FormItem> <FormMessage />
)} </FormItem>
/> )}
<FormField />
control={form.control}
name="repeatedPassword"
render={({ field }) => (
<FormItem>
<FormLabel>Repeat Password</FormLabel>
<FormControl>
<PasswordInput {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit" size="lg" loading={isSubmitting}> <FormField
{isSubmitting ? 'Resetting Password...' : 'Reset Password'} control={form.control}
name="repeatedPassword"
render={({ field }) => (
<FormItem>
<FormLabel>Repeat Password</FormLabel>
<FormControl>
<PasswordInput {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</fieldset>
<Button type="submit" loadingText="Resetting Password..." size="lg" loading={isSubmitting}>
Reset Password
</Button> </Button>
</form> </form>
</Form> </Form>

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

@ -105,42 +105,44 @@ export const SignInForm = ({ className }: SignInFormProps) => {
className={cn('flex w-full flex-col gap-y-4', className)} className={cn('flex w-full flex-col gap-y-4', className)}
onSubmit={form.handleSubmit(onFormSubmit)} onSubmit={form.handleSubmit(onFormSubmit)}
> >
<FormField <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
control={form.control} <FormField
name="email" control={form.control}
render={({ field }) => ( name="email"
<FormItem> render={({ field }) => (
<FormLabel>Email</FormLabel> <FormItem>
<FormControl> <FormLabel>Email</FormLabel>
<Input type="email" {...field} /> <FormControl>
</FormControl> <Input type="email" {...field} />
<FormMessage /> </FormControl>
</FormItem> <FormMessage />
)} </FormItem>
/> )}
/>
<FormField <FormField
control={form.control} control={form.control}
name="password" name="password"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Password</FormLabel> <FormLabel>Password</FormLabel>
<FormControl> <FormControl>
<PasswordInput {...field} /> <PasswordInput {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
</fieldset>
<Button <Button
type="submit" type="submit"
size="lg" size="lg"
loading={isSubmitting} loading={isSubmitting}
disabled={isSubmitting}
className="dark:bg-documenso dark:hover:opacity-90" className="dark:bg-documenso dark:hover:opacity-90"
loadingText="Signing in..."
> >
{isSubmitting ? 'Signing in...' : 'Sign In'} Sign In
</Button> </Button>
<div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase"> <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">

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

@ -88,75 +88,77 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
className={cn('flex w-full flex-col gap-y-4', className)} className={cn('flex w-full flex-col gap-y-4', className)}
onSubmit={form.handleSubmit(onFormSubmit)} onSubmit={form.handleSubmit(onFormSubmit)}
> >
<FormField <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
control={form.control} <FormField
name="name" control={form.control}
render={({ field }) => ( name="name"
<FormItem> render={({ field }) => (
<FormLabel>Name</FormLabel> <FormItem>
<FormControl> <FormLabel>Name</FormLabel>
<Input type="text" {...field} /> <FormControl>
</FormControl> <Input type="text" {...field} />
<FormMessage /> </FormControl>
</FormItem> <FormMessage />
)} </FormItem>
/> )}
/>
<FormField <FormField
control={form.control} control={form.control}
name="email" name="email"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Email</FormLabel> <FormLabel>Email</FormLabel>
<FormControl> <FormControl>
<Input type="email" {...field} /> <Input type="email" {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="password" name="password"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Password</FormLabel> <FormLabel>Password</FormLabel>
<FormControl> <FormControl>
<PasswordInput {...field} /> <PasswordInput {...field} />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
control={form.control} control={form.control}
name="signature" name="signature"
render={({ field: { onChange } }) => ( render={({ field: { onChange } }) => (
<FormItem> <FormItem>
<FormLabel> Sign Here</FormLabel> <FormLabel>Sign Here</FormLabel>
<FormControl> <FormControl>
<SignaturePad <SignaturePad
className="h-36 w-full" className="h-36 w-full"
containerClassName="mt-2 rounded-lg border bg-background" containerClassName="mt-2 rounded-lg border bg-background"
onChange={(v) => onChange(v ?? '')} onChange={(v) => onChange(v ?? '')}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
</fieldset>
<Button <Button
type="submit" type="submit"
size="lg" size="lg"
loading={isSubmitting} loading={isSubmitting}
disabled={isSubmitting} loadingText="Signing up..."
className="dark:bg-documenso dark:hover:opacity-90" className="dark:bg-documenso dark:hover:opacity-90"
> >
{isSubmitting ? 'Signing up...' : 'Sign Up'} Sign Up
</Button> </Button>
</form> </form>
</Form> </Form>