refactor: signin page

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

@@ -1,9 +1,6 @@
 '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 { useForm } from 'react-hook-form';
 import { FcGoogle } from 'react-icons/fc';
@@ -12,9 +9,16 @@ import { z } from 'zod';
 import { ErrorCode, isErrorCode } from '@documenso/lib/next-auth/error-codes';
 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 { useToast } from '@documenso/ui/primitives/use-toast';
 
 const ERROR_MESSAGES = {
@@ -39,13 +43,8 @@ export type SignInFormProps = {
 
 export const SignInForm = ({ className }: SignInFormProps) => {
   const { toast } = useToast();
-  const [showPassword, setShowPassword] = useState(false);
 
-  const {
+  const form = useForm<TSignInFormSchema>({
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<TSignInFormSchema>({
     values: {
       email: '',
       password: '',
@@ -53,6 +52,8 @@ export const SignInForm = ({ className }: SignInFormProps) => {
     resolver: zodResolver(ZSignInFormSchema),
   });
 
+  const isSubmitting = form.formState.isSubmitting;
+
   const onFormSubmit = async ({ email, password }: TSignInFormSchema) => {
     try {
       const result = await signIn('credentials', {
@@ -99,55 +100,41 @@ export const SignInForm = ({ className }: SignInFormProps) => {
   };
 
   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="email" className="text-muted-forground">
+          control={form.control}
-          Email
+          name="email"
-        </Label>
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input type="email" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
 
-        <Input id="email" type="email" className="bg-background mt-2" {...register('email')} />
+        <FormField
-
+          control={form.control}
-        <FormErrorMessage className="mt-1.5" error={errors.email} />
+          name="password"
-      </div>
+          render={({ field }) => (
-
+            <FormItem>
-      <div>
+              <FormLabel>Password</FormLabel>
-        <Label htmlFor="password" className="text-muted-forground">
+              <FormControl>
-          <span>Password</span>
+                <PasswordInput {...field} />
-        </Label>
+              </FormControl>
-
+              <FormMessage />
-        <div className="relative">
+            </FormItem>
-          <Input
+          )}
-            id="password"
-            type={showPassword ? 'text' : 'password'}
-            minLength={6}
-            maxLength={72}
-            autoComplete="current-password"
-            className="bg-background mt-2 pr-10"
-            {...register('password')}
         />
 
         <Button
-            variant="link"
+          type="submit"
-            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>
-
-      <Button
           size="lg"
           loading={isSubmitting}
           disabled={isSubmitting}
@@ -174,5 +161,6 @@ export const SignInForm = ({ className }: SignInFormProps) => {
           Google
         </Button>
       </form>
+    </Form>
   );
 };