From 4ff8592e8fc156a51ec0d56b69dd6c78dc5f5e8e Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Wed, 29 Nov 2023 22:11:55 +0530
Subject: [PATCH 01/13] feat: add password input component

---
 packages/ui/primitives/password-input.tsx | 43 +++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 packages/ui/primitives/password-input.tsx

diff --git a/packages/ui/primitives/password-input.tsx b/packages/ui/primitives/password-input.tsx
new file mode 100644
index 000000000..85249056d
--- /dev/null
+++ b/packages/ui/primitives/password-input.tsx
@@ -0,0 +1,43 @@
+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, InputProps>(
+  ({ 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 = 'PasswordInput';
+
+export { PasswordInput };

From 318dfcafc3a9fa1b8a0db923ea8c403813df55d6 Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Wed, 29 Nov 2023 22:31:24 +0530
Subject: [PATCH 02/13] refactor: signup page

---
 apps/web/src/components/forms/signup.tsx | 189 +++++++++++------------
 1 file changed, 89 insertions(+), 100 deletions(-)

diff --git a/apps/web/src/components/forms/signup.tsx b/apps/web/src/components/forms/signup.tsx
index 11068ac68..fb70e4c2f 100644
--- a/apps/web/src/components/forms/signup.tsx
+++ b/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>
   );
 };

From 62809e9506f0046fffe713968ebdb2f426396341 Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Wed, 29 Nov 2023 22:31:42 +0530
Subject: [PATCH 03/13] refactor: signin page

---
 apps/web/src/components/forms/signin.tsx | 150 +++++++++++------------
 1 file changed, 69 insertions(+), 81 deletions(-)

diff --git a/apps/web/src/components/forms/signin.tsx b/apps/web/src/components/forms/signin.tsx
index abdc1efe6..b93a2cd46 100644
--- a/apps/web/src/components/forms/signin.tsx
+++ b/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 {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<TSignInFormSchema>({
+  const form = 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,80 +100,67 @@ export const SignInForm = ({ className }: SignInFormProps) => {
   };
 
   return (
-    <form
-      className={cn('flex w-full flex-col gap-y-4', className)}
-      onSubmit={handleSubmit(onFormSubmit)}
-    >
-      <div>
-        <Label htmlFor="email" className="text-muted-forground">
-          Email
-        </Label>
+    <Form {...form}>
+      <form
+        className={cn('flex w-full flex-col gap-y-4', className)}
+        onSubmit={form.handleSubmit(onFormSubmit)}
+      >
+        <FormField
+          control={form.control}
+          name="email"
+          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}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Password</FormLabel>
+              <FormControl>
+                <PasswordInput {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
 
-        <FormErrorMessage className="mt-1.5" error={errors.email} />
-      </div>
+        <Button
+          type="submit"
+          size="lg"
+          loading={isSubmitting}
+          disabled={isSubmitting}
+          className="dark:bg-documenso dark:hover:opacity-90"
+        >
+          {isSubmitting ? 'Signing in...' : 'Sign In'}
+        </Button>
 
-      <div>
-        <Label htmlFor="password" className="text-muted-forground">
-          <span>Password</span>
-        </Label>
-
-        <div className="relative">
-          <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="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 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>
 
-        <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'}
-      </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>
+        <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>
+    </Form>
   );
 };

From dc56c2abf2dba0a85b9dd43b2aaa22e159c0546c Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Wed, 29 Nov 2023 22:32:42 +0530
Subject: [PATCH 04/13] refactor: password form

---
 apps/web/src/components/forms/password.tsx | 191 +++++++--------------
 1 file changed, 65 insertions(+), 126 deletions(-)

diff --git a/apps/web/src/components/forms/password.tsx b/apps/web/src/components/forms/password.tsx
index 47cba1e88..c262719e3 100644
--- a/apps/web/src/components/forms/password.tsx
+++ b/apps/web/src/components/forms/password.tsx
@@ -1,9 +1,7 @@
 'use client';
 
-import { useState } from 'react';
-
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Eye, EyeOff, Loader } from 'lucide-react';
+import { Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -12,12 +10,17 @@ 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 { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
+import {
+  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 { FormErrorMessage } from '../form/form-error-message';
-
 export const ZPasswordFormSchema = z
   .object({
     currentPassword: z
@@ -48,16 +51,7 @@ export type PasswordFormProps = {
 export const PasswordForm = ({ className }: PasswordFormProps) => {
   const { toast } = useToast();
 
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-  const [showCurrentPassword, setShowCurrentPassword] = useState(false);
-
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState: { errors, isSubmitting },
-  } = useForm<TPasswordFormSchema>({
+  const form = useForm<TPasswordFormSchema>({
     values: {
       currentPassword: '',
       password: '',
@@ -66,6 +60,8 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
     resolver: zodResolver(ZPasswordFormSchema),
   });
 
+  const isSubmitting = form.formState.isSubmitting;
+
   const { mutateAsync: updatePassword } = trpc.profile.updatePassword.useMutation();
 
   const onFormSubmit = async ({ currentPassword, password }: TPasswordFormSchema) => {
@@ -75,7 +71,7 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
         password,
       });
 
-      reset();
+      form.reset();
 
       toast({
         title: 'Password updated',
@@ -101,117 +97,60 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
   };
 
   return (
-    <form
-      className={cn('flex w-full flex-col gap-y-4', className)}
-      onSubmit={handleSubmit(onFormSubmit)}
-    >
-      <div>
-        <Label htmlFor="current-password" className="text-muted-foreground">
-          Current Password
-        </Label>
+    <Form {...form}>
+      <form
+        className={cn('flex w-full flex-col gap-y-4', className)}
+        onSubmit={form.handleSubmit(onFormSubmit)}
+      >
+        <FormField
+          control={form.control}
+          name="currentPassword"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Current Password</FormLabel>
+              <FormControl>
+                <PasswordInput autoComplete="current-password" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
 
-        <div className="relative">
-          <Input
-            id="current-password"
-            type={showCurrentPassword ? 'text' : 'password'}
-            minLength={6}
-            maxLength={72}
-            autoComplete="current-password"
-            className="bg-background mt-2 pr-10"
-            {...register('currentPassword')}
-          />
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Password</FormLabel>
+              <FormControl>
+                <PasswordInput autoComplete="new-password" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
 
-          <Button
-            variant="link"
-            type="button"
-            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
-            aria-label={showCurrentPassword ? 'Mask password' : 'Reveal password'}
-            onClick={() => setShowCurrentPassword((show) => !show)}
-          >
-            {showCurrentPassword ? (
-              <EyeOff className="text-muted-foreground h-5 w-5" />
-            ) : (
-              <Eye className="text-muted-foreground h-5 w-5" />
-            )}
+        <FormField
+          control={form.control}
+          name="repeatedPassword"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel> Repeat Password</FormLabel>
+              <FormControl>
+                <PasswordInput autoComplete="new-password" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className="mt-4">
+          <Button type="submit" disabled={isSubmitting}>
+            {isSubmitting && <Loader className="mr-2 h-5 w-5 animate-spin" />}
+            Update password
           </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
-            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="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')}
-          />
-
-          <Button
-            variant="link"
-            type="button"
-            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>
-        </div>
-
-        <FormErrorMessage className="mt-1.5" error={errors.repeatedPassword} />
-      </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>
+      </form>
+    </Form>
   );
 };

From 1e29dfd823755ecb241057d61be5e1836e3386ec Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Wed, 29 Nov 2023 22:33:04 +0530
Subject: [PATCH 05/13] refactor: reset password form

---
 .../src/components/forms/reset-password.tsx   | 140 ++++++------------
 1 file changed, 49 insertions(+), 91 deletions(-)

diff --git a/apps/web/src/components/forms/reset-password.tsx b/apps/web/src/components/forms/reset-password.tsx
index 47f423d76..e29686999 100644
--- a/apps/web/src/components/forms/reset-password.tsx
+++ b/apps/web/src/components/forms/reset-password.tsx
@@ -1,11 +1,8 @@
 'use client';
 
-import { useState } from 'react';
-
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Eye, EyeOff } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -13,9 +10,15 @@ 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 { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
+import {
+  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';
 
 export const ZResetPasswordFormSchema = z
@@ -40,15 +43,7 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
 
   const { toast } = useToast();
 
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-
-  const {
-    register,
-    reset,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<TResetPasswordFormSchema>({
+  const form = useForm<TResetPasswordFormSchema>({
     values: {
       password: '',
       repeatedPassword: '',
@@ -56,6 +51,8 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
     resolver: zodResolver(ZResetPasswordFormSchema),
   });
 
+  const isSubmitting = form.formState.isSubmitting;
+
   const { mutateAsync: resetPassword } = trpc.profile.resetPassword.useMutation();
 
   const onFormSubmit = async ({ password }: Omit<TResetPasswordFormSchema, 'repeatedPassword'>) => {
@@ -65,7 +62,7 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
         token,
       });
 
-      reset();
+      form.reset();
 
       toast({
         title: 'Password updated',
@@ -93,81 +90,42 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
   };
 
   return (
-    <form
-      className={cn('flex w-full flex-col gap-y-4', className)}
-      onSubmit={handleSubmit(onFormSubmit)}
-    >
-      <div>
-        <Label htmlFor="password" className="text-muted-foreground">
-          <span>Password</span>
-        </Label>
+    <Form {...form}>
+      <form
+        className={cn('flex w-full flex-col gap-y-4', className)}
+        onSubmit={form.handleSubmit(onFormSubmit)}
+      >
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Password</FormLabel>
+              <FormControl>
+                <PasswordInput {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="repeatedPassword"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Repeat Password</FormLabel>
+              <FormControl>
+                <PasswordInput {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
 
-        <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="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')}
-          />
-
-          <Button
-            variant="link"
-            type="button"
-            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>
-        </div>
-
-        <FormErrorMessage className="mt-1.5" error={errors.repeatedPassword} />
-      </div>
-
-      <Button size="lg" loading={isSubmitting}>
-        {isSubmitting ? 'Resetting Password...' : 'Reset Password'}
-      </Button>
-    </form>
+        <Button type="submit" size="lg" loading={isSubmitting}>
+          {isSubmitting ? 'Resetting Password...' : 'Reset Password'}
+        </Button>
+      </form>
+    </Form>
   );
 };

From 0b2dce22389b796d7ce9155c04a9edab34946e39 Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Wed, 29 Nov 2023 22:37:33 +0530
Subject: [PATCH 06/13] fix: type

---
 packages/ui/primitives/password-input.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/ui/primitives/password-input.tsx b/packages/ui/primitives/password-input.tsx
index 85249056d..502344a02 100644
--- a/packages/ui/primitives/password-input.tsx
+++ b/packages/ui/primitives/password-input.tsx
@@ -6,14 +6,13 @@ import { cn } from '../lib/utils';
 import { Button } from './button';
 import { Input, InputProps } from './input';
 
-const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(
+const PasswordInput = React.forwardRef<HTMLInputElement, Omit<InputProps, 'type'>>(
   ({ 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}

From 231a307b89d3bbf7a942a37ad8fe4d0e5cd0d703 Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Thu, 30 Nov 2023 15:20:06 +0530
Subject: [PATCH 07/13] feat: add loading text prop

---
 packages/ui/primitives/button.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/ui/primitives/button.tsx b/packages/ui/primitives/button.tsx
index 31df69dee..9ee3324c6 100644
--- a/packages/ui/primitives/button.tsx
+++ b/packages/ui/primitives/button.tsx
@@ -53,18 +53,23 @@ export interface ButtonProps
    * Will display the loading spinner and disable the button.
    */
   loading?: boolean;
+
+  /**
+   * The label to show in the button when `isLoading` is true
+   */
+  loadingText?: string;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, loading, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, loadingText, loading, ...props }, ref) => {
     if (asChild) {
       return (
         <Slot className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
       );
     }
 
-    const showLoader = loading === true;
-    const isDisabled = props.disabled || showLoader;
+    const isLoading = loading === true;
+    const isDisabled = props.disabled || isLoading;
 
     return (
       <button
@@ -73,8 +78,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
         disabled={isDisabled}
       >
-        {showLoader && <Loader className={cn('mr-2 animate-spin', loaderVariants({ size }))} />}
-        {props.children}
+        {isLoading && <Loader className={cn('mr-2 animate-spin', loaderVariants({ size }))} />}
+        {isLoading && loadingText ? loadingText : props.children}
       </button>
     );
   },

From 6bbeaa084ce464b64174e47d940c843724a9af99 Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Thu, 30 Nov 2023 15:55:29 +0530
Subject: [PATCH 08/13] refactor: forms

---
 .../src/components/forms/forgot-password.tsx  |  63 ++++++----
 apps/web/src/components/forms/password.tsx    |  84 ++++++-------
 apps/web/src/components/forms/profile.tsx     | 115 ++++++++---------
 .../src/components/forms/reset-password.tsx   |  59 ++++-----
 apps/web/src/components/forms/signin.tsx      |  58 ++++-----
 apps/web/src/components/forms/signup.tsx      | 118 +++++++++---------
 6 files changed, 259 insertions(+), 238 deletions(-)

diff --git a/apps/web/src/components/forms/forgot-password.tsx b/apps/web/src/components/forms/forgot-password.tsx
index 141f3780f..55e313c33 100644
--- a/apps/web/src/components/forms/forgot-password.tsx
+++ b/apps/web/src/components/forms/forgot-password.tsx
@@ -9,9 +9,15 @@ import { z } from 'zod';
 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 { useToast } from '@documenso/ui/primitives/use-toast';
 
 export const ZForgotPasswordFormSchema = z.object({
@@ -28,18 +34,15 @@ export const ForgotPasswordForm = ({ className }: ForgotPasswordFormProps) => {
   const router = useRouter();
   const { toast } = useToast();
 
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState: { errors, isSubmitting },
-  } = useForm<TForgotPasswordFormSchema>({
+  const form = useForm<TForgotPasswordFormSchema>({
     values: {
       email: '',
     },
     resolver: zodResolver(ZForgotPasswordFormSchema),
   });
 
+  const isSubmitting = form.formState.isSubmitting;
+
   const { mutateAsync: forgotPassword } = trpc.profile.forgotPassword.useMutation();
 
   const onFormSubmit = async ({ email }: TForgotPasswordFormSchema) => {
@@ -52,29 +55,37 @@ export const ForgotPasswordForm = ({ className }: ForgotPasswordFormProps) => {
       duration: 5000,
     });
 
-    reset();
+    form.reset();
 
     router.push('/check-email');
   };
 
   return (
-    <form
-      className={cn('flex w-full flex-col gap-y-4', className)}
-      onSubmit={handleSubmit(onFormSubmit)}
-    >
-      <div>
-        <Label htmlFor="email" className="text-muted-foreground">
-          Email
-        </Label>
+    <Form {...form}>
+      <form
+        className={cn('flex w-full flex-col gap-y-4', className)}
+        onSubmit={form.handleSubmit(onFormSubmit)}
+      >
+        <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
+          <FormField
+            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')} />
-
-        <FormErrorMessage className="mt-1.5" error={errors.email} />
-      </div>
-
-      <Button size="lg" loading={isSubmitting}>
-        {isSubmitting ? 'Sending Reset Email...' : 'Reset Password'}
-      </Button>
-    </form>
+        <Button size="lg" loading={isSubmitting} loadingText="Sending Reset Email...">
+          Reset Password
+        </Button>
+      </form>
+    </Form>
   );
 };
diff --git a/apps/web/src/components/forms/password.tsx b/apps/web/src/components/forms/password.tsx
index c262719e3..b6b41264c 100644
--- a/apps/web/src/components/forms/password.tsx
+++ b/apps/web/src/components/forms/password.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -102,51 +101,52 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
         className={cn('flex w-full flex-col gap-y-4', className)}
         onSubmit={form.handleSubmit(onFormSubmit)}
       >
-        <FormField
-          control={form.control}
-          name="currentPassword"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Current Password</FormLabel>
-              <FormControl>
-                <PasswordInput autoComplete="current-password" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+        <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
+          <FormField
+            control={form.control}
+            name="currentPassword"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Current Password</FormLabel>
+                <FormControl>
+                  <PasswordInput autoComplete="current-password" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
 
-        <FormField
-          control={form.control}
-          name="password"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Password</FormLabel>
-              <FormControl>
-                <PasswordInput autoComplete="new-password" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <PasswordInput autoComplete="new-password" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
 
-        <FormField
-          control={form.control}
-          name="repeatedPassword"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel> Repeat Password</FormLabel>
-              <FormControl>
-                <PasswordInput autoComplete="new-password" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+          <FormField
+            control={form.control}
+            name="repeatedPassword"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Repeat Password</FormLabel>
+                <FormControl>
+                  <PasswordInput autoComplete="new-password" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </fieldset>
 
         <div className="mt-4">
-          <Button type="submit" disabled={isSubmitting}>
-            {isSubmitting && <Loader className="mr-2 h-5 w-5 animate-spin" />}
+          <Button type="submit" loadingText="Updating password..." loading={isSubmitting}>
             Update password
           </Button>
         </div>
diff --git a/apps/web/src/components/forms/profile.tsx b/apps/web/src/components/forms/profile.tsx
index 6f611bed9..dc6e3c4d5 100644
--- a/apps/web/src/components/forms/profile.tsx
+++ b/apps/web/src/components/forms/profile.tsx
@@ -3,8 +3,7 @@
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader } from 'lucide-react';
-import { Controller, useForm } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { User } from '@documenso/prisma/client';
@@ -12,13 +11,19 @@ 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 {
+  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 { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { FormErrorMessage } from '../form/form-error-message';
-
 export const ZProfileFormSchema = z.object({
   name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
   signature: z.string().min(1, 'Signature Pad cannot be empty'),
@@ -36,12 +41,7 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
 
   const { toast } = useToast();
 
-  const {
-    register,
-    control,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<TProfileFormSchema>({
+  const form = useForm<TProfileFormSchema>({
     values: {
       name: user.name ?? '',
       signature: user.signature || '',
@@ -49,6 +49,8 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
     resolver: zodResolver(ZProfileFormSchema),
   });
 
+  const isSubmitting = form.formState.isSubmitting;
+
   const { mutateAsync: updateProfile } = trpc.profile.updateProfile.useMutation();
 
   const onFormSubmit = async ({ name, signature }: TProfileFormSchema) => {
@@ -84,56 +86,57 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
   };
 
   return (
-    <form
-      className={cn('flex w-full flex-col gap-y-4', className)}
-      onSubmit={handleSubmit(onFormSubmit)}
-    >
-      <div>
-        <Label htmlFor="full-name" className="text-muted-foreground">
-          Full Name
-        </Label>
-
-        <Input id="full-name" type="text" className="bg-background mt-2" {...register('name')} />
-
-        <FormErrorMessage className="mt-1.5" error={errors.name} />
-      </div>
-
-      <div>
-        <Label htmlFor="email" className="text-muted-foreground">
-          Email
-        </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 ?? '')}
-              />
+    <Form {...form}>
+      <form
+        className={cn('flex w-full flex-col gap-y-4', className)}
+        onSubmit={form.handleSubmit(onFormSubmit)}
+      >
+        <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Full Name</FormLabel>
+                <FormControl>
+                  <Input type="text" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
             )}
           />
-          <FormErrorMessage className="mt-1.5" error={errors.signature} />
-        </div>
-      </div>
 
-      <div className="mt-4">
-        <Button type="submit" disabled={isSubmitting}>
-          {isSubmitting && <Loader className="mr-2 h-5 w-5 animate-spin" />}
+          <div>
+            <Label htmlFor="email" className="text-muted-foreground">
+              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
         </Button>
-      </div>
-    </form>
+      </form>
+    </Form>
   );
 };
diff --git a/apps/web/src/components/forms/reset-password.tsx b/apps/web/src/components/forms/reset-password.tsx
index e29686999..e7c701667 100644
--- a/apps/web/src/components/forms/reset-password.tsx
+++ b/apps/web/src/components/forms/reset-password.tsx
@@ -95,35 +95,38 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
         className={cn('flex w-full flex-col gap-y-4', className)}
         onSubmit={form.handleSubmit(onFormSubmit)}
       >
-        <FormField
-          control={form.control}
-          name="password"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Password</FormLabel>
-              <FormControl>
-                <PasswordInput {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="repeatedPassword"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Repeat Password</FormLabel>
-              <FormControl>
-                <PasswordInput {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+        <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <PasswordInput {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
 
-        <Button type="submit" size="lg" loading={isSubmitting}>
-          {isSubmitting ? 'Resetting Password...' : 'Reset Password'}
+          <FormField
+            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>
       </form>
     </Form>
diff --git a/apps/web/src/components/forms/signin.tsx b/apps/web/src/components/forms/signin.tsx
index b93a2cd46..bc58e68e1 100644
--- a/apps/web/src/components/forms/signin.tsx
+++ b/apps/web/src/components/forms/signin.tsx
@@ -105,42 +105,44 @@ export const SignInForm = ({ className }: SignInFormProps) => {
         className={cn('flex w-full flex-col gap-y-4', className)}
         onSubmit={form.handleSubmit(onFormSubmit)}
       >
-        <FormField
-          control={form.control}
-          name="email"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Email</FormLabel>
-              <FormControl>
-                <Input type="email" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+        <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
+          <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="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <PasswordInput {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </fieldset>
 
         <Button
           type="submit"
           size="lg"
           loading={isSubmitting}
-          disabled={isSubmitting}
           className="dark:bg-documenso dark:hover:opacity-90"
+          loadingText="Signing in..."
         >
-          {isSubmitting ? 'Signing in...' : 'Sign In'}
+          Sign In
         </Button>
 
         <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
diff --git a/apps/web/src/components/forms/signup.tsx b/apps/web/src/components/forms/signup.tsx
index fb70e4c2f..ad803d9c1 100644
--- a/apps/web/src/components/forms/signup.tsx
+++ b/apps/web/src/components/forms/signup.tsx
@@ -88,75 +88,77 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
         className={cn('flex w-full flex-col gap-y-4', className)}
         onSubmit={form.handleSubmit(onFormSubmit)}
       >
-        <FormField
-          control={form.control}
-          name="name"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Name</FormLabel>
-              <FormControl>
-                <Input type="text" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+        <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
+          <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="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="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>
+          <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>
-          )}
-        />
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </fieldset>
 
         <Button
           type="submit"
           size="lg"
           loading={isSubmitting}
-          disabled={isSubmitting}
+          loadingText="Signing up..."
           className="dark:bg-documenso dark:hover:opacity-90"
         >
-          {isSubmitting ? 'Signing up...' : 'Sign Up'}
+          Sign Up
         </Button>
       </form>
     </Form>

From 4733f1e84bdb5e625a91627c7d72312e668a0a2a Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Sat, 2 Dec 2023 17:46:16 +0530
Subject: [PATCH 09/13] refactor: password input component

---
 packages/ui/primitives/input.tsx | 39 +-------------------------------
 1 file changed, 1 insertion(+), 38 deletions(-)

diff --git a/packages/ui/primitives/input.tsx b/packages/ui/primitives/input.tsx
index ac739c984..1a5fba1bb 100644
--- a/packages/ui/primitives/input.tsx
+++ b/packages/ui/primitives/input.tsx
@@ -1,9 +1,6 @@
 import * as React from 'react';
 
-import { Eye, EyeOff } from 'lucide-react';
-
 import { cn } from '../lib/utils';
-import { Button } from './button';
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
@@ -28,38 +25,4 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
 Input.displayName = 'Input';
 
-const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ 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 };
+export { Input };

From a9068336571c8ba6cdb22e3802ab2692e96c2ad6 Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Sat, 2 Dec 2023 17:54:19 +0530
Subject: [PATCH 10/13] feat: use password input component

---
 .../2fa/disable-authenticator-app-dialog.tsx  | 67 ++++++++++---------
 .../2fa/enable-authenticator-app-dialog.tsx   |  4 +-
 .../forms/2fa/view-recovery-codes-dialog.tsx  |  5 +-
 3 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/apps/web/src/components/forms/2fa/disable-authenticator-app-dialog.tsx b/apps/web/src/components/forms/2fa/disable-authenticator-app-dialog.tsx
index eac574181..eafed5500 100644
--- a/apps/web/src/components/forms/2fa/disable-authenticator-app-dialog.tsx
+++ b/apps/web/src/components/forms/2fa/disable-authenticator-app-dialog.tsx
@@ -23,6 +23,7 @@ import {
   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';
 
 export const ZDisableTwoFactorAuthenticationForm = z.object({
@@ -107,38 +108,42 @@ export const DisableAuthenticatorAppDialog = ({
             )}
             className="flex flex-col gap-y-4"
           >
-            <FormField
-              name="password"
-              control={disableTwoFactorAuthenticationForm.control}
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-muted-foreground">Password</FormLabel>
-                  <FormControl>
-                    <Input
-                      {...field}
-                      type="password"
-                      autoComplete="current-password"
-                      value={field.value ?? ''}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+            <fieldset
+              className="flex flex-col gap-y-4"
+              disabled={isDisableTwoFactorAuthenticationSubmitting}
+            >
+              <FormField
+                name="password"
+                control={disableTwoFactorAuthenticationForm.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="text-muted-foreground">Password</FormLabel>
+                    <FormControl>
+                      <PasswordInput
+                        {...field}
+                        autoComplete="current-password"
+                        value={field.value ?? ''}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
 
-            <FormField
-              name="backupCode"
-              control={disableTwoFactorAuthenticationForm.control}
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-muted-foreground">Backup Code</FormLabel>
-                  <FormControl>
-                    <Input {...field} type="text" value={field.value ?? ''} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+              <FormField
+                name="backupCode"
+                control={disableTwoFactorAuthenticationForm.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="text-muted-foreground">Backup Code</FormLabel>
+                    <FormControl>
+                      <Input {...field} type="text" value={field.value ?? ''} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </fieldset>
 
             <div className="flex w-full items-center justify-between">
               <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
diff --git a/apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx b/apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx
index 8bf835ef5..0db1c8b50 100644
--- a/apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx
+++ b/apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx
@@ -27,6 +27,7 @@ import {
   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 { RecoveryCodeList } from './recovery-code-list';
@@ -178,9 +179,8 @@ export const EnableAuthenticatorAppDialog = ({
                       <FormItem>
                         <FormLabel className="text-muted-foreground">Password</FormLabel>
                         <FormControl>
-                          <Input
+                          <PasswordInput
                             {...field}
-                            type="password"
                             autoComplete="current-password"
                             value={field.value ?? ''}
                           />
diff --git a/apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx b/apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx
index 6275f16d6..5590a6722 100644
--- a/apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx
+++ b/apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx
@@ -22,7 +22,7 @@ import {
   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 { RecoveryCodeList } from './recovery-code-list';
@@ -108,9 +108,8 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
                       <FormItem>
                         <FormLabel className="text-muted-foreground">Password</FormLabel>
                         <FormControl>
-                          <Input
+                          <PasswordInput
                             {...field}
-                            type="password"
                             autoComplete="current-password"
                             value={field.value ?? ''}
                           />

From 369d08ae6ed7069677abcf18a51a4684fe4683c2 Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Sat, 2 Dec 2023 17:54:55 +0530
Subject: [PATCH 11/13] feat: refactor signin page

---
 apps/web/src/components/forms/signin.tsx | 210 ++++++++++++-----------
 1 file changed, 109 insertions(+), 101 deletions(-)

diff --git a/apps/web/src/components/forms/signin.tsx b/apps/web/src/components/forms/signin.tsx
index 0d7dd723f..46173a97c 100644
--- a/apps/web/src/components/forms/signin.tsx
+++ b/apps/web/src/components/forms/signin.tsx
@@ -12,9 +12,16 @@ 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 { Dialog, DialogContent, DialogHeader, DialogTitle } from '@documenso/ui/primitives/dialog';
-import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
-import { Input, PasswordInput } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
+import {
+  Form,
+  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';
 
 const ERROR_MESSAGES: Partial<Record<keyof typeof ErrorCode, string>> = {
@@ -52,12 +59,7 @@ export const SignInForm = ({ className }: SignInFormProps) => {
     'totp' | 'backup'
   >('totp');
 
-  const {
-    register,
-    handleSubmit,
-    setValue,
-    formState: { errors, isSubmitting },
-  } = useForm<TSignInFormSchema>({
+  const form = useForm<TSignInFormSchema>({
     values: {
       email: '',
       password: '',
@@ -67,9 +69,11 @@ export const SignInForm = ({ className }: SignInFormProps) => {
     resolver: zodResolver(ZSignInFormSchema),
   });
 
+  const isSubmitting = form.formState.isSubmitting;
+
   const onCloseTwoFactorAuthenticationDialog = () => {
-    setValue('totpCode', '');
-    setValue('backupCode', '');
+    form.setValue('totpCode', '');
+    form.setValue('backupCode', '');
 
     setIsTwoFactorAuthenticationDialogOpen(false);
   };
@@ -78,11 +82,11 @@ export const SignInForm = ({ className }: SignInFormProps) => {
     const method = twoFactorAuthenticationMethod === 'totp' ? 'backup' : 'totp';
 
     if (method === 'totp') {
-      setValue('backupCode', '');
+      form.setValue('backupCode', '');
     }
 
     if (method === 'backup') {
-      setValue('totpCode', '');
+      form.setValue('totpCode', '');
     }
 
     setTwoFactorAuthenticationMethod(method);
@@ -113,7 +117,6 @@ export const SignInForm = ({ className }: SignInFormProps) => {
       if (result?.error && isErrorCode(result.error)) {
         if (result.error === TwoFactorEnabledErrorCode) {
           setIsTwoFactorAuthenticationDialogOpen(true);
-
           return;
         }
 
@@ -156,64 +159,69 @@ export const SignInForm = ({ className }: SignInFormProps) => {
   };
 
   return (
-    <form
-      className={cn('flex w-full flex-col gap-y-4', className)}
-      onSubmit={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"
+    <Form {...form}>
+      <form
+        className={cn('flex w-full flex-col gap-y-4', className)}
+        onSubmit={form.handleSubmit(onFormSubmit)}
       >
-        {isSubmitting ? 'Signing in...' : 'Sign In'}
-      </Button>
+        <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
+          <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">
-        <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>
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <PasswordInput {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </fieldset>
 
-      <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>
+        <Button
+          type="submit"
+          size="lg"
+          loading={isSubmitting}
+          className="dark:bg-documenso dark:hover:opacity-90"
+          loadingText="Signing in..."
+        >
+          Sign In
+        </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
         open={isTwoFactorAuthenticationDialogOpen}
         onOpenChange={onCloseTwoFactorAuthenticationDialog}
@@ -223,40 +231,40 @@ export const SignInForm = ({ className }: SignInFormProps) => {
             <DialogTitle>Two-Factor Authentication</DialogTitle>
           </DialogHeader>
 
-          <form onSubmit={handleSubmit(onFormSubmit)}>
-            {twoFactorAuthenticationMethod === 'totp' && (
-              <div>
-                <Label htmlFor="totpCode" className="text-muted-forground">
-                  Authentication Token
-                </Label>
-
-                <Input
-                  id="totpCode"
-                  type="text"
-                  className="bg-background mt-2"
-                  {...register('totpCode')}
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset disabled={isSubmitting}>
+              {twoFactorAuthenticationMethod === 'totp' && (
+                <FormField
+                  control={form.control}
+                  name="totpCode"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Authentication Token</FormLabel>
+                      <FormControl>
+                        <Input type="text" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
                 />
+              )}
 
-                <FormErrorMessage className="mt-1.5" error={errors.totpCode} />
-              </div>
-            )}
-
-            {twoFactorAuthenticationMethod === 'backup' && (
-              <div>
-                <Label htmlFor="backupCode" className="text-muted-forground">
-                  Backup Code
-                </Label>
-
-                <Input
-                  id="backupCode"
-                  type="text"
-                  className="bg-background mt-2"
-                  {...register('backupCode')}
+              {twoFactorAuthenticationMethod === 'backup' && (
+                <FormField
+                  control={form.control}
+                  name="backupCode"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel> Backup Code</FormLabel>
+                      <FormControl>
+                        <Input type="text" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
                 />
-
-                <FormErrorMessage className="mt-1.5" error={errors.backupCode} />
-              </div>
-            )}
+              )}
+            </fieldset>
 
             <div className="mt-4 flex items-center justify-between">
               <Button
@@ -267,13 +275,13 @@ export const SignInForm = ({ className }: SignInFormProps) => {
                 {twoFactorAuthenticationMethod === 'totp' ? 'Use Backup Code' : 'Use Authenticator'}
               </Button>
 
-              <Button type="submit" loading={isSubmitting}>
+              <Button type="submit" loadingText="Signing in..." loading={isSubmitting}>
                 Sign In
               </Button>
             </div>
           </form>
         </DialogContent>
       </Dialog>
-    </form>
+    </Form>
   );
 };

From 075fdd1f88601712f37faead61e852703e2ec1d4 Mon Sep 17 00:00:00 2001
From: Mythie <me@lucasjamessmith.me>
Date: Sat, 16 Dec 2023 14:41:18 +1100
Subject: [PATCH 12/13] fix: lint errors

---
 apps/marketing/src/components/constants.ts | 2 +-
 apps/web/src/components/forms/signup.tsx   | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/marketing/src/components/constants.ts b/apps/marketing/src/components/constants.ts
index 1f11df116..dcbb631a2 100644
--- a/apps/marketing/src/components/constants.ts
+++ b/apps/marketing/src/components/constants.ts
@@ -1,5 +1,5 @@
 export const STEP = {
   EMAIL: 'EMAIL',
   NAME: 'NAME',
-  SIGN: "SIGN"
+  SIGN: 'SIGN',
 } as const;
diff --git a/apps/web/src/components/forms/signup.tsx b/apps/web/src/components/forms/signup.tsx
index d67449b17..3988314c5 100644
--- a/apps/web/src/components/forms/signup.tsx
+++ b/apps/web/src/components/forms/signup.tsx
@@ -41,6 +41,7 @@ export type SignUpFormProps = {
 
 export const SignUpForm = ({ className }: SignUpFormProps) => {
   const { toast } = useToast();
+  const analytics = useAnalytics();
 
   const form = useForm<TSignUpFormSchema>({
     values: {

From 1aa0fc3101e2967e225b738326f364e3d98ecc54 Mon Sep 17 00:00:00 2001
From: Lucas Smith <me@lucasjamessmith.me>
Date: Fri, 22 Dec 2023 01:46:41 +0000
Subject: [PATCH 13/13] fix: remove loadingText prop

---
 .vscode/settings.json                             |  2 +-
 apps/web/src/components/forms/forgot-password.tsx |  4 ++--
 apps/web/src/components/forms/password.tsx        |  6 +++---
 apps/web/src/components/forms/profile.tsx         |  6 +++---
 apps/web/src/components/forms/reset-password.tsx  |  4 ++--
 apps/web/src/components/forms/signin.tsx          |  7 +++----
 apps/web/src/components/forms/signup.tsx          |  3 +--
 packages/ui/primitives/button.tsx                 | 12 ++++--------
 8 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 97d5d1948..82aa3c1a3 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,7 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "eslint.validate": ["typescript", "typescriptreact", "javascript", "javascriptreact"],
   "javascript.preferences.importModuleSpecifier": "non-relative",
diff --git a/apps/web/src/components/forms/forgot-password.tsx b/apps/web/src/components/forms/forgot-password.tsx
index 55e313c33..3d9efee42 100644
--- a/apps/web/src/components/forms/forgot-password.tsx
+++ b/apps/web/src/components/forms/forgot-password.tsx
@@ -82,8 +82,8 @@ export const ForgotPasswordForm = ({ className }: ForgotPasswordFormProps) => {
           />
         </fieldset>
 
-        <Button size="lg" loading={isSubmitting} loadingText="Sending Reset Email...">
-          Reset Password
+        <Button size="lg" loading={isSubmitting}>
+          {isSubmitting ? 'Sending Reset Email...' : 'Reset Password'}
         </Button>
       </form>
     </Form>
diff --git a/apps/web/src/components/forms/password.tsx b/apps/web/src/components/forms/password.tsx
index b6b41264c..0eb491537 100644
--- a/apps/web/src/components/forms/password.tsx
+++ b/apps/web/src/components/forms/password.tsx
@@ -4,7 +4,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { User } from '@documenso/prisma/client';
+import type { User } from '@documenso/prisma/client';
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -146,8 +146,8 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
         </fieldset>
 
         <div className="mt-4">
-          <Button type="submit" loadingText="Updating password..." loading={isSubmitting}>
-            Update password
+          <Button type="submit" loading={isSubmitting}>
+            {isSubmitting ? 'Updating password...' : 'Update password'}
           </Button>
         </div>
       </form>
diff --git a/apps/web/src/components/forms/profile.tsx b/apps/web/src/components/forms/profile.tsx
index dc6e3c4d5..0ce5c7f3d 100644
--- a/apps/web/src/components/forms/profile.tsx
+++ b/apps/web/src/components/forms/profile.tsx
@@ -6,7 +6,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { User } from '@documenso/prisma/client';
+import type { User } from '@documenso/prisma/client';
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -133,8 +133,8 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
           />
         </fieldset>
 
-        <Button type="submit" loadingText="Updating profile..." loading={isSubmitting}>
-          Update profile
+        <Button type="submit" loading={isSubmitting}>
+          {isSubmitting ? 'Updating profile...' : 'Update profile'}
         </Button>
       </form>
     </Form>
diff --git a/apps/web/src/components/forms/reset-password.tsx b/apps/web/src/components/forms/reset-password.tsx
index e7c701667..354584f6e 100644
--- a/apps/web/src/components/forms/reset-password.tsx
+++ b/apps/web/src/components/forms/reset-password.tsx
@@ -125,8 +125,8 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
           />
         </fieldset>
 
-        <Button type="submit" loadingText="Resetting Password..." size="lg" loading={isSubmitting}>
-          Reset Password
+        <Button type="submit" size="lg" loading={isSubmitting}>
+          {isSubmitting ? 'Resetting Password...' : 'Reset Password'}
         </Button>
       </form>
     </Form>
diff --git a/apps/web/src/components/forms/signin.tsx b/apps/web/src/components/forms/signin.tsx
index 46173a97c..4e671a569 100644
--- a/apps/web/src/components/forms/signin.tsx
+++ b/apps/web/src/components/forms/signin.tsx
@@ -199,9 +199,8 @@ export const SignInForm = ({ className }: SignInFormProps) => {
           size="lg"
           loading={isSubmitting}
           className="dark:bg-documenso dark:hover:opacity-90"
-          loadingText="Signing in..."
         >
-          Sign In
+          {isSubmitting ? 'Signing in...' : 'Sign In'}
         </Button>
 
         <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
@@ -275,8 +274,8 @@ export const SignInForm = ({ className }: SignInFormProps) => {
                 {twoFactorAuthenticationMethod === 'totp' ? 'Use Backup Code' : 'Use Authenticator'}
               </Button>
 
-              <Button type="submit" loadingText="Signing in..." loading={isSubmitting}>
-                Sign In
+              <Button type="submit" loading={isSubmitting}>
+                {isSubmitting ? 'Signing in...' : 'Sign In'}
               </Button>
             </div>
           </form>
diff --git a/apps/web/src/components/forms/signup.tsx b/apps/web/src/components/forms/signup.tsx
index 3988314c5..b91b4a9fd 100644
--- a/apps/web/src/components/forms/signup.tsx
+++ b/apps/web/src/components/forms/signup.tsx
@@ -162,10 +162,9 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
           type="submit"
           size="lg"
           loading={isSubmitting}
-          loadingText="Signing up..."
           className="dark:bg-documenso dark:hover:opacity-90"
         >
-          Sign Up
+          {isSubmitting ? 'Signing up...' : 'Sign Up'}
         </Button>
       </form>
     </Form>
diff --git a/packages/ui/primitives/button.tsx b/packages/ui/primitives/button.tsx
index 9ee3324c6..5754b35a5 100644
--- a/packages/ui/primitives/button.tsx
+++ b/packages/ui/primitives/button.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 
 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 { cn } from '../lib/utils';
@@ -53,15 +54,10 @@ export interface ButtonProps
    * Will display the loading spinner and disable the button.
    */
   loading?: boolean;
-
-  /**
-   * The label to show in the button when `isLoading` is true
-   */
-  loadingText?: string;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, loadingText, loading, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, loading, ...props }, ref) => {
     if (asChild) {
       return (
         <Slot className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
@@ -79,7 +75,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         disabled={isDisabled}
       >
         {isLoading && <Loader className={cn('mr-2 animate-spin', loaderVariants({ size }))} />}
-        {isLoading && loadingText ? loadingText : props.children}
+        {props.children}
       </button>
     );
   },