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 {
-    control,
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<TSignUpFormSchema>({
+  const form = 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,93 +83,82 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
   };
 
   return (
-    <form
-      className={cn('flex w-full flex-col gap-y-4', className)}
-      onSubmit={handleSubmit(onFormSubmit)}
-    >
-      <div>
-        <Label htmlFor="name" className="text-muted-foreground">
-          Name
-        </Label>
-
-        <Input id="name" type="text" className="bg-background mt-2" {...register('name')} />
-
-        {errors.name && <span className="mt-1 text-xs text-red-500">{errors.name.message}</span>}
-      </div>
-
-      <div>
-        <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
-            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 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.password} />
-      </div>
-
-      <div>
-        <Label htmlFor="password" className="text-muted-foreground">
-          Sign Here
-        </Label>
-
-        <div>
-          <Controller
-            control={control}
-            name="signature"
-            render={({ field: { onChange } }) => (
-              <SignaturePad
-                className="h-36 w-full"
-                containerClassName="mt-2 rounded-lg border bg-background"
-                onChange={(v) => onChange(v ?? '')}
-              />
-            )}
-          />
-        </div>
-
-        <FormErrorMessage className="mt-1.5" error={errors.signature} />
-      </div>
-
-      <Button
-        size="lg"
-        loading={isSubmitting}
-        disabled={isSubmitting}
-        className="dark:bg-documenso dark:hover:opacity-90"
+    <Form {...form}>
+      <form
+        className={cn('flex w-full flex-col gap-y-4', className)}
+        onSubmit={form.handleSubmit(onFormSubmit)}
       >
-        {isSubmitting ? 'Signing up...' : 'Sign Up'}
-      </Button>
-    </form>
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input type="text" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input type="email" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Password</FormLabel>
+              <FormControl>
+                <PasswordInput {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.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>
+          )}
+        />
+
+        <Button
+          type="submit"
+          size="lg"
+          loading={isSubmitting}
+          disabled={isSubmitting}
+          className="dark:bg-documenso dark:hover:opacity-90"
+        >
+          {isSubmitting ? 'Signing up...' : 'Sign Up'}
+        </Button>
+      </form>
+    </Form>
   );
 };