refactor: signup page

apps/web/src/components/forms/signup.tsx

@@ -1,20 +1,24 @@
 'use client';
 
-import { useState } from 'react';
-
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Eye, EyeOff } from 'lucide-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 { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 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 { Label } from '@documenso/ui/primitives/label';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -36,14 +40,8 @@ export type SignUpFormProps = {
 
 export const SignUpForm = ({ className }: SignUpFormProps) => {
   const { toast } = useToast();
-  const [showPassword, setShowPassword] = useState(false);
 
-  const {
+  const form = useForm<TSignUpFormSchema>({
-    control,
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<TSignUpFormSchema>({
     values: {
       name: '',
       email: '',
@@ -53,6 +51,8 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
     resolver: zodResolver(ZSignUpFormSchema),
   });
 
+  const isSubmitting = form.formState.isSubmitting;
+
   const { mutateAsync: signup } = trpc.auth.signup.useMutation();
 
   const onFormSubmit = async ({ name, email, password, signature }: TSignUpFormSchema) => {
@@ -83,86 +83,74 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
   };
 
   return (
+    <Form {...form}>
       <form
         className={cn('flex w-full flex-col gap-y-4', className)}
-      onSubmit={handleSubmit(onFormSubmit)}
+        onSubmit={form.handleSubmit(onFormSubmit)}
       >
-      <div>
+        <FormField
-        <Label htmlFor="name" className="text-muted-foreground">
+          control={form.control}
-          Name
+          name="name"
-        </Label>
+          render={({ field }) => (
-
+            <FormItem>
-        <Input id="name" type="text" className="bg-background mt-2" {...register('name')} />
+              <FormLabel>Name</FormLabel>
-
+              <FormControl>
-        {errors.name && <span className="mt-1 text-xs text-red-500">{errors.name.message}</span>}
+                <Input type="text" {...field} />
-      </div>
+              </FormControl>
-
+              <FormMessage />
-      <div>
+            </FormItem>
-        <Label htmlFor="email" className="text-muted-foreground">
+          )}
-          Email
-        </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"
           render={({ field: { onChange } }) => (
+            <FormItem>
+              <FormLabel> Sign Here</FormLabel>
+              <FormControl>
                 <SignaturePad
                   className="h-36 w-full"
                   containerClassName="mt-2 rounded-lg border bg-background"
                   onChange={(v) => onChange(v ?? '')}
                 />
+              </FormControl>
+
+              <FormMessage />
+            </FormItem>
           )}
         />
-        </div>
-
-        <FormErrorMessage className="mt-1.5" error={errors.signature} />
-      </div>
 
         <Button
+          type="submit"
           size="lg"
           loading={isSubmitting}
           disabled={isSubmitting}
@@ -171,5 +159,6 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
           {isSubmitting ? 'Signing up...' : 'Sign Up'}
         </Button>
       </form>
+    </Form>
   );
 };