chore: merge main, resolve biome formatting conflicts

Reconcile toolbar-filters changes with main's Kysely-based query rewrite
and biome reformatting. Notable:

- find-documents.ts: rebase on main's Kysely impl while preserving PR
  semantics (status[] / source[] filters via OR-of-predicates,
  period 'all' bypass).
- get-stats.ts: skip period filter when 'all'.
- find-templates.ts: preserve PR templateType array + query filter on
  top of main's where/include structure.
- find-documents-internal: drop preloaded team plumbing (main resolves
  team internally) and switch appMetaTags to msg`...`.
- Restore packages/lib/translations/ from HEAD (autogenerated).

apps/remix/app/components/forms/2fa/disable-authenticator-app-dialog.tsx

@@ -1,13 +1,3 @@
-import { useState } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { flushSync } from 'react-dom';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
 import { authClient } from '@documenso/auth/client';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { Button } from '@documenso/ui/primitives/button';
@@ -20,17 +10,18 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { useState } from 'react';
+import { flushSync } from 'react-dom';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 
 export const ZDisable2FAForm = z.object({
   totpCode: z.string().trim().optional(),
@@ -120,8 +111,8 @@ export const DisableAuthenticatorAppDialog = () => {
 
           <DialogDescription>
             <Trans>
-              Please provide a token from the authenticator, or a backup code. If you do not have a
-              backup code available, please contact support.
+              Please provide a token from the authenticator, or a backup code. If you do not have a backup code
+              available, please contact support.
             </Trans>
           </DialogDescription>
         </DialogHeader>
@@ -171,11 +162,7 @@ export const DisableAuthenticatorAppDialog = () => {
               )}
 
               <DialogFooter>
-                <Button
-                  type="button"
-                  variant="secondary"
-                  onClick={onToggleTwoFactorDisableMethodClick}
-                >
+                <Button type="button" variant="secondary" onClick={onToggleTwoFactorDisableMethodClick}>
                   {twoFactorDisableMethod === 'totp' ? (
                     <Trans>Use Backup Code</Trans>
                   ) : (

apps/remix/app/components/forms/2fa/enable-authenticator-app-dialog.tsx

@@ -1,13 +1,3 @@
-import { useEffect, useState } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { useForm } from 'react-hook-form';
-import { renderSVG } from 'uqr';
-import { z } from 'zod';
-
 import { authClient } from '@documenso/auth/client';
 import { downloadFile } from '@documenso/lib/client-only/download-file';
 import { useSession } from '@documenso/lib/client-only/providers/session';
@@ -22,16 +12,17 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@documenso/ui/primitives/form/form';
 import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { renderSVG } from 'uqr';
+import { z } from 'zod';
 
 import { RecoveryCodeList } from './recovery-code-list';
 
@@ -100,9 +91,7 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
 
       toast({
         title: _(msg`Two-factor authentication enabled`),
-        description: _(
-          msg`You will now be required to enter a code from your authenticator app when signing in.`,
-        ),
+        description: _(msg`You will now be required to enter a code from your authenticator app when signing in.`),
       });
     } catch (_err) {
       toast({
@@ -162,119 +151,112 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
       </DialogTrigger>
 
       <DialogContent position="center">
-        {setup2FAData && (
-          <>
-            {recoveryCodes ? (
-              <div>
+        {setup2FAData &&
+          (recoveryCodes ? (
+            <div>
+              <DialogHeader>
+                <DialogTitle>
+                  <Trans>Backup codes</Trans>
+                </DialogTitle>
+                <DialogDescription>
+                  <Trans>Your recovery codes are listed below. Please store them in a safe place.</Trans>
+                </DialogDescription>
+              </DialogHeader>
+
+              <div className="mt-4">
+                <RecoveryCodeList recoveryCodes={recoveryCodes} />
+              </div>
+
+              <DialogFooter className="mt-4">
+                <DialogClose asChild>
+                  <Button variant="secondary">
+                    <Trans>Close</Trans>
+                  </Button>
+                </DialogClose>
+
+                <Button onClick={downloadRecoveryCodes}>
+                  <Trans>Download</Trans>
+                </Button>
+              </DialogFooter>
+            </div>
+          ) : (
+            <Form {...enable2FAForm}>
+              <form onSubmit={enable2FAForm.handleSubmit(onEnable2FAFormSubmit)}>
                 <DialogHeader>
                   <DialogTitle>
-                    <Trans>Backup codes</Trans>
+                    <Trans>Enable Authenticator App</Trans>
                   </DialogTitle>
                   <DialogDescription>
                     <Trans>
-                      Your recovery codes are listed below. Please store them in a safe place.
+                      To enable two-factor authentication, scan the following QR code using your authenticator app.
                     </Trans>
                   </DialogDescription>
                 </DialogHeader>
 
-                <div className="mt-4">
-                  <RecoveryCodeList recoveryCodes={recoveryCodes} />
-                </div>
+                <fieldset disabled={isEnabling2FA} className="mt-4 flex flex-col gap-y-4">
+                  <div
+                    className="flex h-36 justify-center"
+                    dangerouslySetInnerHTML={{
+                      __html: renderSVG(setup2FAData?.uri ?? ''),
+                    }}
+                  />
 
-                <DialogFooter className="mt-4">
-                  <DialogClose asChild>
-                    <Button variant="secondary">
-                      <Trans>Close</Trans>
-                    </Button>
-                  </DialogClose>
+                  <p className="text-muted-foreground text-sm">
+                    <Trans>
+                      If your authenticator app does not support QR codes, you can use the following code instead:
+                    </Trans>
+                  </p>
 
-                  <Button onClick={downloadRecoveryCodes}>
-                    <Trans>Download</Trans>
-                  </Button>
-                </DialogFooter>
-              </div>
-            ) : (
-              <Form {...enable2FAForm}>
-                <form onSubmit={enable2FAForm.handleSubmit(onEnable2FAFormSubmit)}>
-                  <DialogHeader>
-                    <DialogTitle>
-                      <Trans>Enable Authenticator App</Trans>
-                    </DialogTitle>
-                    <DialogDescription>
-                      <Trans>
-                        To enable two-factor authentication, scan the following QR code using your
-                        authenticator app.
-                      </Trans>
-                    </DialogDescription>
-                  </DialogHeader>
+                  <p className="rounded-lg bg-muted/60 p-2 text-center font-mono text-muted-foreground tracking-widest">
+                    {setup2FAData?.secret}
+                  </p>
 
-                  <fieldset disabled={isEnabling2FA} className="mt-4 flex flex-col gap-y-4">
-                    <div
-                      className="flex h-36 justify-center"
-                      dangerouslySetInnerHTML={{
-                        __html: renderSVG(setup2FAData?.uri ?? ''),
-                      }}
-                    />
+                  <p className="text-muted-foreground text-sm">
+                    <Trans>
+                      Once you have scanned the QR code or entered the code manually, enter the code provided by your
+                      authenticator app below.
+                    </Trans>
+                  </p>
 
-                    <p className="text-muted-foreground text-sm">
-                      <Trans>
-                        If your authenticator app does not support QR codes, you can use the
-                        following code instead:
-                      </Trans>
-                    </p>
+                  <FormField
+                    name="token"
+                    control={enable2FAForm.control}
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="text-muted-foreground">
+                          <Trans>Token</Trans>
+                        </FormLabel>
+                        <FormControl>
+                          <PinInput {...field} value={field.value ?? ''} maxLength={6}>
+                            {Array(6)
+                              .fill(null)
+                              .map((_, i) => (
+                                <PinInputGroup key={i}>
+                                  <PinInputSlot index={i} />
+                                </PinInputGroup>
+                              ))}
+                          </PinInput>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
 
-                    <p className="bg-muted/60 text-muted-foreground rounded-lg p-2 text-center font-mono tracking-widest">
-                      {setup2FAData?.secret}
-                    </p>
-
-                    <p className="text-muted-foreground text-sm">
-                      <Trans>
-                        Once you have scanned the QR code or entered the code manually, enter the
-                        code provided by your authenticator app below.
-                      </Trans>
-                    </p>
-
-                    <FormField
-                      name="token"
-                      control={enable2FAForm.control}
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel className="text-muted-foreground">
-                            <Trans>Token</Trans>
-                          </FormLabel>
-                          <FormControl>
-                            <PinInput {...field} value={field.value ?? ''} maxLength={6}>
-                              {Array(6)
-                                .fill(null)
-                                .map((_, i) => (
-                                  <PinInputGroup key={i}>
-                                    <PinInputSlot index={i} />
-                                  </PinInputGroup>
-                                ))}
-                            </PinInput>
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-
-                    <DialogFooter>
-                      <DialogClose asChild>
-                        <Button variant="secondary">
-                          <Trans>Cancel</Trans>
-                        </Button>
-                      </DialogClose>
-
-                      <Button type="submit" loading={isEnabling2FA}>
-                        <Trans>Enable 2FA</Trans>
+                  <DialogFooter>
+                    <DialogClose asChild>
+                      <Button variant="secondary">
+                        <Trans>Cancel</Trans>
                       </Button>
-                    </DialogFooter>
-                  </fieldset>
-                </form>
-              </Form>
-            )}
-          </>
-        )}
+                    </DialogClose>
+
+                    <Button type="submit" loading={isEnabling2FA}>
+                      <Trans>Enable 2FA</Trans>
+                    </Button>
+                  </DialogFooter>
+                </fieldset>
+              </form>
+            </Form>
+          ))}
       </DialogContent>
     </Dialog>
   );

apps/remix/app/components/forms/2fa/recovery-code-list.tsx

@@ -1,10 +1,9 @@
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Copy } from 'lucide-react';
 
-import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
 export type RecoveryCodeListProps = {
   recoveryCodes: string[];
 };
@@ -29,9 +28,7 @@ export const RecoveryCodeList = ({ recoveryCodes }: RecoveryCodeListProps) => {
     } catch (_err) {
       toast({
         title: _(msg`Unable to copy recovery code`),
-        description: _(
-          msg`We were unable to copy your recovery code to your clipboard. Please try again.`,
-        ),
+        description: _(msg`We were unable to copy your recovery code to your clipboard. Please try again.`),
         variant: 'destructive',
       });
     }
@@ -40,17 +37,11 @@ export const RecoveryCodeList = ({ recoveryCodes }: RecoveryCodeListProps) => {
   return (
     <div className="grid grid-cols-2 gap-4">
       {recoveryCodes.map((code) => (
-        <div
-          key={code}
-          className="bg-muted text-muted-foreground relative rounded-lg p-4 font-mono md:text-center"
-        >
+        <div key={code} className="relative rounded-lg bg-muted p-4 font-mono text-muted-foreground md:text-center">
           <span>{code}</span>
 
           <div className="absolute inset-y-0 right-4 flex items-center justify-center">
-            <button
-              className="opacity-60 hover:opacity-80"
-              onClick={() => void onCopyRecoveryCodeClick(code)}
-            >
+            <button className="opacity-60 hover:opacity-80" onClick={() => void onCopyRecoveryCodeClick(code)}>
               <Copy className="h-5 w-5" />
             </button>
           </div>

apps/remix/app/components/forms/2fa/view-recovery-codes-dialog.tsx

@@ -1,11 +1,3 @@
-import { useState } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans } from '@lingui/react/macro';
-import { useForm } from 'react-hook-form';
-import { match } from 'ts-pattern';
-import { z } from 'zod';
-
 import { authClient } from '@documenso/auth/client';
 import { downloadFile } from '@documenso/lib/client-only/download-file';
 import { AppError } from '@documenso/lib/errors/app-error';
@@ -21,14 +13,14 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '@documenso/ui/primitives/form/form';
 import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans } from '@lingui/react/macro';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
+import { z } from 'zod';
 
 import { RecoveryCodeList } from './recovery-code-list';
 
@@ -97,9 +89,7 @@ export const ViewRecoveryCodesDialog = () => {
               </DialogTitle>
 
               <DialogDescription>
-                <Trans>
-                  Your recovery codes are listed below. Please store them in a safe place.
-                </Trans>
+                <Trans>Your recovery codes are listed below. Please store them in a safe place.</Trans>
               </DialogDescription>
             </DialogHeader>
 
@@ -156,9 +146,7 @@ export const ViewRecoveryCodesDialog = () => {
                   <Alert variant="destructive">
                     <AlertDescription>
                       {match(AppError.parseError(error).message)
-                        .with('INCORRECT_TWO_FACTOR_CODE', () => (
-                          <Trans>Invalid code. Please try again.</Trans>
-                        ))
+                        .with('INCORRECT_TWO_FACTOR_CODE', () => <Trans>Invalid code. Please try again.</Trans>)
                         .otherwise(() => (
                           <Trans>Something went wrong. Please try again or contact support.</Trans>
                         ))}

apps/remix/app/components/forms/avatar-image.tsx

@@ -1,14 +1,3 @@
-import { useMemo } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { ErrorCode, useDropzone } from 'react-dropzone';
-import { useForm } from 'react-hook-form';
-import { match } from 'ts-pattern';
-import { z } from 'zod';
-
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { AppError } from '@documenso/lib/errors/app-error';
 import { base64 } from '@documenso/lib/universal/base64';
@@ -18,15 +7,17 @@ import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
 import { Button } from '@documenso/ui/primitives/button';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@documenso/ui/primitives/form/form';
 import { useToast } from '@documenso/ui/primitives/use-toast';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { useMemo } from 'react';
+import { ErrorCode, useDropzone } from 'react-dropzone';
+import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
+import { z } from 'zod';
 
 export const ZAvatarImageFormSchema = z.object({
   bytes: z.string().nullish(),
@@ -69,11 +60,7 @@ export const AvatarImageForm = ({ className, team, organisation }: AvatarImageFo
     return user.avatarImageId !== null;
   }, [team, organisation, user.avatarImageId]);
 
-  const avatarImageId = team
-    ? team.avatarImageId
-    : organisation
-      ? organisation.avatarImageId
-      : user.avatarImageId;
+  const avatarImageId = team ? team.avatarImageId : organisation ? organisation.avatarImageId : user.avatarImageId;
 
   const form = useForm<TAvatarImageFormSchema>({
     values: {
@@ -127,8 +114,7 @@ export const AvatarImageForm = ({ className, team, organisation }: AvatarImageFo
       const error = AppError.parseError(err);
 
       const errorMessage = match(error.code).otherwise(
-        () =>
-          msg`We encountered an unknown error while attempting to update your password. Please try again later.`,
+        () => msg`We encountered an unknown error while attempting to update your password. Please try again later.`,
       );
 
       toast({
@@ -160,15 +146,13 @@ export const AvatarImageForm = ({ className, team, organisation }: AvatarImageFo
                     <div className="relative">
                       <Avatar className="h-16 w-16 border-2 border-solid">
                         {avatarImageId && <AvatarImage src={formatAvatarUrl(avatarImageId)} />}
-                        <AvatarFallback className="text-sm text-gray-400">
-                          {initials}
-                        </AvatarFallback>
+                        <AvatarFallback className="text-gray-400 text-sm">{initials}</AvatarFallback>
                       </Avatar>
 
                       {hasAvatarImage && (
                         <button
                           type="button"
-                          className="bg-background/70 text-destructive absolute inset-0 flex cursor-pointer items-center justify-center text-xs opacity-0 transition-opacity hover:opacity-100"
+                          className="absolute inset-0 flex cursor-pointer items-center justify-center bg-background/70 text-destructive text-xs opacity-0 transition-opacity hover:opacity-100"
                           disabled={form.formState.isSubmitting}
                           onClick={() => void onFormSubmit({ bytes: null })}
                         >

apps/remix/app/components/forms/branding-preferences-form.tsx

@@ -1,35 +1,25 @@
-import { useEffect, useState } from 'react';
-
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { DEFAULT_BRAND_COLORS, DEFAULT_BRAND_RADIUS } from '@documenso/lib/constants/theme';
+import { ZCssVarsSchema } from '@documenso/lib/types/css-vars';
+import { cn } from '@documenso/ui/lib/utils';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@documenso/ui/primitives/accordion';
+import { Button } from '@documenso/ui/primitives/button';
+import { ColorPicker } from '@documenso/ui/primitives/color-picker';
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel } from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
+import { Textarea } from '@documenso/ui/primitives/textarea';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
 import type { TeamGlobalSettings } from '@prisma/client';
 import { Loader } from 'lucide-react';
+import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
-import { Textarea } from '@documenso/ui/primitives/textarea';
-
 import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCspNonce } from '~/utils/nonce';
 
 const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
 const ACCEPTED_FILE_TYPES = ['image/jpeg', 'image/png', 'image/webp'];
@@ -39,24 +29,24 @@ const ZBrandingPreferencesFormSchema = z.object({
   brandingLogo: z
     .instanceof(File)
     .refine((file) => file.size <= MAX_FILE_SIZE, 'File size must be less than 5MB')
-    .refine(
-      (file) => ACCEPTED_FILE_TYPES.includes(file.type),
-      'Only .jpg, .png, and .webp files are accepted',
-    )
+    .refine((file) => ACCEPTED_FILE_TYPES.includes(file.type), 'Only .jpg, .png, and .webp files are accepted')
     .nullish(),
   brandingUrl: z.string().url().optional().or(z.literal('')),
   brandingCompanyDetails: z.string().max(500).optional(),
+  brandingColors: ZCssVarsSchema.default({}),
+  brandingCss: z.string().max(10_000).default(''),
 });
 
 export type TBrandingPreferencesFormSchema = z.infer<typeof ZBrandingPreferencesFormSchema>;
 
 type SettingsSubset = Pick<
   TeamGlobalSettings,
-  'brandingEnabled' | 'brandingLogo' | 'brandingUrl' | 'brandingCompanyDetails'
+  'brandingEnabled' | 'brandingLogo' | 'brandingUrl' | 'brandingCompanyDetails' | 'brandingColors' | 'brandingCss'
 >;
 
 export type BrandingPreferencesFormProps = {
   canInherit?: boolean;
+  hasAdvancedBranding: boolean;
   settings: SettingsSubset;
   onFormSubmit: (data: TBrandingPreferencesFormSchema) => Promise<void>;
   context: 'Team' | 'Organisation';
@@ -64,11 +54,13 @@ export type BrandingPreferencesFormProps = {
 
 export function BrandingPreferencesForm({
   canInherit = false,
+  hasAdvancedBranding,
   settings,
   onFormSubmit,
   context,
 }: BrandingPreferencesFormProps) {
   const { t } = useLingui();
+  const nonce = useCspNonce();
 
   const team = useOptionalCurrentTeam();
   const organisation = useCurrentOrganisation();
@@ -76,12 +68,17 @@ export function BrandingPreferencesForm({
   const [previewUrl, setPreviewUrl] = useState<string>('');
   const [hasLoadedPreview, setHasLoadedPreview] = useState(false);
 
+  const parsedColors = ZCssVarsSchema.safeParse(settings.brandingColors);
+  const initialColors = parsedColors.success ? parsedColors.data : {};
+
   const form = useForm<TBrandingPreferencesFormSchema>({
-    defaultValues: {
+    values: {
       brandingEnabled: settings.brandingEnabled ?? null,
       brandingUrl: settings.brandingUrl ?? '',
       brandingLogo: undefined,
       brandingCompanyDetails: settings.brandingCompanyDetails ?? '',
+      brandingColors: initialColors,
+      brandingCss: settings.brandingCss ?? '',
     },
     resolver: zodResolver(ZBrandingPreferencesFormSchema),
   });
@@ -98,7 +95,7 @@ export function BrandingPreferencesForm({
             ? `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/team/${team?.id}`
             : `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/organisation/${organisation?.id}`;
 
-        setPreviewUrl(logoUrl);
+        setPreviewUrl(logoUrl + '?v=' + Date.now());
         setHasLoadedPreview(true);
       }
     }
@@ -136,10 +133,7 @@ export function BrandingPreferencesForm({
                       field.onChange(value === 'true' ? true : value === 'false' ? false : null)
                     }
                   >
-                    <SelectTrigger
-                      className="bg-background text-muted-foreground"
-                      data-testid="enable-branding"
-                    >
+                    <SelectTrigger className="bg-background text-muted-foreground" data-testid="enable-branding">
                       <SelectValue />
                     </SelectTrigger>
 
@@ -173,7 +167,7 @@ export function BrandingPreferencesForm({
           />
 
           <div className="relative flex w-full flex-col gap-y-4">
-            {!isBrandingEnabled && <div className="bg-background/60 absolute inset-0 z-[9998]" />}
+            {!isBrandingEnabled && <div className="absolute inset-0 z-[9998] bg-background/60" />}
 
             <FormField
               control={form.control}
@@ -185,20 +179,16 @@ export function BrandingPreferencesForm({
                   </FormLabel>
 
                   <div className="flex flex-col gap-4">
-                    <div className="border-border bg-background relative h-48 w-full overflow-hidden rounded-lg border">
+                    <div className="relative h-48 w-full overflow-hidden rounded-lg border border-border bg-background">
                       {previewUrl ? (
-                        <img
-                          src={previewUrl}
-                          alt="Logo preview"
-                          className="h-full w-full object-contain p-4"
-                        />
+                        <img src={previewUrl} alt="Logo preview" className="h-full w-full object-contain p-4" />
                       ) : (
-                        <div className="bg-muted/20 dark:bg-muted text-muted-foreground relative flex h-full w-full items-center justify-center text-sm">
+                        <div className="relative flex h-full w-full items-center justify-center bg-muted/20 text-muted-foreground text-sm dark:bg-muted">
                           <Trans>Please upload a logo</Trans>
 
                           {!hasLoadedPreview && (
-                            <div className="bg-muted dark:bg-muted absolute inset-0 z-[999] flex items-center justify-center">
-                              <Loader className="text-muted-foreground h-8 w-8 animate-spin" />
+                            <div className="absolute inset-0 z-[999] flex items-center justify-center bg-muted dark:bg-muted">
+                              <Loader className="h-8 w-8 animate-spin text-muted-foreground" />
                             </div>
                           )}
                         </div>
@@ -238,7 +228,7 @@ export function BrandingPreferencesForm({
                         />
                       </FormControl>
 
-                      <div className="absolute right-2 top-0 inline-flex h-full items-center justify-center">
+                      <div className="absolute top-0 right-2 inline-flex h-full items-center justify-center">
                         <Button
                           type="button"
                           variant="link"
@@ -279,12 +269,7 @@ export function BrandingPreferencesForm({
                   </FormLabel>
 
                   <FormControl>
-                    <Input
-                      type="url"
-                      placeholder="https://example.com"
-                      disabled={!isBrandingEnabled}
-                      {...field}
-                    />
+                    <Input type="url" placeholder="https://example.com" disabled={!isBrandingEnabled} {...field} />
                   </FormControl>
 
                   <FormDescription>
@@ -334,6 +319,225 @@ export function BrandingPreferencesForm({
             />
           </div>
 
+          {hasAdvancedBranding && (
+            <div className="relative flex w-full flex-col gap-y-6">
+              {!isBrandingEnabled && <div className="absolute inset-0 z-[9998] bg-background/60" />}
+
+              <div>
+                <FormLabel>
+                  <Trans>Brand Colours</Trans>
+                </FormLabel>
+
+                <FormDescription className="mt-1 mb-4">
+                  <Trans>Customise the colours used on your signing pages.</Trans>
+                </FormDescription>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <FormField
+                    control={form.control}
+                    name="brandingColors.background"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          <Trans>Background</Trans>
+                        </FormLabel>
+                        <FormDescription>
+                          <Trans>Base background colour.</Trans>
+                        </FormDescription>
+                        <FormControl>
+                          <ColorPicker
+                            nonce={nonce}
+                            value={field.value ?? ''}
+                            defaultValue={DEFAULT_BRAND_COLORS.background}
+                            onChange={(color) => field.onChange(color)}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="brandingColors.foreground"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          <Trans>Foreground</Trans>
+                        </FormLabel>
+                        <FormDescription>
+                          <Trans>Base text colour.</Trans>
+                        </FormDescription>
+                        <FormControl>
+                          <ColorPicker
+                            nonce={nonce}
+                            value={field.value ?? ''}
+                            defaultValue={DEFAULT_BRAND_COLORS.foreground}
+                            onChange={(color) => field.onChange(color)}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="brandingColors.primary"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          <Trans>Primary</Trans>
+                        </FormLabel>
+                        <FormDescription>
+                          <Trans>Primary action colour.</Trans>
+                        </FormDescription>
+                        <FormControl>
+                          <ColorPicker
+                            nonce={nonce}
+                            value={field.value ?? ''}
+                            defaultValue={DEFAULT_BRAND_COLORS.primary}
+                            onChange={(color) => field.onChange(color)}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="brandingColors.primaryForeground"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          <Trans>Primary Foreground</Trans>
+                        </FormLabel>
+                        <FormDescription>
+                          <Trans>Text colour on primary buttons.</Trans>
+                        </FormDescription>
+                        <FormControl>
+                          <ColorPicker
+                            nonce={nonce}
+                            value={field.value ?? ''}
+                            defaultValue={DEFAULT_BRAND_COLORS.primaryForeground}
+                            onChange={(color) => field.onChange(color)}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="brandingColors.border"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          <Trans>Border</Trans>
+                        </FormLabel>
+                        <FormDescription>
+                          <Trans>Default border colour.</Trans>
+                        </FormDescription>
+                        <FormControl>
+                          <ColorPicker
+                            nonce={nonce}
+                            value={field.value ?? ''}
+                            defaultValue={DEFAULT_BRAND_COLORS.border}
+                            onChange={(color) => field.onChange(color)}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="brandingColors.ring"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          <Trans>Ring</Trans>
+                        </FormLabel>
+                        <FormDescription>
+                          <Trans>Focus ring colour.</Trans>
+                        </FormDescription>
+                        <FormControl>
+                          <ColorPicker
+                            nonce={nonce}
+                            value={field.value ?? ''}
+                            defaultValue={DEFAULT_BRAND_COLORS.ring}
+                            onChange={(color) => field.onChange(color)}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                </div>
+
+                <div className="mt-4">
+                  <FormField
+                    control={form.control}
+                    name="brandingColors.radius"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          <Trans>Border Radius</Trans>
+                        </FormLabel>
+                        <FormControl>
+                          <Input
+                            type="text"
+                            placeholder={DEFAULT_BRAND_RADIUS}
+                            value={field.value ?? ''}
+                            onChange={(e) => field.onChange(e.target.value)}
+                          />
+                        </FormControl>
+                        <FormDescription>
+                          <Trans>Border radius size in REM units (e.g. 0.5rem).</Trans>
+                        </FormDescription>
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              </div>
+
+              <Accordion type="single" collapsible>
+                <AccordionItem value="custom-css" className="border-none">
+                  <AccordionTrigger className="rounded border px-3 py-2 text-left text-foreground hover:bg-muted/40 hover:no-underline">
+                    <Trans>Advanced — Custom CSS</Trans>
+                  </AccordionTrigger>
+
+                  <AccordionContent className="-mx-1 px-1 pt-4 text-muted-foreground text-sm leading-relaxed">
+                    <FormField
+                      control={form.control}
+                      name="brandingCss"
+                      render={({ field }) => (
+                        <FormItem className="flex-1">
+                          <FormControl>
+                            <Textarea
+                              placeholder={t`/* Write CSS targeting your signing pages. Selectors are scoped automatically. */
+.my-button {
+  background: red;
+}`}
+                              className="min-h-[200px] font-mono text-xs"
+                              {...field}
+                              value={field.value ?? ''}
+                            />
+                          </FormControl>
+
+                          <FormDescription>
+                            <Trans>
+                              Custom CSS is sanitised on save. Layout-breaking properties, remote URLs, and
+                              pseudo-elements are stripped automatically. Any rules dropped during sanitisation will be
+                              shown after you save.
+                            </Trans>
+                          </FormDescription>
+                        </FormItem>
+                      )}
+                    />
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+            </div>
+          )}
+
           <div className="flex flex-row justify-end space-x-4">
             <Button type="submit" loading={form.formState.isSubmitting}>
               <Trans>Update</Trans>

apps/remix/app/components/forms/document-preferences-form.tsx

@@ -1,32 +1,23 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react/macro';
-import { Trans } from '@lingui/react/macro';
-import type { TeamGlobalSettings } from '@prisma/client';
-import { DocumentVisibility, OrganisationType, type RecipientRole } from '@prisma/client';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { DATE_FORMATS } from '@documenso/lib/constants/date-formats';
 import { DOCUMENT_SIGNATURE_TYPES, DocumentSignatureType } from '@documenso/lib/constants/document';
 import {
-  SUPPORTED_LANGUAGES,
-  SUPPORTED_LANGUAGE_CODES,
-  isValidLanguageCode,
-} from '@documenso/lib/constants/i18n';
+  type TEnvelopeExpirationPeriod,
+  ZEnvelopeExpirationPeriod,
+} from '@documenso/lib/constants/envelope-expiration';
+import { type TEnvelopeReminderSettings, ZEnvelopeReminderSettings } from '@documenso/lib/constants/envelope-reminder';
+import { isValidLanguageCode, SUPPORTED_LANGUAGE_CODES, SUPPORTED_LANGUAGES } from '@documenso/lib/constants/i18n';
 import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import type { TDefaultRecipients } from '@documenso/lib/types/default-recipients';
 import { ZDefaultRecipientsSchema } from '@documenso/lib/types/default-recipients';
-import {
-  type TDocumentMetaDateFormat,
-  ZDocumentMetaTimezoneSchema,
-} from '@documenso/lib/types/document-meta';
+import { type TDocumentMetaDateFormat, ZDocumentMetaTimezoneSchema } from '@documenso/lib/types/document-meta';
 import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import { extractTeamSignatureSettings } from '@documenso/lib/utils/teams';
 import { DocumentSignatureSettingsTooltip } from '@documenso/ui/components/document/document-signature-settings-tooltip';
+import { ExpirationPeriodPicker } from '@documenso/ui/components/document/expiration-period-picker';
+import { ReminderSettingsPicker } from '@documenso/ui/components/document/reminder-settings-picker';
 import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
 import { Alert } from '@documenso/ui/primitives/alert';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
@@ -42,13 +33,15 @@ import {
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { MultiSelectCombobox } from '@documenso/ui/primitives/multi-select-combobox';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg, t } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { TeamGlobalSettings } from '@prisma/client';
+import { DocumentVisibility, OrganisationType, type RecipientRole } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 
 import { useOptionalCurrentTeam } from '~/providers/team';
 
@@ -70,6 +63,8 @@ export type TDocumentPreferencesFormSchema = {
   defaultRecipients: TDefaultRecipients | null;
   delegateDocumentOwnership: boolean | null;
   aiFeaturesEnabled: boolean | null;
+  envelopeExpirationPeriod: TEnvelopeExpirationPeriod | null;
+  reminderSettings: TEnvelopeReminderSettings | null;
 };
 
 type SettingsSubset = Pick<
@@ -87,6 +82,8 @@ type SettingsSubset = Pick<
   | 'defaultRecipients'
   | 'delegateDocumentOwnership'
   | 'aiFeaturesEnabled'
+  | 'envelopeExpirationPeriod'
+  | 'reminderSettings'
 >;
 
 export type DocumentPreferencesFormProps = {
@@ -102,7 +99,7 @@ export const DocumentPreferencesForm = ({
   canInherit,
   isAiFeaturesConfigured = false,
 }: DocumentPreferencesFormProps) => {
-  const { t } = useLingui();
+  const { _ } = useLingui();
   const { user, organisations } = useSession();
   const currentOrganisation = useCurrentOrganisation();
   const optionalTeam = useOptionalCurrentTeam();
@@ -126,14 +123,14 @@ export const DocumentPreferencesForm = ({
     defaultRecipients: ZDefaultRecipientsSchema.nullable(),
     delegateDocumentOwnership: z.boolean().nullable(),
     aiFeaturesEnabled: z.boolean().nullable(),
+    envelopeExpirationPeriod: ZEnvelopeExpirationPeriod.nullable(),
+    reminderSettings: ZEnvelopeReminderSettings.nullable(),
   });
 
   const form = useForm<TDocumentPreferencesFormSchema>({
     defaultValues: {
       documentVisibility: settings.documentVisibility,
-      documentLanguage: isValidLanguageCode(settings.documentLanguage)
-        ? settings.documentLanguage
-        : null,
+      documentLanguage: isValidLanguageCode(settings.documentLanguage) ? settings.documentLanguage : null,
       documentTimezone: settings.documentTimezone,
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       documentDateFormat: settings.documentDateFormat as TDocumentMetaDateFormat | null,
@@ -141,11 +138,11 @@ export const DocumentPreferencesForm = ({
       includeSigningCertificate: settings.includeSigningCertificate,
       includeAuditLog: settings.includeAuditLog,
       signatureTypes: extractTeamSignatureSettings({ ...settings }),
-      defaultRecipients: settings.defaultRecipients
-        ? ZDefaultRecipientsSchema.parse(settings.defaultRecipients)
-        : null,
+      defaultRecipients: settings.defaultRecipients ? ZDefaultRecipientsSchema.parse(settings.defaultRecipients) : null,
       delegateDocumentOwnership: settings.delegateDocumentOwnership,
       aiFeaturesEnabled: settings.aiFeaturesEnabled,
+      envelopeExpirationPeriod: settings.envelopeExpirationPeriod ?? null,
+      reminderSettings: settings.reminderSettings ?? null,
     },
     resolver: zodResolver(ZDocumentPreferencesFormSchema),
   });
@@ -153,10 +150,7 @@ export const DocumentPreferencesForm = ({
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onFormSubmit)}>
-        <fieldset
-          className="flex h-full max-w-2xl flex-col gap-y-6"
-          disabled={form.formState.isSubmitting}
-        >
+        <fieldset className="flex h-full max-w-2xl flex-col gap-y-6" disabled={form.formState.isSubmitting}>
           {!isPersonalLayoutMode && (
             <FormField
               control={form.control}
@@ -233,7 +227,7 @@ export const DocumentPreferencesForm = ({
                     <SelectContent>
                       {Object.entries(SUPPORTED_LANGUAGES).map(([code, language]) => (
                         <SelectItem key={code} value={code}>
-                          {language.full}
+                          {_(language.full)}
                         </SelectItem>
                       ))}
 
@@ -246,8 +240,8 @@ export const DocumentPreferencesForm = ({
 
                 <FormDescription>
                   <Trans>
-                    Controls the default language of an uploaded document. This will be used as the
-                    language in email communications with the recipients.
+                    Controls the default language of an uploaded document. This will be used as the language in email
+                    communications with the recipients.
                   </Trans>
                 </FormDescription>
               </FormItem>
@@ -304,9 +298,7 @@ export const DocumentPreferencesForm = ({
 
                 <FormControl>
                   <Combobox
-                    triggerPlaceholder={
-                      canInherit ? t`Inherit from organisation` : t`Local timezone`
-                    }
+                    triggerPlaceholder={canInherit ? t`Inherit from organisation` : t`Local timezone`}
                     placeholder={t`Select a time zone`}
                     options={TIME_ZONES}
                     value={field.value}
@@ -333,16 +325,14 @@ export const DocumentPreferencesForm = ({
                 <FormControl>
                   <MultiSelectCombobox
                     options={Object.values(DOCUMENT_SIGNATURE_TYPES).map((option) => ({
-                      label: t(option.label),
+                      label: _(option.label),
                       value: option.value,
                     }))}
                     selectedValues={field.value}
                     onChange={field.onChange}
                     className="w-full bg-background"
                     enableSearch={false}
-                    emptySelectionPlaceholder={
-                      canInherit ? t`Inherit from organisation` : t`Select signature types`
-                    }
+                    emptySelectionPlaceholder={canInherit ? t`Inherit from organisation` : t`Select signature types`}
                     testId="signature-types-trigger"
                   />
                 </FormControl>
@@ -351,9 +341,7 @@ export const DocumentPreferencesForm = ({
                   <FormMessage />
                 ) : (
                   <FormDescription>
-                    <Trans>
-                      Controls which signatures are allowed to be used when signing a document.
-                    </Trans>
+                    <Trans>Controls which signatures are allowed to be used when signing a document.</Trans>
                   </FormDescription>
                 )}
               </FormItem>
@@ -404,15 +392,14 @@ export const DocumentPreferencesForm = ({
                   </FormControl>
 
                   <div className="pt-2">
-                    <div className="text-xs font-medium text-muted-foreground">
+                    <div className="font-medium text-muted-foreground text-xs">
                       <Trans>Preview</Trans>
                     </div>
 
                     <Alert variant="neutral" className="mt-1 px-2.5 py-1.5 text-sm">
                       {field.value ? (
                         <Trans>
-                          "{placeholderEmail}" on behalf of "Team Name" has invited you to sign
-                          "example document".
+                          "{placeholderEmail}" on behalf of "Team Name" has invited you to sign "example document".
                         </Trans>
                       ) : (
                         <Trans>"Team Name" has invited you to sign "example document".</Trans>
@@ -422,9 +409,9 @@ export const DocumentPreferencesForm = ({
 
                   <FormDescription>
                     <Trans>
-                      Controls the formatting of the message that will be sent when inviting a
-                      recipient to sign a document. If a custom message has been provided while
-                      configuring the document, it will be used instead.
+                      Controls the formatting of the message that will be sent when inviting a recipient to sign a
+                      document. If a custom message has been provided while configuring the document, it will be used
+                      instead.
                     </Trans>
                   </FormDescription>
                 </FormItem>
@@ -476,9 +463,8 @@ export const DocumentPreferencesForm = ({
 
                 <FormDescription>
                   <Trans>
-                    Controls whether the signing certificate will be included in the document when
-                    it is downloaded. The signing certificate can still be downloaded from the logs
-                    page separately.
+                    Controls whether the signing certificate will be included in the document when it is downloaded. The
+                    signing certificate can still be downloaded from the logs page separately.
                   </Trans>
                 </FormDescription>
               </FormItem>
@@ -526,9 +512,8 @@ export const DocumentPreferencesForm = ({
 
                 <FormDescription>
                   <Trans>
-                    Controls whether the audit logs will be included in the document when it is
-                    downloaded. The audit logs can still be downloaded from the logs page
-                    separately.
+                    Controls whether the audit logs will be included in the document when it is downloaded. The audit
+                    logs can still be downloaded from the logs page separately.
                   </Trans>
                 </FormDescription>
               </FormItem>
@@ -584,15 +569,11 @@ export const DocumentPreferencesForm = ({
                             <AvatarWithText
                               avatarFallback={recipientAbbreviation(recipient)}
                               primaryText={
-                                <span className="text-sm font-medium">
-                                  {recipient.name || recipient.email}
-                                </span>
+                                <span className="font-medium text-sm">{recipient.name || recipient.email}</span>
                               }
                               secondaryText={
                                 recipient.name ? (
-                                  <span className="text-xs text-muted-foreground">
-                                    {recipient.email}
-                                  </span>
+                                  <span className="text-muted-foreground text-xs">{recipient.email}</span>
                                 ) : undefined
                               }
                               className="flex-1"
@@ -635,9 +616,7 @@ export const DocumentPreferencesForm = ({
                 <Select
                   {...field}
                   value={field.value === null ? '-1' : field.value.toString()}
-                  onValueChange={(value) =>
-                    field.onChange(value === 'true' ? true : value === 'false' ? false : null)
-                  }
+                  onValueChange={(value) => field.onChange(value === 'true' ? true : value === 'false' ? false : null)}
                 >
                   <SelectTrigger className="bg-background text-muted-foreground">
                     <SelectValue />
@@ -660,11 +639,67 @@ export const DocumentPreferencesForm = ({
                   </SelectContent>
                 </Select>
 
+                <FormDescription>
+                  <Trans>Enable team API tokens to delegate document ownership to another team member.</Trans>
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="envelopeExpirationPeriod"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Default Envelope Expiration</Trans>
+                </FormLabel>
+
+                <FormControl>
+                  <ExpirationPeriodPicker
+                    value={field.value}
+                    onChange={field.onChange}
+                    inheritLabel={canInherit ? t`Inherit from organisation` : undefined}
+                  />
+                </FormControl>
+
                 <FormDescription>
                   <Trans>
-                    Enable team API tokens to delegate document ownership to another team member.
+                    Controls how long recipients have to complete signing before the document expires. After expiration,
+                    recipients can no longer sign the document.
                   </Trans>
                 </FormDescription>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="reminderSettings"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Default Signing Reminders</Trans>
+                </FormLabel>
+
+                <FormControl>
+                  <ReminderSettingsPicker
+                    value={field.value}
+                    onChange={field.onChange}
+                    inheritLabel={canInherit ? t`Inherit from organisation` : undefined}
+                  />
+                </FormControl>
+
+                <FormDescription>
+                  <Trans>
+                    Controls when and how often reminder emails are sent to recipients who have not yet completed
+                    signing.
+                  </Trans>
+                </FormDescription>
+
+                <FormMessage />
               </FormItem>
             )}
           />
@@ -711,10 +746,9 @@ export const DocumentPreferencesForm = ({
 
                   <FormDescription>
                     <Trans>
-                      Enable AI-powered features such as automatic recipient detection. When
-                      enabled, document content will be sent to AI providers. We only use providers
-                      that do not retain data for training and prefer European regions where
-                      available.
+                      Enable AI-powered features such as automatic recipient detection. When enabled, document content
+                      will be sent to AI providers. We only use providers that do not retain data for training and
+                      prefer European regions where available.
                     </Trans>
                   </FormDescription>
                 </FormItem>

apps/remix/app/components/forms/editor/editor-field-checkbox-form.tsx

@@ -1,12 +1,3 @@
-import { useEffect, useMemo } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
-import { PlusIcon, Trash } from 'lucide-react';
-import { useForm, useWatch } from 'react-hook-form';
-import { z } from 'zod';
-
 import { validateCheckboxLength } from '@documenso/lib/advanced-fields-validation/validate-checkbox';
 import {
   type TCheckboxFieldMeta as CheckboxFieldMeta,
@@ -20,23 +11,17 @@ import {
   checkboxValidationRules,
   checkboxValidationSigns,
 } from '@documenso/ui/primitives/document-flow/field-items-advanced-settings/constants';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
 import { Separator } from '@documenso/ui/primitives/separator';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import { PlusIcon, Trash } from 'lucide-react';
+import { useEffect, useMemo } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { z } from 'zod';
 
 import {
   EditorGenericFontSizeField,
@@ -150,19 +135,13 @@ export const EditorFieldCheckboxForm = ({
     const preselectedValues = (formValues.values || [])?.filter((value) => value.checked);
 
     if (formValues.validationLength && formValues.validationRule && preselectedValues.length > 0) {
-      const validationRule = checkboxValidationSigns.find(
-        (sign) => sign.label === formValues.validationRule,
-      );
+      const validationRule = checkboxValidationSigns.find((sign) => sign.label === formValues.validationRule);
 
       if (!validationRule) {
         return false;
       }
 
-      return validateCheckboxLength(
-        preselectedValues.length,
-        validationRule.value,
-        formValues.validationLength,
-      );
+      return validateCheckboxLength(preselectedValues.length, validationRule.value, formValues.validationLength);
     }
 
     return true;
@@ -184,7 +163,10 @@ export const EditorFieldCheckboxForm = ({
                 </FormLabel>
                 <FormControl>
                   <Select value={field.value} onValueChange={field.onChange}>
-                    <SelectTrigger className="text-muted-foreground bg-background w-full">
+                    <SelectTrigger
+                      data-testid="field-form-direction"
+                      className="w-full bg-background text-muted-foreground"
+                    >
                       <SelectValue placeholder={t`Select direction`} />
                     </SelectTrigger>
                     <SelectContent position="popper">
@@ -214,7 +196,10 @@ export const EditorFieldCheckboxForm = ({
                     </FormLabel>
                     <FormControl>
                       <Select {...field} onValueChange={field.onChange}>
-                        <SelectTrigger className="text-muted-foreground bg-background w-full">
+                        <SelectTrigger
+                          data-testid="field-form-validationRule"
+                          className="w-full bg-background text-muted-foreground"
+                        >
                           <SelectValue placeholder={t`Select at least`} />
                         </SelectTrigger>
                         <SelectContent position="popper">
@@ -245,8 +230,7 @@ export const EditorFieldCheckboxForm = ({
 
                           const currentValues = formValues.values || [];
 
-                          const minimumNumberOfValuesRequired =
-                            validationNumber - currentValues.length;
+                          const minimumNumberOfValuesRequired = validationNumber - currentValues.length;
 
                           if (!formValues.validationRule) {
                             form.setValue('validationRule', checkboxValidationRules[0]);
@@ -260,7 +244,10 @@ export const EditorFieldCheckboxForm = ({
                           void form.trigger();
                         }}
                       >
-                        <SelectTrigger className="text-muted-foreground bg-background mt-5 w-full">
+                        <SelectTrigger
+                          data-testid="field-form-validationLength"
+                          className="mt-5 w-full bg-background text-muted-foreground"
+                        >
                           <SelectValue placeholder={t`Pick a number`} />
                         </SelectTrigger>
                         <SelectContent position="popper">
@@ -286,16 +273,16 @@ export const EditorFieldCheckboxForm = ({
           <EditorGenericReadOnlyField formControl={form.control} />
 
           <section className="space-y-2">
-            <div className="-mx-4 mb-4 mt-2">
+            <div className="-mx-4 mt-2 mb-4">
               <Separator />
             </div>
 
             <div className="flex flex-row items-center justify-between gap-2">
-              <p className="text-sm font-medium">
+              <p className="font-medium text-sm">
                 <Trans>Checkbox values</Trans>
               </p>
 
-              <button type="button" onClick={() => addValue()}>
+              <button type="button" data-testid="field-form-values-add" onClick={() => addValue()}>
                 <PlusIcon className="h-4 w-4" />
               </button>
             </div>
@@ -310,7 +297,8 @@ export const EditorFieldCheckboxForm = ({
                       <FormItem>
                         <FormControl>
                           <Checkbox
-                            className="data-[state=checked]:bg-primary border-foreground/30 h-5 w-5"
+                            data-testid={`field-form-values-${index}-checked`}
+                            className="h-5 w-5 border-foreground/30 data-[state=checked]:bg-primary"
                             checked={field.value}
                             onCheckedChange={field.onChange}
                           />
@@ -325,7 +313,7 @@ export const EditorFieldCheckboxForm = ({
                     render={({ field }) => (
                       <FormItem>
                         <FormControl>
-                          <Input className="w-full" {...field} />
+                          <Input data-testid={`field-form-values-${index}-value`} className="w-full" {...field} />
                         </FormControl>
                       </FormItem>
                     )}
@@ -333,6 +321,7 @@ export const EditorFieldCheckboxForm = ({
 
                   <button
                     type="button"
+                    data-testid={`field-form-values-${index}-remove`}
                     className="flex h-10 w-10 items-center justify-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
                     onClick={() => removeValue(index)}
                   >
@@ -345,9 +334,7 @@ export const EditorFieldCheckboxForm = ({
             {!isValidationRuleMetForPreselectedValues && (
               <Alert variant="warning">
                 <AlertDescription>
-                  <Trans>
-                    The preselected values will be ignored unless they meet the validation criteria.
-                  </Trans>
+                  <Trans>The preselected values will be ignored unless they meet the validation criteria.</Trans>
                 </AlertDescription>
               </Alert>
             )}

apps/remix/app/components/forms/editor/editor-field-date-form.tsx

@@ -1,31 +1,28 @@
-import { useEffect } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm, useWatch } from 'react-hook-form';
-import type { z } from 'zod';
-
 import {
-  DEFAULT_FIELD_FONT_SIZE,
   type TDateFieldMeta as DateFieldMeta,
+  DEFAULT_FIELD_FONT_SIZE,
+  FIELD_DATE_META_DEFAULT_VALUES,
   FIELD_DEFAULT_GENERIC_ALIGN,
   ZDateFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import { Form } from '@documenso/ui/primitives/form/form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useEffect } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import type { z } from 'zod';
 
-import {
-  EditorGenericFontSizeField,
-  EditorGenericTextAlignField,
-} from './editor-field-generic-field-forms';
+import { EditorGenericFontSizeField, EditorGenericTextAlignField } from './editor-field-generic-field-forms';
 
 const ZDateFieldFormSchema = ZDateFieldMeta.pick({
   fontSize: true,
   textAlign: true,
+  overflow: true,
 });
 
 type TDateFieldFormSchema = z.infer<typeof ZDateFieldFormSchema>;
 
 type EditorFieldDateFormProps = {
-  value: DateFieldMeta | undefined;
+  value: z.input<typeof ZDateFieldMeta> | undefined;
   onValueChange: (value: DateFieldMeta) => void;
 };
 
@@ -41,6 +38,7 @@ export const EditorFieldDateForm = ({
     defaultValues: {
       fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
       textAlign: value.textAlign ?? FIELD_DEFAULT_GENERIC_ALIGN,
+      overflow: value.overflow || FIELD_DATE_META_DEFAULT_VALUES.overflow,
     },
   });
 

apps/remix/app/components/forms/editor/editor-field-dropdown-form.tsx

@@ -1,35 +1,16 @@
-import { useEffect } from 'react';
-
+import { DEFAULT_FIELD_FONT_SIZE, type TDropdownFieldMeta as DropdownFieldMeta } from '@documenso/lib/types/field-meta';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
+import { Separator } from '@documenso/ui/primitives/separator';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react/macro';
-import { Trans } from '@lingui/react/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { PlusIcon, Trash } from 'lucide-react';
+import { useEffect } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 
-import {
-  DEFAULT_FIELD_FONT_SIZE,
-  type TDropdownFieldMeta as DropdownFieldMeta,
-} from '@documenso/lib/types/field-meta';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
-import { Separator } from '@documenso/ui/primitives/separator';
-
 import {
   EditorGenericFontSizeField,
   EditorGenericReadOnlyField,
@@ -96,7 +77,7 @@ export const EditorFieldDropdownForm = ({
     mode: 'onChange',
     defaultValues: {
       defaultValue: value.defaultValue,
-      values: value.values || [{ value: 'Option 1' }],
+      values: value.values || [{ value: t`Option 1` }],
       required: value.required || false,
       readOnly: value.readOnly || false,
       fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
@@ -110,13 +91,13 @@ export const EditorFieldDropdownForm = ({
   const addValue = () => {
     const currentValues = form.getValues('values') || [];
 
-    let newValue = 'New option';
+    let newValue = t`New option`;
 
     // Iterate to create a unique value
     for (let i = 0; i < currentValues.length; i++) {
-      newValue = `New option ${i + 1}`;
-      if (currentValues.some((item) => item.value === `New option ${i + 1}`)) {
-        newValue = `New option ${i + 1}`;
+      newValue = t`New option ${i + 1}`;
+      if (currentValues.some((item) => item.value === t`New option ${i + 1}`)) {
+        newValue = t`New option ${i + 1}`;
       } else {
         break;
       }
@@ -176,7 +157,10 @@ export const EditorFieldDropdownForm = ({
                     value={field.value ?? '-1'}
                     onValueChange={(value) => field.onChange(value === '-1' ? undefined : value)}
                   >
-                    <SelectTrigger className="text-muted-foreground bg-background w-full">
+                    <SelectTrigger
+                      data-testid="field-form-defaultValue"
+                      className="w-full bg-background text-muted-foreground"
+                    >
                       <SelectValue placeholder={t`Default Value`} />
                     </SelectTrigger>
                     <SelectContent position="popper">
@@ -206,16 +190,16 @@ export const EditorFieldDropdownForm = ({
           <EditorGenericReadOnlyField formControl={form.control} />
 
           <section className="space-y-2">
-            <div className="-mx-4 mb-4 mt-2">
+            <div className="-mx-4 mt-2 mb-4">
               <Separator />
             </div>
 
             <div className="flex flex-row items-center justify-between gap-2">
-              <p className="text-sm font-medium">
+              <p className="font-medium text-sm">
                 <Trans>Dropdown values</Trans>
               </p>
 
-              <button type="button" onClick={addValue}>
+              <button type="button" data-testid="field-form-values-add" onClick={addValue}>
                 <PlusIcon className="h-4 w-4" />
               </button>
             </div>
@@ -229,7 +213,7 @@ export const EditorFieldDropdownForm = ({
                     render={({ field }) => (
                       <FormItem className="w-full">
                         <FormControl>
-                          <Input {...field} />
+                          <Input data-testid={`field-form-values-${index}-value`} {...field} />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
@@ -238,6 +222,7 @@ export const EditorFieldDropdownForm = ({
 
                   <button
                     type="button"
+                    data-testid={`field-form-values-${index}-remove`}
                     className="flex h-10 w-10 items-center justify-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
                     onClick={() => removeValue(index)}
                   >

apps/remix/app/components/forms/editor/editor-field-email-form.tsx

@@ -1,31 +1,28 @@
-import { useEffect } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm, useWatch } from 'react-hook-form';
-import type { z } from 'zod';
-
 import {
   DEFAULT_FIELD_FONT_SIZE,
   type TEmailFieldMeta as EmailFieldMeta,
   FIELD_DEFAULT_GENERIC_ALIGN,
+  FIELD_EMAIL_META_DEFAULT_VALUES,
   ZEmailFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import { Form } from '@documenso/ui/primitives/form/form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useEffect } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import type { z } from 'zod';
 
-import {
-  EditorGenericFontSizeField,
-  EditorGenericTextAlignField,
-} from './editor-field-generic-field-forms';
+import { EditorGenericFontSizeField, EditorGenericTextAlignField } from './editor-field-generic-field-forms';
 
 const ZEmailFieldFormSchema = ZEmailFieldMeta.pick({
   fontSize: true,
   textAlign: true,
+  overflow: true,
 });
 
 type TEmailFieldFormSchema = z.infer<typeof ZEmailFieldFormSchema>;
 
 type EditorFieldEmailFormProps = {
-  value: EmailFieldMeta | undefined;
+  value: z.input<typeof ZEmailFieldMeta> | undefined;
   onValueChange: (value: EmailFieldMeta) => void;
 };
 
@@ -41,6 +38,7 @@ export const EditorFieldEmailForm = ({
     defaultValues: {
       fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
       textAlign: value.textAlign ?? FIELD_DEFAULT_GENERIC_ALIGN,
+      overflow: value.overflow || FIELD_EMAIL_META_DEFAULT_VALUES.overflow,
     },
   });
 

apps/remix/app/components/forms/editor/editor-field-generic-field-forms.tsx

@@ -1,29 +1,17 @@
-import { useEffect } from 'react';
-
-import { Trans, useLingui } from '@lingui/react/macro';
-import { type Control, useFormContext } from 'react-hook-form';
-
-import { FIELD_MIN_LINE_HEIGHT } from '@documenso/lib/types/field-meta';
-import { FIELD_MAX_LINE_HEIGHT } from '@documenso/lib/types/field-meta';
-import { FIELD_MIN_LETTER_SPACING } from '@documenso/lib/types/field-meta';
-import { FIELD_MAX_LETTER_SPACING } from '@documenso/lib/types/field-meta';
+import {
+  FIELD_MAX_LETTER_SPACING,
+  FIELD_MAX_LINE_HEIGHT,
+  FIELD_MIN_LETTER_SPACING,
+  FIELD_MIN_LINE_HEIGHT,
+} from '@documenso/lib/types/field-meta';
 import { cn } from '@documenso/ui/lib/utils';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
-import {
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useEffect } from 'react';
+import { type Control, useFormContext } from 'react-hook-form';
 
 // Can't seem to get the non-any type to work with correct types.
 // Eg Control<{ fontSize?: number } doesn't seem to work when there are required items.
@@ -50,6 +38,7 @@ export const EditorGenericFontSizeField = ({
           </FormLabel>
           <FormControl>
             <Input
+              data-testid="field-form-fontSize"
               type="number"
               min={8}
               max={96}
@@ -88,7 +77,7 @@ export const EditorGenericTextAlignField = ({
           </FormLabel>
           <FormControl>
             <Select {...field} onValueChange={field.onChange}>
-              <SelectTrigger>
+              <SelectTrigger data-testid="field-form-textAlign">
                 <SelectValue placeholder={t`Select text align`} />
               </SelectTrigger>
               <SelectContent>
@@ -131,7 +120,7 @@ export const EditorGenericVerticalAlignField = ({
           </FormLabel>
           <FormControl>
             <Select {...field} onValueChange={field.onChange}>
-              <SelectTrigger>
+              <SelectTrigger data-testid="field-form-verticalAlign">
                 <SelectValue placeholder={t`Select vertical align`} />
               </SelectTrigger>
               <SelectContent>
@@ -174,6 +163,7 @@ export const EditorGenericLineHeightField = ({
           </FormLabel>
           <FormControl>
             <Input
+              data-testid="field-form-lineHeight"
               type="number"
               min={FIELD_MIN_LINE_HEIGHT}
               max={FIELD_MAX_LINE_HEIGHT}
@@ -209,6 +199,7 @@ export const EditorGenericLetterSpacingField = ({
           </FormLabel>
           <FormControl>
             <Input
+              data-testid="field-form-letterSpacing"
               type="number"
               min={FIELD_MIN_LETTER_SPACING}
               max={FIELD_MAX_LETTER_SPACING}
@@ -250,12 +241,13 @@ export const EditorGenericRequiredField = ({
           <FormControl>
             <div className="flex items-center">
               <Checkbox
+                data-testid="field-form-required"
                 id="field-required"
                 checked={field.value}
                 onCheckedChange={field.onChange}
               />
 
-              <label className="text-muted-foreground ml-2 text-sm" htmlFor="field-required">
+              <label className="ml-2 text-muted-foreground text-sm" htmlFor="field-required">
                 <Trans>Required Field</Trans>
               </label>
             </div>
@@ -293,12 +285,13 @@ export const EditorGenericReadOnlyField = ({
           <FormControl>
             <div className="flex items-center">
               <Checkbox
+                data-testid="field-form-readOnly"
                 id="field-read-only"
                 checked={field.value}
                 onCheckedChange={field.onChange}
               />
 
-              <label className="text-muted-foreground ml-2 text-sm" htmlFor="field-read-only">
+              <label className="ml-2 text-muted-foreground text-sm" htmlFor="field-read-only">
                 <Trans>Read Only</Trans>
               </label>
             </div>
@@ -329,7 +322,7 @@ export const EditorGenericLabelField = ({
             <Trans>Label</Trans>
           </FormLabel>
           <FormControl>
-            <Input placeholder={t`Field label`} {...field} />
+            <Input data-testid="field-form-label" placeholder={t`Field label`} {...field} />
           </FormControl>
           <FormMessage />
         </FormItem>

apps/remix/app/components/forms/editor/editor-field-initials-form.tsx

@@ -1,9 +1,3 @@
-import { useEffect } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm, useWatch } from 'react-hook-form';
-import type { z } from 'zod';
-
 import {
   DEFAULT_FIELD_FONT_SIZE,
   FIELD_DEFAULT_GENERIC_ALIGN,
@@ -11,11 +5,12 @@ import {
   ZInitialsFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import { Form } from '@documenso/ui/primitives/form/form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useEffect } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import type { z } from 'zod';
 
-import {
-  EditorGenericFontSizeField,
-  EditorGenericTextAlignField,
-} from './editor-field-generic-field-forms';
+import { EditorGenericFontSizeField, EditorGenericTextAlignField } from './editor-field-generic-field-forms';
 
 const ZInitialsFieldFormSchema = ZInitialsFieldMeta.pick({
   fontSize: true,

apps/remix/app/components/forms/editor/editor-field-name-form.tsx

@@ -1,9 +1,3 @@
-import { useEffect } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm, useWatch } from 'react-hook-form';
-import type { z } from 'zod';
-
 import {
   DEFAULT_FIELD_FONT_SIZE,
   FIELD_DEFAULT_GENERIC_ALIGN,
@@ -11,11 +5,12 @@ import {
   ZNameFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import { Form } from '@documenso/ui/primitives/form/form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useEffect } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import type { z } from 'zod';
 
-import {
-  EditorGenericFontSizeField,
-  EditorGenericTextAlignField,
-} from './editor-field-generic-field-forms';
+import { EditorGenericFontSizeField, EditorGenericTextAlignField } from './editor-field-generic-field-forms';
 
 const ZNameFieldFormSchema = ZNameFieldMeta.pick({
   fontSize: true,

apps/remix/app/components/forms/editor/editor-field-number-form.tsx

@@ -1,10 +1,3 @@
-import { useEffect } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, useLingui } from '@lingui/react/macro';
-import { useForm, useWatch } from 'react-hook-form';
-import type { z } from 'zod';
-
 import {
   DEFAULT_FIELD_FONT_SIZE,
   FIELD_DEFAULT_GENERIC_ALIGN,
@@ -15,23 +8,15 @@ import {
   ZNumberFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import { numberFormatValues } from '@documenso/ui/primitives/document-flow/field-items-advanced-settings/constants';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
 import { Separator } from '@documenso/ui/primitives/separator';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useEffect } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import type { z } from 'zod';
 
 import {
   EditorGenericFontSizeField,
@@ -167,7 +152,12 @@ export const EditorFieldNumberForm = ({
                   <Trans>Placeholder</Trans>
                 </FormLabel>
                 <FormControl>
-                  <Input className="bg-background" placeholder={t`Placeholder`} {...field} />
+                  <Input
+                    data-testid="field-form-placeholder"
+                    className="bg-background"
+                    placeholder={t`Placeholder`}
+                    {...field}
+                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -183,7 +173,7 @@ export const EditorFieldNumberForm = ({
                   <Trans>Value</Trans>
                 </FormLabel>
                 <FormControl>
-                  <Input className="bg-background" placeholder={t`Value`} {...field} />
+                  <Input data-testid="field-form-value" className="bg-background" placeholder={t`Value`} {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -203,7 +193,10 @@ export const EditorFieldNumberForm = ({
                     value={field.value === null ? '-1' : field.value}
                     onValueChange={(value) => field.onChange(value === '-1' ? null : value)}
                   >
-                    <SelectTrigger className="text-muted-foreground bg-background w-full">
+                    <SelectTrigger
+                      data-testid="field-form-numberFormat"
+                      className="w-full bg-background text-muted-foreground"
+                    >
                       <SelectValue placeholder={t`Field format`} />
                     </SelectTrigger>
                     <SelectContent position="popper">
@@ -238,11 +231,11 @@ export const EditorFieldNumberForm = ({
 
           {/* Validation section */}
           <section className="space-y-2">
-            <div className="-mx-4 mb-4 mt-2">
+            <div className="-mx-4 mt-2 mb-4">
               <Separator />
             </div>
 
-            <p className="text-sm font-medium">
+            <p className="font-medium text-sm">
               <Trans>Validation</Trans>
             </p>
 
@@ -257,13 +250,12 @@ export const EditorFieldNumberForm = ({
                     </FormLabel>
                     <FormControl>
                       <Input
+                        data-testid="field-form-minValue"
                         className="bg-background"
-                        placeholder="E.g. 0"
+                        placeholder={t`E.g. 0`}
                         {...field}
                         value={field.value ?? ''}
-                        onChange={(e) =>
-                          field.onChange(e.target.value === '' ? null : e.target.value)
-                        }
+                        onChange={(e) => field.onChange(e.target.value === '' ? null : e.target.value)}
                       />
                     </FormControl>
                     <FormMessage />
@@ -281,13 +273,12 @@ export const EditorFieldNumberForm = ({
                     </FormLabel>
                     <FormControl>
                       <Input
+                        data-testid="field-form-maxValue"
                         className="bg-background"
-                        placeholder="E.g. 100"
+                        placeholder={t`E.g. 100`}
                         {...field}
                         value={field.value ?? ''}
-                        onChange={(e) =>
-                          field.onChange(e.target.value === '' ? null : e.target.value)
-                        }
+                        onChange={(e) => field.onChange(e.target.value === '' ? null : e.target.value)}
                       />
                     </FormControl>
                     <FormMessage />

apps/remix/app/components/forms/editor/editor-field-radio-form.tsx

@@ -1,34 +1,19 @@
-import { useEffect } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, useLingui } from '@lingui/react/macro';
-import { PlusIcon, Trash } from 'lucide-react';
-import { useForm, useWatch } from 'react-hook-form';
-import type { z } from 'zod';
-
 import {
   DEFAULT_FIELD_FONT_SIZE,
   type TRadioFieldMeta as RadioFieldMeta,
   ZRadioFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
 import { Separator } from '@documenso/ui/primitives/separator';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { PlusIcon, Trash } from 'lucide-react';
+import { useEffect } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import type { z } from 'zod';
 
 import {
   EditorGenericFontSizeField,
@@ -79,7 +64,7 @@ export const EditorFieldRadioForm = ({
     mode: 'onChange',
     defaultValues: {
       label: value.label || '',
-      values: value.values || [{ id: 1, checked: false, value: 'Default value' }],
+      values: value.values || [{ id: 1, checked: false, value: t`Default value` }],
       required: value.required || false,
       readOnly: value.readOnly || false,
       direction: value.direction || 'vertical',
@@ -93,8 +78,7 @@ export const EditorFieldRadioForm = ({
 
   const addValue = () => {
     const currentValues = form.getValues('values') || [];
-    const newId =
-      currentValues.length > 0 ? Math.max(...currentValues.map((val) => val.id)) + 1 : 1;
+    const newId = currentValues.length > 0 ? Math.max(...currentValues.map((val) => val.id)) + 1 : 1;
 
     const newValues = [...currentValues, { id: newId, checked: false, value: '' }];
     form.setValue('values', newValues);
@@ -140,7 +124,10 @@ export const EditorFieldRadioForm = ({
                 </FormLabel>
                 <FormControl>
                   <Select value={field.value} onValueChange={field.onChange}>
-                    <SelectTrigger className="text-muted-foreground bg-background w-full">
+                    <SelectTrigger
+                      data-testid="field-form-direction"
+                      className="w-full bg-background text-muted-foreground"
+                    >
                       <SelectValue placeholder={t`Select direction`} />
                     </SelectTrigger>
                     <SelectContent position="popper">
@@ -163,16 +150,16 @@ export const EditorFieldRadioForm = ({
           <EditorGenericReadOnlyField formControl={form.control} />
 
           <section className="space-y-2">
-            <div className="-mx-4 mb-4 mt-2">
+            <div className="-mx-4 mt-2 mb-4">
               <Separator />
             </div>
 
             <div className="flex flex-row items-center justify-between gap-2">
-              <p className="text-sm font-medium">
+              <p className="font-medium text-sm">
                 <Trans>Radio values</Trans>
               </p>
 
-              <button type="button" onClick={addValue}>
+              <button type="button" data-testid="field-form-values-add" onClick={addValue}>
                 <PlusIcon className="h-4 w-4" />
               </button>
             </div>
@@ -187,7 +174,8 @@ export const EditorFieldRadioForm = ({
                       <FormItem>
                         <FormControl>
                           <Checkbox
-                            className="data-[state=checked]:bg-primary border-foreground/30 h-5 w-5"
+                            data-testid={`field-form-values-${index}-checked`}
+                            className="h-5 w-5 border-foreground/30 data-[state=checked]:bg-primary"
                             checked={field.value}
                             onCheckedChange={(value) => {
                               // Uncheck all other values.
@@ -216,7 +204,7 @@ export const EditorFieldRadioForm = ({
                     render={({ field }) => (
                       <FormItem>
                         <FormControl>
-                          <Input className="w-full" {...field} />
+                          <Input data-testid={`field-form-values-${index}-value`} className="w-full" {...field} />
                         </FormControl>
                       </FormItem>
                     )}
@@ -224,6 +212,7 @@ export const EditorFieldRadioForm = ({
 
                   <button
                     type="button"
+                    data-testid={`field-form-values-${index}-remove`}
                     className="flex h-10 w-10 items-center justify-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
                     onClick={() => removeValue(index)}
                   >

apps/remix/app/components/forms/editor/editor-field-signature-form.tsx

@@ -1,24 +1,27 @@
-import { useEffect } from 'react';
-
+import { DEFAULT_SIGNATURE_TEXT_FONT_SIZE } from '@documenso/lib/constants/pdf';
+import {
+  FIELD_SIGNATURE_META_DEFAULT_VALUES,
+  type TSignatureFieldMeta,
+  ZSignatureFieldMeta,
+} from '@documenso/lib/types/field-meta';
+import { Form } from '@documenso/ui/primitives/form/form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans } from '@lingui/react/macro';
+import { useEffect } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import type { z } from 'zod';
 
-import { DEFAULT_SIGNATURE_TEXT_FONT_SIZE } from '@documenso/lib/constants/pdf';
-import { type TSignatureFieldMeta, ZSignatureFieldMeta } from '@documenso/lib/types/field-meta';
-import { Form } from '@documenso/ui/primitives/form/form';
-
 import { EditorGenericFontSizeField } from './editor-field-generic-field-forms';
 
 const ZSignatureFieldFormSchema = ZSignatureFieldMeta.pick({
   fontSize: true,
+  overflow: true,
 });
 
 type TSignatureFieldFormSchema = z.infer<typeof ZSignatureFieldFormSchema>;
 
 type EditorFieldSignatureFormProps = {
-  value: TSignatureFieldMeta | undefined;
+  value: z.input<typeof ZSignatureFieldMeta> | undefined;
   onValueChange: (value: TSignatureFieldMeta) => void;
 };
 
@@ -32,6 +35,7 @@ export const EditorFieldSignatureForm = ({
     resolver: zodResolver(ZSignatureFieldFormSchema),
     mode: 'onChange',
     defaultValues: {
+      overflow: value.overflow || FIELD_SIGNATURE_META_DEFAULT_VALUES.overflow,
       fontSize: value.fontSize || DEFAULT_SIGNATURE_TEXT_FONT_SIZE,
     },
   });
@@ -60,7 +64,7 @@ export const EditorFieldSignatureForm = ({
         <fieldset className="flex flex-col gap-2">
           <div>
             <EditorGenericFontSizeField formControl={form.control} />
-            <p className="text-muted-foreground mt-0.5 text-xs">
+            <p className="mt-0.5 text-muted-foreground text-xs">
               <Trans>The typed signature font size</Trans>
             </p>
           </div>

apps/remix/app/components/forms/editor/editor-field-text-form.tsx

@@ -1,10 +1,3 @@
-import { useEffect } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, useLingui } from '@lingui/react/macro';
-import { useForm, useWatch } from 'react-hook-form';
-import type { z } from 'zod';
-
 import {
   DEFAULT_FIELD_FONT_SIZE,
   FIELD_DEFAULT_GENERIC_ALIGN,
@@ -14,16 +7,14 @@ import {
   type TTextFieldMeta as TextFieldMeta,
   ZTextFieldMeta,
 } from '@documenso/lib/types/field-meta';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 import { Textarea } from '@documenso/ui/primitives/textarea';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useEffect } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import type { z } from 'zod';
 
 import {
   EditorGenericFontSizeField,
@@ -134,7 +125,7 @@ export const EditorFieldTextForm = ({
                   <Trans>Label</Trans>
                 </FormLabel>
                 <FormControl>
-                  <Input placeholder={t`Field label`} {...field} />
+                  <Input data-testid="field-form-label" placeholder={t`Field label`} {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -150,7 +141,7 @@ export const EditorFieldTextForm = ({
                   <Trans>Placeholder</Trans>
                 </FormLabel>
                 <FormControl>
-                  <Input placeholder={t`Field placeholder`} {...field} />
+                  <Input data-testid="field-form-placeholder" placeholder={t`Field placeholder`} {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -167,6 +158,7 @@ export const EditorFieldTextForm = ({
                 </FormLabel>
                 <FormControl>
                   <Textarea
+                    data-testid="field-form-text"
                     className="h-auto"
                     placeholder={t`Add text to the field`}
                     {...field}
@@ -200,6 +192,7 @@ export const EditorFieldTextForm = ({
                 </FormLabel>
                 <FormControl>
                   <Input
+                    data-testid="field-form-characterLimit"
                     className="bg-background"
                     placeholder={t`Character limit`}
                     {...field}

apps/remix/app/components/forms/email-preferences-form.tsx

@@ -1,15 +1,7 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans } from '@lingui/react/macro';
-import type { TeamGlobalSettings } from '@prisma/client';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { FROM_ADDRESS } from '@documenso/lib/constants/email';
-import {
-  DEFAULT_DOCUMENT_EMAIL_SETTINGS,
-  ZDocumentEmailSettingsSchema,
-} from '@documenso/lib/types/document-email';
+import { DEFAULT_DOCUMENT_EMAIL_SETTINGS, ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
+import { zEmail } from '@documenso/lib/utils/zod';
 import { trpc } from '@documenso/trpc/react';
 import { DocumentEmailCheckboxes } from '@documenso/ui/components/document/document-email-checkboxes';
 import { Button } from '@documenso/ui/primitives/button';
@@ -23,27 +15,23 @@ import {
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans } from '@lingui/react/macro';
+import type { TeamGlobalSettings } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 
 const ZEmailPreferencesFormSchema = z.object({
   emailId: z.string().nullable(),
-  emailReplyTo: z.string().email().nullable(),
+  emailReplyTo: zEmail().nullable(),
   // emailReplyToName: z.string(),
   emailDocumentSettings: ZDocumentEmailSettingsSchema.nullable(),
 });
 
 export type TEmailPreferencesFormSchema = z.infer<typeof ZEmailPreferencesFormSchema>;
 
-type SettingsSubset = Pick<
-  TeamGlobalSettings,
-  'emailId' | 'emailReplyTo' | 'emailDocumentSettings'
->;
+type SettingsSubset = Pick<TeamGlobalSettings, 'emailId' | 'emailReplyTo' | 'emailDocumentSettings'>;
 
 export type EmailPreferencesFormProps = {
   settings: SettingsSubset;
@@ -51,11 +39,7 @@ export type EmailPreferencesFormProps = {
   onFormSubmit: (data: TEmailPreferencesFormSchema) => Promise<void>;
 };
 
-export const EmailPreferencesForm = ({
-  settings,
-  onFormSubmit,
-  canInherit,
-}: EmailPreferencesFormProps) => {
+export const EmailPreferencesForm = ({ settings, onFormSubmit, canInherit }: EmailPreferencesFormProps) => {
   const organisation = useCurrentOrganisation();
 
   const form = useForm<TEmailPreferencesFormSchema>({
@@ -68,21 +52,17 @@ export const EmailPreferencesForm = ({
     resolver: zodResolver(ZEmailPreferencesFormSchema),
   });
 
-  const { data: emailData, isLoading: isLoadingEmails } =
-    trpc.enterprise.organisation.email.find.useQuery({
-      organisationId: organisation.id,
-      perPage: 100,
-    });
+  const { data: emailData, isLoading: isLoadingEmails } = trpc.enterprise.organisation.email.find.useQuery({
+    organisationId: organisation.id,
+    perPage: 100,
+  });
 
   const emails = emailData?.data || [];
 
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onFormSubmit)}>
-        <fieldset
-          className="flex h-full max-w-2xl flex-col gap-y-6"
-          disabled={form.formState.isSubmitting}
-        >
+        <fieldset className="flex h-full max-w-2xl flex-col gap-y-6" disabled={form.formState.isSubmitting}>
           {organisation.organisationClaim.flags.emailDomains && (
             <FormField
               control={form.control}
@@ -144,9 +124,7 @@ export const EmailPreferencesForm = ({
                 </FormControl>
                 <FormMessage />
                 <FormDescription>
-                  <Trans>
-                    The email address which will show up in the "Reply To" field in emails
-                  </Trans>
+                  <Trans>The email address which will show up in the "Reply To" field in emails</Trans>
 
                   {canInherit && (
                     <span>
@@ -187,9 +165,7 @@ export const EmailPreferencesForm = ({
                   <Select
                     value={field.value === null ? 'INHERIT' : 'CONTROLLED'}
                     onValueChange={(value) =>
-                      field.onChange(
-                        value === 'CONTROLLED' ? DEFAULT_DOCUMENT_EMAIL_SETTINGS : null,
-                      )
+                      field.onChange(value === 'CONTROLLED' ? DEFAULT_DOCUMENT_EMAIL_SETTINGS : null)
                     }
                   >
                     <SelectTrigger>
@@ -219,7 +195,8 @@ export const EmailPreferencesForm = ({
 
                 <FormDescription>
                   <Trans>
-                    Controls the default email settings when new documents or templates are created
+                    Controls the default email settings when new documents or templates are created. Updating these
+                    settings will not affect existing documents or templates.
                   </Trans>
                 </FormDescription>
               </FormItem>

apps/remix/app/components/forms/forgot-password.tsx

@@ -1,3 +1,10 @@
+import { authClient } from '@documenso/auth/client';
+import { zEmail } from '@documenso/lib/utils/zod';
+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 { useToast } from '@documenso/ui/primitives/use-toast';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -6,22 +13,8 @@ import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 import { z } from 'zod';
 
-import { authClient } from '@documenso/auth/client';
-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 { useToast } from '@documenso/ui/primitives/use-toast';
-
 export const ZForgotPasswordFormSchema = z.object({
-  email: z.string().email().min(1),
+  email: zEmail().min(1),
 });
 
 export type TForgotPasswordFormSchema = z.infer<typeof ZForgotPasswordFormSchema>;
@@ -63,10 +56,7 @@ export const ForgotPasswordForm = ({ className }: ForgotPasswordFormProps) => {
 
   return (
     <Form {...form}>
-      <form
-        className={cn('flex w-full flex-col gap-y-4', className)}
-        onSubmit={form.handleSubmit(onFormSubmit)}
-      >
+      <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}

apps/remix/app/components/forms/organisation-update-form.tsx

@@ -1,3 +1,13 @@
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZUpdateOrganisationRequestSchema } from '@documenso/trpc/server/organisation-router/update-organisation.types';
+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 { useToast } from '@documenso/ui/primitives/use-toast';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -7,24 +17,6 @@ import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 import type { z } from 'zod';
 
-import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { trpc } from '@documenso/trpc/react';
-import { ZUpdateOrganisationRequestSchema } from '@documenso/trpc/server/organisation-router/update-organisation.types';
-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 { useToast } from '@documenso/ui/primitives/use-toast';
-
 const ZOrganisationUpdateFormSchema = ZUpdateOrganisationRequestSchema.shape.data.pick({
   name: true,
   url: true,
@@ -131,7 +123,7 @@ export const OrganisationUpdateForm = () => {
                   <Input className="bg-background" {...field} />
                 </FormControl>
                 {!form.formState.errors.url && (
-                  <span className="text-foreground/50 text-xs font-normal">
+                  <span className="font-normal text-foreground/50 text-xs">
                     {field.value ? (
                       `${NEXT_PUBLIC_WEBAPP_URL()}/o/${field.value}`
                     ) : (

apps/remix/app/components/forms/password.tsx

@@ -1,3 +1,12 @@
+import { authClient } from '@documenso/auth/client';
+import type { SessionUser } from '@documenso/auth/server/lib/session/session';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { ZCurrentPasswordSchema, ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
+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 { PasswordInput } from '@documenso/ui/primitives/password-input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -6,23 +15,6 @@ import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
 import { z } from 'zod';
 
-import { authClient } from '@documenso/auth/client';
-import type { SessionUser } from '@documenso/auth/server/lib/session/session';
-import { AppError } from '@documenso/lib/errors/app-error';
-import { ZCurrentPasswordSchema, ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
-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 { PasswordInput } from '@documenso/ui/primitives/password-input';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
 export const ZPasswordFormSchema = z
   .object({
     currentPassword: ZCurrentPasswordSchema,
@@ -76,13 +68,9 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
       const errorMessage = match(error.code)
         .with('NO_PASSWORD', () => msg`User has no password.`)
         .with('INCORRECT_PASSWORD', () => msg`Current password is incorrect.`)
-        .with(
-          'SAME_PASSWORD',
-          () => msg`Your new password cannot be the same as your old password.`,
-        )
+        .with('SAME_PASSWORD', () => msg`Your new password cannot be the same as your old password.`)
         .otherwise(
-          () =>
-            msg`We encountered an unknown error while attempting to update your password. Please try again later.`,
+          () => msg`We encountered an unknown error while attempting to update your password. Please try again later.`,
         );
 
       toast({
@@ -95,10 +83,7 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
 
   return (
     <Form {...form}>
-      <form
-        className={cn('flex w-full flex-col gap-y-4', className)}
-        onSubmit={form.handleSubmit(onFormSubmit)}
-      >
+      <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}
@@ -149,7 +134,7 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
           />
         </fieldset>
 
-        <div className="ml-auto mt-4">
+        <div className="mt-4 ml-auto">
           <Button type="submit" loading={isSubmitting}>
             {isSubmitting ? <Trans>Updating password...</Trans> : <Trans>Update password</Trans>}
           </Button>

apps/remix/app/components/forms/profile.tsx

@@ -1,3 +1,13 @@
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { ZNameSchema } from '@documenso/lib/constants/auth';
+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 { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -5,28 +15,8 @@ import { Trans } from '@lingui/react/macro';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { useSession } from '@documenso/lib/client-only/providers/session';
-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 { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
 export const ZProfileFormSchema = z.object({
-  name: z
-    .string()
-    .trim()
-    .min(1, { message: msg`Please enter a valid name.`.id }),
+  name: ZNameSchema,
   signature: z.string().min(1, { message: msg`Signature Pad cannot be empty.`.id }),
 });
 
@@ -85,10 +75,7 @@ export const ProfileForm = ({ className }: ProfileFormProps) => {
 
   return (
     <Form {...form}>
-      <form
-        className={cn('flex w-full flex-col gap-y-4', className)}
-        onSubmit={form.handleSubmit(onFormSubmit)}
-      >
+      <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}

apps/remix/app/components/forms/public-profile-form.tsx

@@ -1,38 +1,25 @@
-import { useState } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Plural, Trans } from '@lingui/react/macro';
-import type { TeamProfile } from '@prisma/client';
-import { motion } from 'framer-motion';
-import { AnimatePresence } from 'framer-motion';
-import { CheckSquareIcon, CopyIcon } from 'lucide-react';
-import { useForm } from 'react-hook-form';
-import type { z } from 'zod';
-
 import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { formatUserProfilePath } from '@documenso/lib/utils/public-profiles';
-import {
-  MAX_PROFILE_BIO_LENGTH,
-  ZUpdateTeamRequestSchema,
-} from '@documenso/trpc/server/team-router/update-team.types';
+import { MAX_PROFILE_BIO_LENGTH, ZUpdateTeamRequestSchema } from '@documenso/trpc/server/team-router/update-team.types';
 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 { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 import { Textarea } from '@documenso/ui/primitives/textarea';
 import { useToast } from '@documenso/ui/primitives/use-toast';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Plural, Trans } from '@lingui/react/macro';
+import type { TeamProfile } from '@prisma/client';
+import { AnimatePresence, motion } from 'framer-motion';
+import { CheckSquareIcon, CopyIcon } from 'lucide-react';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
 
 import { useCurrentTeam } from '~/providers/team';
 
@@ -48,11 +35,7 @@ export type PublicProfileFormProps = {
   onProfileUpdate: (data: TPublicProfileFormSchema) => Promise<unknown>;
   profile: TeamProfile;
 };
-export const PublicProfileForm = ({
-  className,
-  profile,
-  onProfileUpdate,
-}: PublicProfileFormProps) => {
+export const PublicProfileForm = ({ className, profile, onProfileUpdate }: PublicProfileFormProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
@@ -137,10 +120,7 @@ export const PublicProfileForm = ({
 
   return (
     <Form {...form}>
-      <form
-        className={cn('flex w-full flex-col gap-y-4', className)}
-        onSubmit={form.handleSubmit(onFormSubmit)}
-      >
+      <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}
@@ -156,22 +136,19 @@ export const PublicProfileForm = ({
 
                 {!isPersonalLayoutMode && (
                   <p className="text-muted-foreground text-xs">
-                    <Trans>
-                      You can update the profile URL by updating the team URL in the general
-                      settings page.
-                    </Trans>
+                    <Trans>You can update the profile URL by updating the team URL in the general settings page.</Trans>
                   </p>
                 )}
 
                 <div className="h-8">
                   {!form.formState.errors.url && (
-                    <div className="text-muted-foreground h-8 text-sm">
+                    <div className="h-8 text-muted-foreground text-sm">
                       {field.value ? (
                         <div>
                           <Button
                             type="button"
                             variant="none"
-                            className="h-7 rounded bg-neutral-50 pl-2 pr-0.5 font-normal dark:border dark:border-neutral-500 dark:bg-neutral-600"
+                            className="h-7 rounded bg-neutral-50 pr-0.5 pl-2 font-normal dark:border dark:border-neutral-500 dark:bg-neutral-600"
                             onClick={async () => onCopy()}
                           >
                             <p>
@@ -222,10 +199,7 @@ export const PublicProfileForm = ({
                 <FormItem>
                   <FormLabel>Bio</FormLabel>
                   <FormControl>
-                    <Textarea
-                      {...field}
-                      placeholder={_(msg`Write a description to display on your public profile`)}
-                    />
+                    <Textarea {...field} placeholder={_(msg`Write a description to display on your public profile`)} />
                   </FormControl>
 
                   {!form.formState.errors.profileBio && (

apps/remix/app/components/forms/reset-password.tsx

@@ -1,3 +1,11 @@
+import { authClient } from '@documenso/auth/client';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
+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 { PasswordInput } from '@documenso/ui/primitives/password-input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -7,22 +15,6 @@ import { useNavigate } from 'react-router';
 import { match } from 'ts-pattern';
 import { z } from 'zod';
 
-import { authClient } from '@documenso/auth/client';
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
-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 { PasswordInput } from '@documenso/ui/primitives/password-input';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
 export const ZResetPasswordFormSchema = z
   .object({
     password: ZPasswordSchema,
@@ -78,13 +70,9 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
       const errorMessage = match(error.code)
         .with(AppErrorCode.EXPIRED_CODE, () => msg`Token has expired. Please try again.`)
         .with('INVALID_TOKEN', () => msg`Invalid token provided. Please try again.`)
-        .with(
-          'SAME_PASSWORD',
-          () => msg`Your new password cannot be the same as your old password.`,
-        )
+        .with('SAME_PASSWORD', () => msg`Your new password cannot be the same as your old password.`)
         .otherwise(
-          () =>
-            msg`We encountered an unknown error while attempting to reset your password. Please try again later.`,
+          () => msg`We encountered an unknown error while attempting to reset your password. Please try again later.`,
         );
 
       toast({
@@ -97,10 +85,7 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
 
   return (
     <Form {...form}>
-      <form
-        className={cn('flex w-full flex-col gap-y-4', className)}
-        onSubmit={form.handleSubmit(onFormSubmit)}
-      >
+      <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}

apps/remix/app/components/forms/send-confirmation-email.tsx

@@ -1,3 +1,10 @@
+import { authClient } from '@documenso/auth/client';
+import { zEmail } from '@documenso/lib/utils/zod';
+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 { useToast } from '@documenso/ui/primitives/use-toast';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -5,22 +12,8 @@ import { Trans } from '@lingui/react/macro';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { authClient } from '@documenso/auth/client';
-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 { useToast } from '@documenso/ui/primitives/use-toast';
-
 export const ZSendConfirmationEmailFormSchema = z.object({
-  email: z.string().email().min(1),
+  email: zEmail().min(1),
 });
 
 export type TSendConfirmationEmailFormSchema = z.infer<typeof ZSendConfirmationEmailFormSchema>;
@@ -48,9 +41,7 @@ export const SendConfirmationEmailForm = ({ className }: SendConfirmationEmailFo
 
       toast({
         title: _(msg`Confirmation email sent`),
-        description: _(
-          msg`A confirmation email has been sent, and it should arrive in your inbox shortly.`,
-        ),
+        description: _(msg`A confirmation email has been sent, and it should arrive in your inbox shortly.`),
         duration: 5000,
       });
 
@@ -66,10 +57,7 @@ export const SendConfirmationEmailForm = ({ className }: SendConfirmationEmailFo
 
   return (
     <Form {...form}>
-      <form
-        className={cn('mt-6 flex w-full flex-col gap-y-4', className)}
-        onSubmit={form.handleSubmit(onFormSubmit)}
-      >
+      <form className={cn('mt-6 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}

apps/remix/app/components/forms/signin.tsx

@@ -1,12 +1,28 @@
-import { useEffect, useMemo, useState } from 'react';
-
+import { authClient } from '@documenso/auth/client';
+import { AuthenticationErrorCode } from '@documenso/auth/server/lib/errors/error-codes';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { env } from '@documenso/lib/utils/env';
+import { zEmail } from '@documenso/lib/utils/zod';
+import { trpc } from '@documenso/trpc/react';
+import { ZCurrentPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@documenso/ui/primitives/dialog';
+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 { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 import { zodResolver } from '@hookform/resolvers/zod';
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import type { TurnstileInstance } from '@marsidev/react-turnstile';
+import { Turnstile } from '@marsidev/react-turnstile';
 import { browserSupportsWebAuthn, startAuthentication } from '@simplewebauthn/browser';
 import { KeyRoundIcon } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { FaIdCardClip } from 'react-icons/fa6';
 import { FcGoogle } from 'react-icons/fc';
@@ -14,33 +30,6 @@ import { Link, useNavigate } from 'react-router';
 import { match } from 'ts-pattern';
 import { z } from 'zod';
 
-import { authClient } from '@documenso/auth/client';
-import { AuthenticationErrorCode } from '@documenso/auth/server/lib/errors/error-codes';
-import { AppError } from '@documenso/lib/errors/app-error';
-import { trpc } from '@documenso/trpc/react';
-import { ZCurrentPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-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 { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
 const CommonErrorMessages: Record<string, MessageDescriptor> = {
   [AuthenticationErrorCode.AccountDisabled]: msg`This account has been disabled. Please contact support.`,
 };
@@ -58,7 +47,7 @@ const handleFallbackErrorMessages = (code: string) => {
 const LOGIN_REDIRECT_PATH = '/';
 
 export const ZSignInFormSchema = z.object({
-  email: z.string().email().min(1),
+  email: zEmail().min(1),
   password: ZCurrentPasswordSchema,
   totpCode: z.string().trim().optional(),
   backupCode: z.string().trim().optional(),
@@ -90,16 +79,18 @@ export const SignInForm = ({
 
   const navigate = useNavigate();
 
-  const [isTwoFactorAuthenticationDialogOpen, setIsTwoFactorAuthenticationDialogOpen] =
-    useState(false);
+  const [isTwoFactorAuthenticationDialogOpen, setIsTwoFactorAuthenticationDialogOpen] = useState(false);
   const [isEmbeddedRedirect, setIsEmbeddedRedirect] = useState(false);
 
-  const [twoFactorAuthenticationMethod, setTwoFactorAuthenticationMethod] = useState<
-    'totp' | 'backup'
-  >('totp');
+  const [twoFactorAuthenticationMethod, setTwoFactorAuthenticationMethod] = useState<'totp' | 'backup'>('totp');
 
   const hasSocialAuthEnabled = isGoogleSSOEnabled || isMicrosoftSSOEnabled || isOIDCSSOEnabled;
 
+  const turnstileSiteKey = env('NEXT_PUBLIC_TURNSTILE_SITE_KEY');
+  const turnstileRef = useRef<TurnstileInstance>(null);
+  const twoFactorTurnstileRef = useRef<TurnstileInstance>(null);
+  const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+
   const [isPasskeyLoading, setIsPasskeyLoading] = useState(false);
 
   const redirectPath = useMemo(() => {
@@ -118,8 +109,7 @@ export const SignInForm = ({
     return url.toString();
   }, [returnTo]);
 
-  const { mutateAsync: createPasskeySigninOptions } =
-    trpc.auth.passkey.createSigninOptions.useMutation();
+  const { mutateAsync: createPasskeySigninOptions } = trpc.auth.passkey.createSigninOptions.useMutation();
 
   const form = useForm<TSignInFormSchema>({
     values: {
@@ -194,10 +184,7 @@ export const SignInForm = ({
           () =>
             msg`This passkey is not configured for this application. Please login and add one in the user settings.`,
         )
-        .with(
-          AuthenticationErrorCode.SessionExpired,
-          () => msg`This session has expired. Please try again.`,
-        )
+        .with(AuthenticationErrorCode.SessionExpired, () => msg`This session has expired. Please try again.`)
         .otherwise(() => handleFallbackErrorMessages(error.code));
 
       toast({
@@ -216,6 +203,7 @@ export const SignInForm = ({
         password,
         totpCode,
         backupCode,
+        captchaToken: captchaToken ?? undefined,
         redirectPath,
       });
     } catch (err) {
@@ -225,6 +213,11 @@ export const SignInForm = ({
 
       if (error.code === 'TWO_FACTOR_MISSING_CREDENTIALS') {
         setIsTwoFactorAuthenticationDialogOpen(true);
+
+        // Turnstile tokens are single-use. Clear the consumed one so the
+        // dialog's fresh widget mounts cleanly and the dialog can't be
+        // submitted with the stale token before a new one is issued.
+        setCaptchaToken(null);
         return;
       }
 
@@ -233,23 +226,19 @@ export const SignInForm = ({
 
         toast({
           title: _(msg`Unable to sign in`),
-          description: _(
-            msg`This account has not been verified. Please verify your account before signing in.`,
-          ),
+          description: _(msg`This account has not been verified. Please verify your account before signing in.`),
         });
 
         return;
       }
 
       const errorMessage = match(error.code)
-        .with(
-          AuthenticationErrorCode.InvalidCredentials,
-          () => msg`The email or password provided is incorrect.`,
-        )
+        .with(AuthenticationErrorCode.InvalidCredentials, () => msg`The email or password provided is incorrect.`)
         .with(
           AuthenticationErrorCode.InvalidTwoFactorCode,
           () => msg`The two-factor authentication code provided is incorrect.`,
         )
+        .with(AppErrorCode.INVALID_CAPTCHA, () => msg`We were unable to verify that you're human. Please try again.`)
         .otherwise(() => handleFallbackErrorMessages(error.code));
 
       toast({
@@ -257,6 +246,9 @@ export const SignInForm = ({
         description: _(errorMessage),
         variant: 'destructive',
       });
+
+      turnstileRef.current?.reset();
+      setCaptchaToken(null);
     }
   };
 
@@ -268,9 +260,7 @@ export const SignInForm = ({
     } catch (err) {
       toast({
         title: _(msg`An unknown error occurred`),
-        description: _(
-          msg`We encountered an unknown error while attempting to sign you In. Please try again later.`,
-        ),
+        description: _(msg`We encountered an unknown error while attempting to sign you In. Please try again later.`),
         variant: 'destructive',
       });
     }
@@ -284,9 +274,7 @@ export const SignInForm = ({
     } catch (err) {
       toast({
         title: _(msg`An unknown error occurred`),
-        description: _(
-          msg`We encountered an unknown error while attempting to sign you In. Please try again later.`,
-        ),
+        description: _(msg`We encountered an unknown error while attempting to sign you In. Please try again later.`),
         variant: 'destructive',
       });
     }
@@ -300,9 +288,7 @@ export const SignInForm = ({
     } catch (err) {
       toast({
         title: _(msg`An unknown error occurred`),
-        description: _(
-          msg`We encountered an unknown error while attempting to sign you In. Please try again later.`,
-        ),
+        description: _(msg`We encountered an unknown error while attempting to sign you In. Please try again later.`),
         variant: 'destructive',
       });
     }
@@ -324,14 +310,8 @@ export const SignInForm = ({
 
   return (
     <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 || isPasskeyLoading}
-        >
+      <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 || isPasskeyLoading}>
           <FormField
             control={form.control}
             name="email"
@@ -366,10 +346,7 @@ export const SignInForm = ({
                 <FormMessage />
 
                 <p className="mt-2 text-right">
-                  <Link
-                    to="/forgot-password"
-                    className="text-sm text-muted-foreground duration-200 hover:opacity-70"
-                  >
+                  <Link to="/forgot-password" className="text-muted-foreground text-sm duration-200 hover:opacity-70">
                     <Trans>Forgot your password?</Trans>
                   </Link>
                 </p>
@@ -377,12 +354,20 @@ export const SignInForm = ({
             )}
           />
 
-          <Button
-            type="submit"
-            size="lg"
-            loading={isSubmitting}
-            className="dark:bg-documenso dark:hover:opacity-90"
-          >
+          {turnstileSiteKey && !isTwoFactorAuthenticationDialogOpen && (
+            <Turnstile
+              ref={turnstileRef}
+              siteKey={turnstileSiteKey}
+              onSuccess={setCaptchaToken}
+              onExpire={() => setCaptchaToken(null)}
+              options={{
+                size: 'flexible',
+                appearance: 'interaction-only',
+              }}
+            />
+          )}
+
+          <Button type="submit" size="lg" loading={isSubmitting} className="dark:bg-documenso dark:hover:opacity-90">
             {isSubmitting ? <Trans>Signing in...</Trans> : <Trans>Sign In</Trans>}
           </Button>
 
@@ -421,11 +406,7 @@ export const SignInForm = ({
                   disabled={isSubmitting}
                   onClick={onSignInWithMicrosoftClick}
                 >
-                  <img
-                    className="mr-2 h-4 w-4"
-                    alt="Microsoft Logo"
-                    src={'/static/microsoft.svg'}
-                  />
+                  <img className="mr-2 h-4 w-4" alt="Microsoft Logo" src={'/static/microsoft.svg'} />
                   Microsoft
                 </Button>
               )}
@@ -455,16 +436,13 @@ export const SignInForm = ({
             className="border bg-background text-muted-foreground"
             onClick={onSignInWithPasskey}
           >
-            {!isPasskeyLoading && <KeyRoundIcon className="-ml-1 mr-1 h-5 w-5" />}
+            {!isPasskeyLoading && <KeyRoundIcon className="mr-1 -ml-1 h-5 w-5" />}
             <Trans>Passkey</Trans>
           </Button>
         </fieldset>
       </form>
 
-      <Dialog
-        open={isTwoFactorAuthenticationDialogOpen}
-        onOpenChange={onCloseTwoFactorAuthenticationDialog}
-      >
+      <Dialog open={isTwoFactorAuthenticationDialogOpen} onOpenChange={onCloseTwoFactorAuthenticationDialog}>
         <DialogContent>
           <DialogHeader>
             <DialogTitle>
@@ -516,12 +494,23 @@ export const SignInForm = ({
                 />
               )}
 
+              {turnstileSiteKey && (
+                <div className="mt-4">
+                  <Turnstile
+                    ref={twoFactorTurnstileRef}
+                    siteKey={turnstileSiteKey}
+                    onSuccess={setCaptchaToken}
+                    onExpire={() => setCaptchaToken(null)}
+                    options={{
+                      size: 'flexible',
+                      appearance: 'interaction-only',
+                    }}
+                  />
+                </div>
+              )}
+
               <DialogFooter className="mt-4">
-                <Button
-                  type="button"
-                  variant="secondary"
-                  onClick={onToggleTwoFactorAuthenticationMethodClick}
-                >
+                <Button type="button" variant="secondary" onClick={onToggleTwoFactorAuthenticationMethodClick}>
                   {twoFactorAuthenticationMethod === 'totp' ? (
                     <Trans>Use Backup Code</Trans>
                   ) : (
@@ -529,7 +518,7 @@ export const SignInForm = ({
                   )}
                 </Button>
 
-                <Button type="submit" loading={isSubmitting}>
+                <Button type="submit" loading={isSubmitting} disabled={Boolean(turnstileSiteKey) && !captchaToken}>
                   {isSubmitting ? <Trans>Signing in...</Trans> : <Trans>Sign In</Trans>}
                 </Button>
               </DialogFooter>

apps/remix/app/components/forms/signup.tsx

@@ -1,45 +1,38 @@
-import { useEffect } from 'react';
-
+import communityCardsImage from '@documenso/assets/images/community-cards.png';
+import { authClient } from '@documenso/auth/client';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { ZNameSchema } from '@documenso/lib/constants/auth';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { env } from '@documenso/lib/utils/env';
+import { zEmail } from '@documenso/lib/utils/zod';
+import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
+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 { PasswordInput } from '@documenso/ui/primitives/password-input';
+import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 import { zodResolver } from '@hookform/resolvers/zod';
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import type { TurnstileInstance } from '@marsidev/react-turnstile';
+import { Turnstile } from '@marsidev/react-turnstile';
+import { useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { FaIdCardClip } from 'react-icons/fa6';
 import { FcGoogle } from 'react-icons/fc';
 import { Link, useNavigate, useSearchParams } from 'react-router';
 import { z } from 'zod';
 
-import communityCardsImage from '@documenso/assets/images/community-cards.png';
-import { authClient } from '@documenso/auth/client';
-import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
-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 { PasswordInput } from '@documenso/ui/primitives/password-input';
-import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
 import { UserProfileTimur } from '~/components/general/user-profile-timur';
 
 export const ZSignUpFormSchema = z
   .object({
-    name: z
-      .string()
-      .trim()
-      .min(1, { message: msg`Please enter a valid name.`.id }),
-    email: z.string().email().min(1),
+    name: ZNameSchema,
+    email: zEmail().min(1),
     password: ZPasswordSchema,
     signature: z.string().min(1, { message: msg`We need your signature to sign documents`.id }),
   })
@@ -54,9 +47,9 @@ export const ZSignUpFormSchema = z
     },
   );
 
-export const signupErrorMessages: Record<string, MessageDescriptor> = {
-  SIGNUP_DISABLED: msg`Signups are disabled.`,
-  [AppErrorCode.ALREADY_EXISTS]: msg`User with this email already exists. Please use a different email address.`,
+export const SIGNUP_ERROR_MESSAGES: Record<string, MessageDescriptor> = {
+  SIGNUP_DISABLED: msg`Signup is currently disabled or not available for your email domain.`,
+  [AppErrorCode.ALREADY_EXISTS]: msg`We were unable to create your account. If you already have an account, try signing in instead.`,
   [AppErrorCode.INVALID_REQUEST]: msg`We were unable to create your account. Please review the information you provided and try again.`,
 };
 
@@ -65,18 +58,20 @@ export type TSignUpFormSchema = z.infer<typeof ZSignUpFormSchema>;
 export type SignUpFormProps = {
   className?: string;
   initialEmail?: string;
-  isGoogleSSOEnabled?: boolean;
-  isMicrosoftSSOEnabled?: boolean;
-  isOIDCSSOEnabled?: boolean;
+  isEmailPasswordSignupEnabled?: boolean;
+  isGoogleSignupEnabled?: boolean;
+  isMicrosoftSignupEnabled?: boolean;
+  isOidcSignupEnabled?: boolean;
   returnTo?: string;
 };
 
 export const SignUpForm = ({
   className,
   initialEmail,
-  isGoogleSSOEnabled,
-  isMicrosoftSSOEnabled,
-  isOIDCSSOEnabled,
+  isEmailPasswordSignupEnabled = true,
+  isGoogleSignupEnabled,
+  isMicrosoftSignupEnabled,
+  isOidcSignupEnabled,
   returnTo,
 }: SignUpFormProps) => {
   const { _ } = useLingui();
@@ -88,7 +83,12 @@ export const SignUpForm = ({
 
   const utmSrc = searchParams.get('utm_source') ?? null;
 
-  const hasSocialAuthEnabled = isGoogleSSOEnabled || isMicrosoftSSOEnabled || isOIDCSSOEnabled;
+  const turnstileSiteKey = env('NEXT_PUBLIC_TURNSTILE_SITE_KEY');
+  const turnstileRef = useRef<TurnstileInstance>(null);
+
+  const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+
+  const hasSocialAuthEnabled = isGoogleSignupEnabled || isMicrosoftSignupEnabled || isOidcSignupEnabled;
 
   const form = useForm<TSignUpFormSchema>({
     values: {
@@ -110,6 +110,7 @@ export const SignUpForm = ({
         email,
         password,
         signature,
+        captchaToken: captchaToken ?? undefined,
       });
 
       await navigate(returnTo ? returnTo : '/unverified-account');
@@ -130,25 +131,26 @@ export const SignUpForm = ({
     } catch (err) {
       const error = AppError.parseError(err);
 
-      const errorMessage = signupErrorMessages[error.code] ?? signupErrorMessages.INVALID_REQUEST;
+      const errorMessage = SIGNUP_ERROR_MESSAGES[error.code] ?? SIGNUP_ERROR_MESSAGES.INVALID_REQUEST;
 
       toast({
         title: _(msg`An error occurred`),
         description: _(errorMessage),
         variant: 'destructive',
       });
+
+      turnstileRef.current?.reset();
+      setCaptchaToken(null);
     }
   };
 
   const onSignUpWithGoogleClick = async () => {
     try {
       await authClient.google.signIn();
-    } catch (err) {
+    } catch {
       toast({
         title: _(msg`An unknown error occurred`),
-        description: _(
-          msg`We encountered an unknown error while attempting to sign you Up. Please try again later.`,
-        ),
+        description: _(msg`We encountered an unknown error while attempting to sign you Up. Please try again later.`),
         variant: 'destructive',
       });
     }
@@ -157,12 +159,10 @@ export const SignUpForm = ({
   const onSignUpWithMicrosoftClick = async () => {
     try {
       await authClient.microsoft.signIn();
-    } catch (err) {
+    } catch {
       toast({
         title: _(msg`An unknown error occurred`),
-        description: _(
-          msg`We encountered an unknown error while attempting to sign you Up. Please try again later.`,
-        ),
+        description: _(msg`We encountered an unknown error while attempting to sign you Up. Please try again later.`),
         variant: 'destructive',
       });
     }
@@ -171,12 +171,10 @@ export const SignUpForm = ({
   const onSignUpWithOIDCClick = async () => {
     try {
       await authClient.oidc.signIn();
-    } catch (err) {
+    } catch {
       toast({
         title: _(msg`An unknown error occurred`),
-        description: _(
-          msg`We encountered an unknown error while attempting to sign you Up. Please try again later.`,
-        ),
+        description: _(msg`We encountered an unknown error while attempting to sign you Up. Please try again later.`),
         variant: 'destructive',
       });
     }
@@ -196,7 +194,7 @@ export const SignUpForm = ({
 
   return (
     <div className={cn('flex justify-center gap-x-12', className)}>
-      <div className="border-border relative hidden flex-1 overflow-hidden rounded-xl border xl:flex">
+      <div className="relative hidden flex-1 overflow-hidden rounded-xl border border-border xl:flex">
         <div className="absolute -inset-8 -z-[2] backdrop-blur">
           <img
             src={communityCardsImage}
@@ -205,34 +203,31 @@ export const SignUpForm = ({
           />
         </div>
 
-        <div className="bg-background/50 absolute -inset-8 -z-[1] backdrop-blur-[2px]" />
+        <div className="absolute -inset-8 -z-[1] bg-background/50 backdrop-blur-[2px]" />
 
         <div className="relative flex h-full w-full flex-col items-center justify-evenly">
-          <div className="bg-background rounded-2xl border px-4 py-1 text-sm font-medium">
+          <div className="rounded-2xl border bg-background px-4 py-1 font-medium text-sm">
             <Trans>User profiles are here!</Trans>
           </div>
 
           <div className="w-full max-w-md">
-            <UserProfileTimur
-              rows={2}
-              className="bg-background border-border rounded-2xl border shadow-md"
-            />
+            <UserProfileTimur rows={2} className="rounded-2xl border border-border bg-background shadow-md" />
           </div>
 
           <div />
         </div>
       </div>
 
-      <div className="border-border dark:bg-background relative z-10 flex min-h-[min(850px,80vh)] w-full max-w-lg flex-col rounded-xl border bg-neutral-100 p-6">
+      <div className="relative z-10 flex min-h-[min(850px,80vh)] w-full max-w-lg flex-col rounded-xl border border-border bg-neutral-100 p-6 dark:bg-background">
         <div className="h-20">
-          <h1 className="text-xl font-semibold md:text-2xl">
+          <h1 className="font-semibold text-xl md:text-2xl">
             <Trans>Create a new account</Trans>
           </h1>
 
-          <p className="text-muted-foreground mt-2 text-xs md:text-sm">
+          <p className="mt-2 text-muted-foreground text-xs md:text-sm">
             <Trans>
-              Create your account and start using state-of-the-art document signing. Open and
-              beautiful signing is within your grasp.
+              Create your account and start using state-of-the-art document signing. Open and beautiful signing is
+              within your grasp.
             </Trans>
           </p>
         </div>
@@ -240,153 +235,149 @@ export const SignUpForm = ({
         <hr className="-mx-6 my-4" />
 
         <Form {...form}>
-          <form
-            className="flex w-full flex-1 flex-col gap-y-4"
-            onSubmit={form.handleSubmit(onFormSubmit)}
-          >
-            <fieldset
-              className={cn(
-                'flex h-[550px] w-full flex-col gap-y-4',
-                hasSocialAuthEnabled && 'h-[650px]',
+          <form className="flex w-full flex-1 flex-col gap-y-4" onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
+              {isEmailPasswordSignupEnabled && (
+                <>
+                  <FormField
+                    control={form.control}
+                    name="name"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          <Trans>Full Name</Trans>
+                        </FormLabel>
+                        <FormControl>
+                          <Input type="text" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="email"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          <Trans>Email Address</Trans>
+                        </FormLabel>
+                        <FormControl>
+                          <Input type="email" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="password"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          <Trans>Password</Trans>
+                        </FormLabel>
+
+                        <FormControl>
+                          <PasswordInput {...field} />
+                        </FormControl>
+
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="signature"
+                    render={({ field: { onChange, value } }) => (
+                      <FormItem>
+                        <FormLabel>
+                          <Trans>Sign Here</Trans>
+                        </FormLabel>
+                        <FormControl>
+                          <SignaturePadDialog
+                            disabled={isSubmitting}
+                            value={value}
+                            onChange={(v) => onChange(v ?? '')}
+                          />
+                        </FormControl>
+
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </>
               )}
-              disabled={isSubmitting}
-            >
-              <FormField
-                control={form.control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      <Trans>Full Name</Trans>
-                    </FormLabel>
-                    <FormControl>
-                      <Input type="text" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
 
-              <FormField
-                control={form.control}
-                name="email"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      <Trans>Email Address</Trans>
-                    </FormLabel>
-                    <FormControl>
-                      <Input type="email" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="password"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      <Trans>Password</Trans>
-                    </FormLabel>
-
-                    <FormControl>
-                      <PasswordInput {...field} />
-                    </FormControl>
-
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="signature"
-                render={({ field: { onChange, value } }) => (
-                  <FormItem>
-                    <FormLabel>
-                      <Trans>Sign Here</Trans>
-                    </FormLabel>
-                    <FormControl>
-                      <SignaturePadDialog
-                        disabled={isSubmitting}
-                        value={value}
-                        onChange={(v) => onChange(v ?? '')}
-                      />
-                    </FormControl>
-
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+              {turnstileSiteKey && (
+                <Turnstile
+                  ref={turnstileRef}
+                  siteKey={turnstileSiteKey}
+                  onSuccess={setCaptchaToken}
+                  onExpire={() => setCaptchaToken(null)}
+                  options={{
+                    size: 'flexible',
+                    appearance: 'interaction-only',
+                  }}
+                />
+              )}
 
               {hasSocialAuthEnabled && (
-                <>
-                  <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">
-                      <Trans>Or</Trans>
-                    </span>
-                    <div className="bg-border h-px flex-1" />
-                  </div>
-                </>
+                <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
+                  <div className="h-px flex-1 bg-border" />
+                  <span className="bg-transparent text-muted-foreground">
+                    <Trans>Or</Trans>
+                  </span>
+                  <div className="h-px flex-1 bg-border" />
+                </div>
               )}
 
-              {isGoogleSSOEnabled && (
-                <>
-                  <Button
-                    type="button"
-                    size="lg"
-                    variant={'outline'}
-                    className="bg-background text-muted-foreground border"
-                    disabled={isSubmitting}
-                    onClick={onSignUpWithGoogleClick}
-                  >
-                    <FcGoogle className="mr-2 h-5 w-5" />
-                    <Trans>Sign Up with Google</Trans>
-                  </Button>
-                </>
+              {isGoogleSignupEnabled && (
+                <Button
+                  type="button"
+                  size="lg"
+                  variant={'outline'}
+                  className="border bg-background text-muted-foreground"
+                  disabled={isSubmitting}
+                  onClick={onSignUpWithGoogleClick}
+                >
+                  <FcGoogle className="mr-2 h-5 w-5" />
+                  <Trans>Sign Up with Google</Trans>
+                </Button>
               )}
 
-              {isMicrosoftSSOEnabled && (
-                <>
-                  <Button
-                    type="button"
-                    size="lg"
-                    variant={'outline'}
-                    className="bg-background text-muted-foreground border"
-                    disabled={isSubmitting}
-                    onClick={onSignUpWithMicrosoftClick}
-                  >
-                    <img
-                      className="mr-2 h-4 w-4"
-                      alt="Microsoft Logo"
-                      src={'/static/microsoft.svg'}
-                    />
-                    <Trans>Sign Up with Microsoft</Trans>
-                  </Button>
-                </>
+              {isMicrosoftSignupEnabled && (
+                <Button
+                  type="button"
+                  size="lg"
+                  variant={'outline'}
+                  className="border bg-background text-muted-foreground"
+                  disabled={isSubmitting}
+                  onClick={onSignUpWithMicrosoftClick}
+                >
+                  <img className="mr-2 h-4 w-4" alt="Microsoft Logo" src={'/static/microsoft.svg'} />
+                  <Trans>Sign Up with Microsoft</Trans>
+                </Button>
               )}
 
-              {isOIDCSSOEnabled && (
-                <>
-                  <Button
-                    type="button"
-                    size="lg"
-                    variant={'outline'}
-                    className="bg-background text-muted-foreground border"
-                    disabled={isSubmitting}
-                    onClick={onSignUpWithOIDCClick}
-                  >
-                    <FaIdCardClip className="mr-2 h-5 w-5" />
-                    <Trans>Sign Up with OIDC</Trans>
-                  </Button>
-                </>
+              {isOidcSignupEnabled && (
+                <Button
+                  type="button"
+                  size="lg"
+                  variant={'outline'}
+                  className="border bg-background text-muted-foreground"
+                  disabled={isSubmitting}
+                  onClick={onSignUpWithOIDCClick}
+                >
+                  <FaIdCardClip className="mr-2 h-5 w-5" />
+                  <Trans>Sign Up with OIDC</Trans>
+                </Button>
               )}
 
-              <p className="text-muted-foreground mt-4 text-sm">
+              <p className="mt-4 text-muted-foreground text-sm">
                 <Trans>
                   Already have an account?{' '}
                   <Link to="/signin" className="text-documenso-700 duration-200 hover:opacity-70">
@@ -396,17 +387,14 @@ export const SignUpForm = ({
               </p>
             </fieldset>
 
-            <Button
-              loading={form.formState.isSubmitting}
-              type="submit"
-              size="lg"
-              className="mt-6 w-full"
-            >
-              <Trans>Create account</Trans>
-            </Button>
+            {isEmailPasswordSignupEnabled && (
+              <Button loading={form.formState.isSubmitting} type="submit" size="lg" className="mt-6 w-full">
+                <Trans>Create account</Trans>
+              </Button>
+            )}
           </form>
         </Form>
-        <p className="text-muted-foreground mt-6 text-xs">
+        <p className="mt-6 text-muted-foreground text-xs">
           <Trans>
             By proceeding, you agree to our{' '}
             <Link

apps/remix/app/components/forms/subscription-claim-form.tsx

@@ -1,10 +1,3 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, useLingui } from '@lingui/react/macro';
-import type { SubscriptionClaim } from '@prisma/client';
-import { useForm } from 'react-hook-form';
-import { Link } from 'react-router';
-import type { z } from 'zod';
-
 import type { TLicenseClaim } from '@documenso/lib/types/license';
 import { SUBSCRIPTION_CLAIM_FEATURE_FLAGS } from '@documenso/lib/types/subscription';
 import { ZCreateSubscriptionClaimRequestSchema } from '@documenso/trpc/server/admin-router/create-subscription-claim.types';
@@ -20,6 +13,12 @@ import {
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
+import type { SubscriptionClaim } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import { Link } from 'react-router';
+import type { z } from 'zod';
 
 export type SubscriptionClaimFormValues = z.infer<typeof ZCreateSubscriptionClaimRequestSchema>;
 
@@ -152,42 +151,39 @@ export const SubscriptionClaimForm = ({
             </FormLabel>
 
             <div className="mt-2 space-y-2 rounded-md border p-4">
-              {Object.values(SUBSCRIPTION_CLAIM_FEATURE_FLAGS).map(
-                ({ key, label, isEnterprise }) => {
-                  const isRestrictedFeature =
-                    isEnterprise && !licenseFlags?.[key as keyof TLicenseClaim]; // eslint-disable-line @typescript-eslint/consistent-type-assertions
+              {Object.values(SUBSCRIPTION_CLAIM_FEATURE_FLAGS).map(({ key, label, isEnterprise }) => {
+                const isRestrictedFeature = isEnterprise && !licenseFlags?.[key as keyof TLicenseClaim]; // eslint-disable-line @typescript-eslint/consistent-type-assertions
 
-                  return (
-                    <FormField
-                      key={key}
-                      control={form.control}
-                      name={`flags.${key}`}
-                      render={({ field }) => (
-                        <FormItem className="flex items-center space-x-2">
-                          <FormControl>
-                            <div className="flex items-center">
-                              <Checkbox
-                                id={`flag-${key}`}
-                                checked={field.value}
-                                onCheckedChange={field.onChange}
-                                disabled={isRestrictedFeature && !field.value} // Allow disabling of restricted features.
-                              />
+                return (
+                  <FormField
+                    key={key}
+                    control={form.control}
+                    name={`flags.${key}`}
+                    render={({ field }) => (
+                      <FormItem className="flex items-center space-x-2">
+                        <FormControl>
+                          <div className="flex items-center">
+                            <Checkbox
+                              id={`flag-${key}`}
+                              checked={field.value}
+                              onCheckedChange={field.onChange}
+                              disabled={isRestrictedFeature && !field.value} // Allow disabling of restricted features.
+                            />
 
-                              <label
-                                className="ml-2 flex flex-row items-center text-sm text-muted-foreground"
-                                htmlFor={`flag-${key}`}
-                              >
-                                {label}
-                                {isRestrictedFeature && ' ¹'}
-                              </label>
-                            </div>
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  );
-                },
-              )}
+                            <label
+                              className="ml-2 flex flex-row items-center text-muted-foreground text-sm"
+                              htmlFor={`flag-${key}`}
+                            >
+                              {label}
+                              {isRestrictedFeature && ' ¹'}
+                            </label>
+                          </div>
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                );
+              })}
             </div>
 
             {hasRestrictedEnterpriseFeatures && (

apps/remix/app/components/forms/support-ticket-form.tsx

@@ -1,22 +1,14 @@
+import { trpc } from '@documenso/trpc/react';
+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 { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { trpc } from '@documenso/trpc/react';
-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 { Textarea } from '@documenso/ui/primitives/textarea';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
 const ZSupportTicketSchema = z.object({
   subject: z.string().min(3, 'Subject is required'),
   message: z.string().min(10, 'Message must be at least 10 characters'),
@@ -31,17 +23,11 @@ export type SupportTicketFormProps = {
   onClose?: () => void;
 };
 
-export const SupportTicketForm = ({
-  organisationId,
-  teamId,
-  onSuccess,
-  onClose,
-}: SupportTicketFormProps) => {
+export const SupportTicketForm = ({ organisationId, teamId, onSuccess, onClose }: SupportTicketFormProps) => {
   const { t } = useLingui();
   const { toast } = useToast();
 
-  const { mutateAsync: submitSupportTicket, isPending } =
-    trpc.profile.submitSupportTicket.useMutation();
+  const { mutateAsync: submitSupportTicket, isPending } = trpc.profile.submitSupportTicket.useMutation();
 
   const form = useForm<TSupportTicket>({
     resolver: zodResolver(ZSupportTicketSchema),
@@ -84,55 +70,53 @@ export const SupportTicketForm = ({
   };
 
   return (
-    <>
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)}>
-          <fieldset disabled={isLoading} className="flex flex-col gap-4">
-            <FormField
-              control={form.control}
-              name="subject"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel required>
-                    <Trans>Subject</Trans>
-                  </FormLabel>
-                  <FormControl>
-                    <Input {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <fieldset disabled={isLoading} className="flex flex-col gap-4">
+          <FormField
+            control={form.control}
+            name="subject"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel required>
+                  <Trans>Subject</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
 
-            <FormField
-              control={form.control}
-              name="message"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel required>
-                    <Trans>Message</Trans>
-                  </FormLabel>
-                  <FormControl>
-                    <Textarea rows={5} {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+          <FormField
+            control={form.control}
+            name="message"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel required>
+                  <Trans>Message</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Textarea rows={5} {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
 
-            <div className="mt-2 flex flex-row gap-2">
-              <Button type="submit" size="sm" loading={isLoading}>
-                <Trans>Submit</Trans>
+          <div className="mt-2 flex flex-row gap-2">
+            <Button type="submit" size="sm" loading={isLoading}>
+              <Trans>Submit</Trans>
+            </Button>
+            {onClose && (
+              <Button variant="outline" size="sm" type="button" onClick={onClose}>
+                <Trans>Close</Trans>
               </Button>
-              {onClose && (
-                <Button variant="outline" size="sm" type="button" onClick={onClose}>
-                  <Trans>Close</Trans>
-                </Button>
-              )}
-            </div>
-          </fieldset>
-        </form>
-      </Form>
-    </>
+            )}
+          </div>
+        </fieldset>
+      </form>
+    </Form>
   );
 };

apps/remix/app/components/forms/team-update-form.tsx

@@ -1,3 +1,11 @@
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZUpdateTeamRequestSchema } from '@documenso/trpc/server/team-router/update-team.types';
+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 { useToast } from '@documenso/ui/primitives/use-toast';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -7,22 +15,6 @@ import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 import type { z } from 'zod';
 
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { trpc } from '@documenso/trpc/react';
-import { ZUpdateTeamRequestSchema } from '@documenso/trpc/server/team-router/update-team.types';
-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 { useToast } from '@documenso/ui/primitives/use-toast';
-
 export type UpdateTeamDialogProps = {
   teamId: number;
   teamName: string;
@@ -129,7 +121,7 @@ export const TeamUpdateForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogPr
                   <Input className="bg-background" {...field} />
                 </FormControl>
                 {!form.formState.errors.url && (
-                  <span className="text-foreground/50 text-xs font-normal">
+                  <span className="font-normal text-foreground/50 text-xs">
                     {field.value ? (
                       `${NEXT_PUBLIC_WEBAPP_URL()}/t/${field.value}`
                     ) : (

apps/remix/app/components/forms/token.tsx

@@ -1,15 +1,3 @@
-import { useState } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import type { ApiToken } from '@prisma/client';
-import { AnimatePresence, motion } from 'framer-motion';
-import { useForm } from 'react-hook-form';
-import { match } from 'ts-pattern';
-import type { z } from 'zod';
-
 import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
@@ -27,15 +15,19 @@ import {
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
 import { Switch } from '@documenso/ui/primitives/switch';
 import { useToast } from '@documenso/ui/primitives/use-toast';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { ApiToken } from '@prisma/client';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
+import type { z } from 'zod';
 
 import { useCurrentTeam } from '~/providers/team';
 
@@ -129,10 +121,7 @@ export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
       const error = AppError.parseError(err);
 
       const errorMessage = match(error.code)
-        .with(
-          AppErrorCode.UNAUTHORIZED,
-          () => msg`You do not have permission to create a token for this team.`,
-        )
+        .with(AppErrorCode.UNAUTHORIZED, () => msg`You do not have permission to create a token for this team.`)
         .otherwise(() => msg`Something went wrong. Please try again later.`);
 
       toast({
@@ -148,10 +137,7 @@ export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
     <div className={cn(className)}>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)}>
-          <fieldset
-            className="mt-6 flex w-full flex-col gap-4"
-            disabled={form.formState.isSubmitting}
-          >
+          <fieldset className="mt-6 flex w-full flex-col gap-4" disabled={form.formState.isSubmitting}>
             <FormField
               control={form.control}
               name="tokenName"
@@ -168,10 +154,7 @@ export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
                   </div>
 
                   <FormDescription className="text-xs italic">
-                    <Trans>
-                      Please enter a meaningful name for your token. This will help you identify it
-                      later.
-                    </Trans>
+                    <Trans>Please enter a meaningful name for your token. This will help you identify it later.</Trans>
                   </FormDescription>
 
                   <FormMessage />
@@ -225,11 +208,7 @@ export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
               </div>
             </div>
 
-            <Button
-              type="submit"
-              className="hidden md:inline-flex"
-              loading={form.formState.isSubmitting}
-            >
+            <Button type="submit" className="hidden md:inline-flex" loading={form.formState.isSubmitting}>
               <Trans>Create token</Trans>
             </Button>
 
@@ -243,35 +222,32 @@ export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
       </Form>
 
       <AnimatePresence>
-        {newlyCreatedToken &&
-          tokens &&
-          tokens.find((token) => token.id === newlyCreatedToken.id) && (
-            <motion.div
-              className="mt-8"
-              initial={{ opacity: 0, y: -40 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 40 }}
-            >
-              <Card gradient>
-                <CardContent className="p-4">
-                  <p className="mt-2 text-sm text-muted-foreground">
-                    <Trans>
-                      Your token was created successfully! Make sure to copy it because you won't be
-                      able to see it again!
-                    </Trans>
-                  </p>
+        {newlyCreatedToken && tokens && tokens.find((token) => token.id === newlyCreatedToken.id) && (
+          <motion.div
+            className="mt-8"
+            initial={{ opacity: 0, y: -40 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 40 }}
+          >
+            <Card gradient>
+              <CardContent className="p-4">
+                <p className="mt-2 text-muted-foreground text-sm">
+                  <Trans>
+                    Your token was created successfully! Make sure to copy it because you won't be able to see it again!
+                  </Trans>
+                </p>
 
-                  <p className="my-4 rounded-md bg-muted-foreground/10 px-2.5 py-1 font-mono text-sm">
-                    {newlyCreatedToken.token}
-                  </p>
+                <p className="my-4 rounded-md bg-muted-foreground/10 px-2.5 py-1 font-mono text-sm">
+                  {newlyCreatedToken.token}
+                </p>
 
-                  <Button variant="outline" onClick={() => void copyToken(newlyCreatedToken.token)}>
-                    <Trans>Copy token</Trans>
-                  </Button>
-                </CardContent>
-              </Card>
-            </motion.div>
-          )}
+                <Button variant="outline" onClick={() => void copyToken(newlyCreatedToken.token)}>
+                  <Trans>Copy token</Trans>
+                </Button>
+              </CardContent>
+            </Card>
+          </motion.div>
+        )}
       </AnimatePresence>
     </div>
   );