Merge remote-tracking branch 'origin/main' into pr-2508

# Conflicts: # apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents._index.tsx # packages/lib/server-only/document/find-documents.ts
2026-07-26 09:54:51 +10:00 · 2026-07-02 06:48:23 +00:00
parent ef4384423d 337f85f021
commit a676e92f03
640 changed files with 42155 additions and 7972 deletions
@@ -21,6 +21,8 @@ import { z } from 'zod';
 import { useOptionalCurrentTeam } from '~/providers/team';
 import { useCspNonce } from '~/utils/nonce';

+import { FormStickySaveBar } from './form-sticky-save-bar';
+
 const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
 const ACCEPTED_FILE_TYPES = ['image/jpeg', 'image/png', 'image/webp'];

@@ -71,38 +73,82 @@ export function BrandingPreferencesForm({
  const parsedColors = ZCssVarsSchema.safeParse(settings.brandingColors);
  const initialColors = parsedColors.success ? parsedColors.data : {};

+  // The saved state the form maps to. Used both as the reactive `values` source and as
+  // the explicit target for a Reset (see handleReset).
+  const savedValues: TBrandingPreferencesFormSchema = {
+    brandingEnabled: settings.brandingEnabled ?? null,
+    brandingUrl: settings.brandingUrl ?? '',
+    brandingLogo: undefined,
+    brandingCompanyDetails: settings.brandingCompanyDetails ?? '',
+    brandingColors: initialColors,
+    brandingCss: settings.brandingCss ?? '',
+  };
+
  const form = useForm<TBrandingPreferencesFormSchema>({
-    values: {
-      brandingEnabled: settings.brandingEnabled ?? null,
-      brandingUrl: settings.brandingUrl ?? '',
-      brandingLogo: undefined,
-      brandingCompanyDetails: settings.brandingCompanyDetails ?? '',
-      brandingColors: initialColors,
-      brandingCss: settings.brandingCss ?? '',
-    },
+    values: savedValues,
    resolver: zodResolver(ZBrandingPreferencesFormSchema),
  });

  const isBrandingEnabled = form.watch('brandingEnabled');

+  const getSavedLogoPreviewUrl = () => {
+    if (!settings.brandingLogo) {
+      return '';
+    }
+
+    const file = JSON.parse(settings.brandingLogo);
+
+    if (!('type' in file) || !('data' in file)) {
+      return '';
+    }
+
+    const logoUrl =
+      context === 'Team'
+        ? `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/team/${team?.id}`
+        : `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/organisation/${organisation?.id}`;
+
+    return `${logoUrl}?v=${Date.now()}`;
+  };
+
  useEffect(() => {
-    if (settings.brandingLogo) {
-      const file = JSON.parse(settings.brandingLogo);
+    const savedLogoPreviewUrl = getSavedLogoPreviewUrl();

-      if ('type' in file && 'data' in file) {
-        const logoUrl =
-          context === 'Team'
-            ? `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/team/${team?.id}`
-            : `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/organisation/${organisation?.id}`;
-
-        setPreviewUrl(logoUrl + '?v=' + Date.now());
-        setHasLoadedPreview(true);
-      }
+    if (savedLogoPreviewUrl) {
+      setPreviewUrl(savedLogoPreviewUrl);
    }

    setHasLoadedPreview(true);
  }, [settings.brandingLogo]);

+  // Reset the form to the saved values. The form is driven by the `values` prop (no
+  // `defaultValues`), so `reset()` with no argument doesn't re-baseline the dirty check;
+  // passing the saved values clears the per-field dirty tracking (dirtyFields).
+  const handleReset = () => {
+    setPreviewUrl(getSavedLogoPreviewUrl());
+    form.reset(savedValues);
+  };
+
+  // `formState.isDirty` is unreliable for a `values`-driven form: after a reset (or a
+  // save + refetch) it can stay true even though every field already matches its saved
+  // value and `dirtyFields` is empty. Derive the flag from `dirtyFields` instead so the
+  // sticky save bar reliably disappears.
+  const hasUnsavedChanges = Object.keys(form.formState.dirtyFields).length > 0;
+
+  // Re-baseline the form to the just-saved state after a successful submit. The `values`
+  // prop re-syncs most fields once the route refetches, but write-only fields (the logo
+  // is a File that isn't reflected back into `values`) would otherwise stay dirty and
+  // keep the save bar visible. Relies on the page handler rethrowing on error so we only
+  // re-baseline on success.
+  const handleFormSubmit = form.handleSubmit(async (data) => {
+    try {
+      await onFormSubmit(data);
+    } catch {
+      return;
+    }
+
+    form.reset(form.getValues());
+  });
+
  // Cleanup ObjectURL on unmount or when previewUrl changes
  useEffect(() => {
    return () => {
@@ -114,7 +160,7 @@ export function BrandingPreferencesForm({

  return (
    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+      <form onSubmit={handleFormSubmit}>
        <fieldset className="flex h-full flex-col gap-y-4" disabled={form.formState.isSubmitting}>
          <FormField
            control={form.control}
@@ -167,7 +213,7 @@ export function BrandingPreferencesForm({
          />

          <div className="relative flex w-full flex-col gap-y-4">
-            {!isBrandingEnabled && <div className="absolute inset-0 z-[9998] bg-background/60" />}
+            {!isBrandingEnabled && <div className="absolute inset-0 z-30 bg-background/60" />}

            <FormField
              control={form.control}
@@ -321,7 +367,7 @@ export function BrandingPreferencesForm({

          {hasAdvancedBranding && (
            <div className="relative flex w-full flex-col gap-y-6">
-              {!isBrandingEnabled && <div className="absolute inset-0 z-[9998] bg-background/60" />}
+              {!isBrandingEnabled && <div className="absolute inset-0 z-30 bg-background/60" />}

              <div>
                <FormLabel>
@@ -538,11 +584,11 @@ export function BrandingPreferencesForm({
            </div>
          )}

-          <div className="flex flex-row justify-end space-x-4">
-            <Button type="submit" loading={form.formState.isSubmitting}>
-              <Trans>Update</Trans>
-            </Button>
-          </div>
+          <FormStickySaveBar
+            isDirty={hasUnsavedChanges}
+            isSubmitting={form.formState.isSubmitting}
+            onReset={handleReset}
+          />
        </fieldset>
      </form>
    </Form>
@@ -21,7 +21,6 @@ import { ReminderSettingsPicker } from '@documenso/ui/components/document/remind
 import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
 import { Alert } from '@documenso/ui/primitives/alert';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
-import { Button } from '@documenso/ui/primitives/button';
 import { Combobox } from '@documenso/ui/primitives/combobox';
 import {
  Form,
@@ -46,6 +45,7 @@ import { z } from 'zod';
 import { useOptionalCurrentTeam } from '~/providers/team';

 import { DefaultRecipientsMultiSelectCombobox } from '../general/default-recipients-multiselect-combobox';
+import { FormStickySaveBar } from './form-sticky-save-bar';

 /**
 * Can't infer this from the schema since we need to keep the schema inside the component to allow
@@ -147,9 +147,21 @@ export const DocumentPreferencesForm = ({
    resolver: zodResolver(ZDocumentPreferencesFormSchema),
  });

+  const handleFormSubmit = form.handleSubmit(async (data) => {
+    try {
+      await onFormSubmit(data);
+    } catch {
+      // The page handler surfaces its own error toast. Keep the form dirty so
+      // the save bar stays visible and the user can retry.
+      return;
+    }
+
+    form.reset(data);
+  });
+
  return (
    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+      <form onSubmit={handleFormSubmit}>
        <fieldset className="flex h-full max-w-2xl flex-col gap-y-6" disabled={form.formState.isSubmitting}>
          {!isPersonalLayoutMode && (
            <FormField
@@ -756,11 +768,11 @@ export const DocumentPreferencesForm = ({
            />
          )}

-          <div className="flex flex-row justify-end space-x-4">
-            <Button type="submit" loading={form.formState.isSubmitting}>
-              <Trans>Update</Trans>
-            </Button>
-          </div>
+          <FormStickySaveBar
+            isDirty={form.formState.isDirty}
+            isSubmitting={form.formState.isSubmitting}
+            onReset={() => form.reset()}
+          />
        </fieldset>
      </form>
    </Form>
@@ -116,11 +116,12 @@ export const EditorFieldDropdownForm = ({
    }

    const newValues = [...currentValues];
+    const removedValue = currentValues[index].value;
    newValues.splice(index, 1);

    form.setValue('values', newValues);

-    if (form.getValues('defaultValue') === newValues[index].value) {
+    if (form.getValues('defaultValue') === removedValue) {
      form.setValue('defaultValue', undefined);
    }
  };
@@ -4,7 +4,6 @@ import { DEFAULT_DOCUMENT_EMAIL_SETTINGS, ZDocumentEmailSettingsSchema } from '@
 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';
 import {
  Form,
  FormControl,
@@ -22,6 +21,8 @@ import type { TeamGlobalSettings } from '@prisma/client';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';

+import { FormStickySaveBar } from './form-sticky-save-bar';
+
 const ZEmailPreferencesFormSchema = z.object({
  emailId: z.string().nullable(),
  emailReplyTo: zEmail().nullable(),
@@ -59,9 +60,21 @@ export const EmailPreferencesForm = ({ settings, onFormSubmit, canInherit }: Ema

  const emails = emailData?.data || [];

+  const handleFormSubmit = form.handleSubmit(async (data) => {
+    try {
+      await onFormSubmit(data);
+    } catch {
+      // The page handler surfaces its own error toast. Keep the form dirty so
+      // the save bar stays visible and the user can retry.
+      return;
+    }
+
+    form.reset(data);
+  });
+
  return (
    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+      <form onSubmit={handleFormSubmit}>
        <fieldset className="flex h-full max-w-2xl flex-col gap-y-6" disabled={form.formState.isSubmitting}>
          {organisation.organisationClaim.flags.emailDomains && (
            <FormField
@@ -203,11 +216,11 @@ export const EmailPreferencesForm = ({ settings, onFormSubmit, canInherit }: Ema
            )}
          />

-          <div className="flex flex-row justify-end space-x-4">
-            <Button type="submit" loading={form.formState.isSubmitting}>
-              <Trans>Update</Trans>
-            </Button>
-          </div>
+          <FormStickySaveBar
+            isDirty={form.formState.isDirty}
+            isSubmitting={form.formState.isSubmitting}
+            onReset={() => form.reset()}
+          />
        </fieldset>
      </form>
    </Form>
@@ -0,0 +1,317 @@
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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 { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const ZEmailTransportFormSchema = z.object({
+  name: z.string().min(1),
+  fromName: z.string().min(1),
+  fromAddress: z.string().email(),
+  type: z.enum(['SMTP_AUTH', 'SMTP_API', 'RESEND', 'MAILCHANNELS']),
+  host: z.string().optional(),
+  port: z.coerce.number().int().positive().optional(),
+  secure: z.boolean().optional(),
+  ignoreTLS: z.boolean().optional(),
+  username: z.string().optional(),
+  password: z.string().optional(),
+  service: z.string().optional(),
+  apiKey: z.string().optional(),
+  apiKeyUser: z.string().optional(),
+  endpoint: z.string().optional(),
+});
+
+export type EmailTransportFormValues = z.infer<typeof ZEmailTransportFormSchema>;
+
+type EmailTransportFormProps = {
+  defaultValues?: Partial<EmailTransportFormValues>;
+  isEdit?: boolean;
+  onFormSubmit: (values: EmailTransportFormValues) => Promise<void>;
+  formSubmitTrigger?: React.ReactNode;
+};
+
+export const EmailTransportForm = ({
+  defaultValues,
+  isEdit = false,
+  onFormSubmit,
+  formSubmitTrigger,
+}: EmailTransportFormProps) => {
+  const { t } = useLingui();
+
+  const form = useForm<EmailTransportFormValues>({
+    resolver: zodResolver(ZEmailTransportFormSchema),
+    defaultValues: {
+      name: '',
+      fromName: '',
+      fromAddress: '',
+      type: 'SMTP_AUTH',
+      secure: false,
+      ignoreTLS: false,
+      ...defaultValues,
+    },
+  });
+
+  const type = form.watch('type');
+  const secretPlaceholder = isEdit ? t`Leave blank to keep current` : undefined;
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+        <fieldset disabled={form.formState.isSubmitting} className="space-y-4">
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Name</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input placeholder={t`e.g. Resend (free plans)`} {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="grid grid-cols-2 gap-4">
+            <FormField
+              control={form.control}
+              name="fromName"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>From name</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="fromAddress"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>From address</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input type="email" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <FormField
+            control={form.control}
+            name="type"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Transport type</Trans>
+                </FormLabel>
+                <Select value={field.value} onValueChange={field.onChange} disabled={isEdit}>
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="SMTP_AUTH">SMTP (auth)</SelectItem>
+                    <SelectItem value="SMTP_API">SMTP (api)</SelectItem>
+                    <SelectItem value="RESEND">Resend</SelectItem>
+                    <SelectItem value="MAILCHANNELS">MailChannels</SelectItem>
+                  </SelectContent>
+                </Select>
+                {isEdit && (
+                  <FormDescription>
+                    <Trans>Transport type cannot be changed after creation.</Trans>
+                  </FormDescription>
+                )}
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {(type === 'SMTP_AUTH' || type === 'SMTP_API') && (
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="host"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Host</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input {...field} value={field.value ?? ''} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="port"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Port</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input type="number" {...field} value={field.value ?? ''} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+          )}
+
+          {type === 'SMTP_AUTH' && (
+            <>
+              <FormField
+                control={form.control}
+                name="username"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Username</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input {...field} value={field.value ?? ''} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Password</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input type="password" placeholder={secretPlaceholder} {...field} value={field.value ?? ''} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </>
+          )}
+
+          {type === 'SMTP_API' && (
+            <FormField
+              control={form.control}
+              name="apiKey"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>API key</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input type="password" placeholder={secretPlaceholder} {...field} value={field.value ?? ''} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+
+          {(type === 'RESEND' || type === 'MAILCHANNELS') && (
+            <FormField
+              control={form.control}
+              name="apiKey"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>API key</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input type="password" placeholder={secretPlaceholder} {...field} value={field.value ?? ''} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+
+          {type === 'MAILCHANNELS' && (
+            <FormField
+              control={form.control}
+              name="endpoint"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>Endpoint (optional)</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input {...field} value={field.value ?? ''} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+
+          {formSubmitTrigger}
+        </fieldset>
+      </form>
+    </Form>
+  );
+};
+
+/**
+ * Maps flat form values to the tRPC `config` discriminated union.
+ */
+export const emailTransportFormToConfig = (values: EmailTransportFormValues) => {
+  switch (values.type) {
+    case 'SMTP_AUTH':
+      return {
+        type: 'SMTP_AUTH' as const,
+        host: values.host ?? '',
+        port: values.port ?? 587,
+        secure: values.secure ?? false,
+        ignoreTLS: values.ignoreTLS ?? false,
+        username: values.username || undefined,
+        password: values.password || undefined,
+        service: values.service || undefined,
+      };
+    case 'SMTP_API':
+      return {
+        type: 'SMTP_API' as const,
+        host: values.host ?? '',
+        port: values.port ?? 587,
+        secure: values.secure ?? false,
+        apiKey: values.apiKey || '',
+        apiKeyUser: values.apiKeyUser || undefined,
+      };
+    case 'RESEND':
+      return { type: 'RESEND' as const, apiKey: values.apiKey || '' };
+    case 'MAILCHANNELS':
+      return {
+        type: 'MAILCHANNELS' as const,
+        apiKey: values.apiKey || '',
+        endpoint: values.endpoint || undefined,
+      };
+  }
+};
@@ -0,0 +1,119 @@
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { AnimatePresence, motion } from 'framer-motion';
+import { AlertTriangleIcon } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+
+export type FormStickySaveBarProps = {
+  isDirty: boolean;
+  isSubmitting: boolean;
+  onReset: () => void;
+};
+
+/**
+ * A single `position: sticky` bar rendered at the bottom of the form.
+ *
+ * - When the form's end is on screen it settles into place as a plain footer (just the
+ *   Reset / Save buttons).
+ * - When the form's end is scrolled off, it sticks to the bottom of the viewport and
+ *   shows the "unsaved changes" pill chrome.
+ *
+ * Because it's the same element in the form's flow, it auto-aligns to the form and the
+ * float <-> dock hand-off is a native, scroll-linked transition (no measurement, no
+ * shared-layout morph). A 1px sentinel below it detects the stuck state so we can toggle
+ * the pill chrome.
+ */
+export const FormStickySaveBar = ({ isDirty, isSubmitting, onReset }: FormStickySaveBarProps) => {
+  const { t } = useLingui();
+
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const [isStuck, setIsStuck] = useState(false);
+
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+
+    if (!sentinel) {
+      return;
+    }
+
+    // The sentinel sits at the bar's resting position (the end of the form). While the
+    // bar is stuck to the bottom of the viewport the sentinel is scrolled past (out of
+    // view); once you reach the form's end it comes into view and the bar settles.
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsStuck(!entry.isIntersecting);
+      },
+      {
+        root: null,
+        rootMargin: '0px 0px -24px 0px',
+        threshold: 0,
+      },
+    );
+
+    observer.observe(sentinel);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  // Show the floating pill chrome only when there are unsaved changes AND the form's
+  // end is off screen.
+  const isFloating = isDirty && isStuck;
+
+  return (
+    <>
+      <div
+        data-testid="form-sticky-save-bar"
+        className={cn(
+          'z-40 flex min-h-9 min-w-0 items-center gap-x-2 rounded-lg py-4 transition-[margin,padding,background-color,border-color,box-shadow] duration-200 md:gap-x-4',
+          isDirty ? 'sticky bottom-6' : '',
+          // On mobile the docked and floating states are geometrically identical (only
+          // paint changes): a horizontal bleed there overflows the narrow viewport and
+          // fights the IntersectionObserver (oscillation + partial hiding). From `sm` up
+          // there's room, so we restore the original chrome — the island bleeds 8px past
+          // the form when floating, and the buttons sit flush with the fields when docked.
+          isFloating
+            ? 'border border-border bg-background px-4 shadow-2xl sm:-mx-2'
+            : 'border border-transparent bg-transparent px-4 shadow-none sm:px-0',
+        )}
+      >
+        <AnimatePresence initial={false}>
+          {isFloating && (
+            <motion.div
+              key="notice"
+              role="region"
+              aria-label={t`Unsaved changes`}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.15 }}
+              className="flex min-h-9 min-w-0 items-center gap-x-2 text-sm"
+            >
+              <AlertTriangleIcon className="h-5 w-5 flex-shrink-0 text-destructive" />
+              <span className="font-medium text-xs md:text-sm">
+                <Trans>You have unsaved changes</Trans>
+              </span>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        <div className="ml-auto flex flex-shrink-0 items-center gap-x-2">
+          {isDirty && (
+            <Button type="button" variant="secondary" size="sm" onClick={onReset} disabled={isSubmitting}>
+              <Trans>Undo</Trans>
+            </Button>
+          )}
+
+          <Button type="submit" className="shrink-0" size="sm" loading={isSubmitting} disabled={!isDirty}>
+            <Trans>Save changes</Trans>
+          </Button>
+        </div>
+      </div>
+
+      {/* Sentinel: detects when the sticky bar is floating (stuck) vs settled (docked). */}
+      <div ref={sentinelRef} aria-hidden className="pointer-events-none h-px w-full" />
+    </>
+  );
+};
@@ -4,7 +4,6 @@ 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';
@@ -12,11 +11,12 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { AnimatePresence, motion } from 'framer-motion';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 import type { z } from 'zod';

+import { FormStickySaveBar } from './form-sticky-save-bar';
+
 const ZOrganisationUpdateFormSchema = ZUpdateOrganisationRequestSchema.shape.data.pick({
  name: true,
  url: true,
@@ -137,36 +137,11 @@ export const OrganisationUpdateForm = () => {
            )}
          />

-          <div className="flex flex-row justify-end space-x-4">
-            <AnimatePresence>
-              {form.formState.isDirty && (
-                <motion.div
-                  initial={{
-                    opacity: 0,
-                  }}
-                  animate={{
-                    opacity: 1,
-                  }}
-                  exit={{
-                    opacity: 0,
-                  }}
-                >
-                  <Button type="button" variant="secondary" onClick={() => form.reset()}>
-                    <Trans>Reset</Trans>
-                  </Button>
-                </motion.div>
-              )}
-            </AnimatePresence>
-
-            <Button
-              type="submit"
-              className="transition-opacity"
-              disabled={!form.formState.isDirty}
-              loading={form.formState.isSubmitting}
-            >
-              <Trans>Update organisation</Trans>
-            </Button>
-          </div>
+          <FormStickySaveBar
+            isDirty={form.formState.isDirty}
+            isSubmitting={form.formState.isSubmitting}
+            onReset={() => form.reset()}
+          />
        </fieldset>
      </form>
    </Form>
@@ -197,7 +197,9 @@ export const PublicProfileForm = ({ className, profile, onProfileUpdate }: Publi

              return (
                <FormItem>
-                  <FormLabel>Bio</FormLabel>
+                  <FormLabel>
+                    <Trans>Bio</Trans>
+                  </FormLabel>
                  <FormControl>
                    <Textarea {...field} placeholder={_(msg`Write a description to display on your public profile`)} />
                  </FormControl>
@@ -58,6 +58,7 @@ export type TSignInFormSchema = z.infer<typeof ZSignInFormSchema>;
 export type SignInFormProps = {
  className?: string;
  initialEmail?: string;
+  isEmailPasswordSigninEnabled?: boolean;
  isGoogleSSOEnabled?: boolean;
  isMicrosoftSSOEnabled?: boolean;
  isOIDCSSOEnabled?: boolean;
@@ -68,6 +69,7 @@ export type SignInFormProps = {
 export const SignInForm = ({
  className,
  initialEmail,
+  isEmailPasswordSigninEnabled = true,
  isGoogleSSOEnabled,
  isMicrosoftSSOEnabled,
  isOIDCSSOEnabled,
@@ -89,7 +91,6 @@ export const SignInForm = ({
  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);

@@ -197,13 +198,31 @@ export const SignInForm = ({
  };

  const onFormSubmit = async ({ email, password, totpCode, backupCode }: TSignInFormSchema) => {
+    const $turnstile = isTwoFactorAuthenticationDialogOpen ? twoFactorTurnstileRef.current : turnstileRef.current;
+
    try {
+      let token: string | undefined;
+
+      if (turnstileSiteKey) {
+        token = await $turnstile?.getResponsePromise(3000).catch((_err) => undefined);
+
+        if (!token) {
+          toast({
+            title: _(msg`Human verification required`),
+            description: _(msg`Please complete the CAPTCHA challenge before signing in.`),
+            variant: 'destructive',
+          });
+
+          return;
+        }
+      }
+
      await authClient.emailPassword.signIn({
        email,
        password,
        totpCode,
        backupCode,
-        captchaToken: captchaToken ?? undefined,
+        captchaToken: token ?? undefined,
        redirectPath,
      });
    } catch (err) {
@@ -214,10 +233,6 @@ 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;
      }

@@ -247,8 +262,7 @@ export const SignInForm = ({
        variant: 'destructive',
      });

-      turnstileRef.current?.reset();
-      setCaptchaToken(null);
+      $turnstile?.reset();
    }
  };

@@ -312,68 +326,78 @@ export const SignInForm = ({
    <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}>
-          <FormField
-            control={form.control}
-            name="email"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>
-                  <Trans>Email</Trans>
-                </FormLabel>
+          {isEmailPasswordSigninEnabled && (
+            <>
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Email</Trans>
+                    </FormLabel>

-                <FormControl>
-                  <Input type="email" {...field} />
-                </FormControl>
+                    <FormControl>
+                      <Input type="email" {...field} />
+                    </FormControl>

-                <FormMessage />
-              </FormItem>
-            )}
-          />
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />

-          <FormField
-            control={form.control}
-            name="password"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>
-                  <Trans>Password</Trans>
-                </FormLabel>
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Password</Trans>
+                    </FormLabel>

-                <FormControl>
-                  <PasswordInput {...field} />
-                </FormControl>
+                    <FormControl>
+                      <PasswordInput {...field} />
+                    </FormControl>

-                <FormMessage />
+                    <FormMessage />

-                <p className="mt-2 text-right">
-                  <Link to="/forgot-password" className="text-muted-foreground text-sm duration-200 hover:opacity-70">
-                    <Trans>Forgot your password?</Trans>
-                  </Link>
-                </p>
-              </FormItem>
-            )}
-          />
+                    <p className="mt-2 text-right">
+                      <Link
+                        to="/forgot-password"
+                        className="text-muted-foreground text-sm duration-200 hover:opacity-70"
+                      >
+                        <Trans>Forgot your password?</Trans>
+                      </Link>
+                    </p>
+                  </FormItem>
+                )}
+              />

-          {turnstileSiteKey && !isTwoFactorAuthenticationDialogOpen && (
-            <Turnstile
-              ref={turnstileRef}
-              siteKey={turnstileSiteKey}
-              onSuccess={setCaptchaToken}
-              onExpire={() => setCaptchaToken(null)}
-              options={{
-                size: 'flexible',
-                appearance: 'interaction-only',
-              }}
-            />
+              {turnstileSiteKey && !isTwoFactorAuthenticationDialogOpen && (
+                <Turnstile
+                  ref={turnstileRef}
+                  siteKey={turnstileSiteKey}
+                  options={{
+                    size: 'flexible',
+                    appearance: 'always',
+                  }}
+                />
+              )}
+
+              <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>
+            </>
          )}

-          <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>
-
          {!isEmbeddedRedirect && (
            <>
-              {hasSocialAuthEnabled && (
+              {isEmailPasswordSigninEnabled && hasSocialAuthEnabled && (
                <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">
@@ -499,11 +523,9 @@ export const SignInForm = ({
                  <Turnstile
                    ref={twoFactorTurnstileRef}
                    siteKey={turnstileSiteKey}
-                    onSuccess={setCaptchaToken}
-                    onExpire={() => setCaptchaToken(null)}
                    options={{
                      size: 'flexible',
-                      appearance: 'interaction-only',
+                      appearance: 'always',
                    }}
                  />
                </div>
@@ -518,7 +540,7 @@ export const SignInForm = ({
                  )}
                </Button>

-                <Button type="submit" loading={isSubmitting} disabled={Boolean(turnstileSiteKey) && !captchaToken}>
+                <Button type="submit" loading={isSubmitting}>
                  {isSubmitting ? <Trans>Signing in...</Trans> : <Trans>Sign In</Trans>}
                </Button>
              </DialogFooter>
@@ -20,7 +20,7 @@ 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 { useEffect, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { FaIdCardClip } from 'react-icons/fa6';
 import { FcGoogle } from 'react-icons/fc';
@@ -49,6 +49,7 @@ export const ZSignUpFormSchema = z

 export const SIGNUP_ERROR_MESSAGES: Record<string, MessageDescriptor> = {
  SIGNUP_DISABLED: msg`Signup is currently disabled or not available for your email domain.`,
+  SIGNUP_DISPOSABLE_EMAIL: msg`Disposable email addresses are not allowed. Please sign up with a permanent email address.`,
  [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.`,
 };
@@ -86,8 +87,6 @@ export const SignUpForm = ({
  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>({
@@ -105,12 +104,28 @@ export const SignUpForm = ({

  const onFormSubmit = async ({ name, email, password, signature }: TSignUpFormSchema) => {
    try {
+      let token: string | undefined;
+
+      if (turnstileSiteKey) {
+        token = await turnstileRef.current?.getResponsePromise(3000).catch((_err) => undefined);
+
+        if (!token) {
+          toast({
+            title: _(msg`Human verification required`),
+            description: _(msg`Please complete the CAPTCHA challenge before signing in.`),
+            variant: 'destructive',
+          });
+
+          return;
+        }
+      }
+
      await authClient.emailPassword.signUp({
        name,
        email,
        password,
        signature,
-        captchaToken: captchaToken ?? undefined,
+        captchaToken: token ?? undefined,
      });

      await navigate(returnTo ? returnTo : '/unverified-account');
@@ -140,7 +155,6 @@ export const SignUpForm = ({
      });

      turnstileRef.current?.reset();
-      setCaptchaToken(null);
    }
  };

@@ -316,11 +330,9 @@ export const SignUpForm = ({
                <Turnstile
                  ref={turnstileRef}
                  siteKey={turnstileSiteKey}
-                  onSuccess={setCaptchaToken}
-                  onExpire={() => setCaptchaToken(null)}
                  options={{
                    size: 'flexible',
-                    appearance: 'interaction-only',
+                    appearance: 'always',
                  }}
                />
              )}
@@ -1,5 +1,6 @@
 import type { TLicenseClaim } from '@documenso/lib/types/license';
 import { SUBSCRIPTION_CLAIM_FEATURE_FLAGS } from '@documenso/lib/types/subscription';
+import { trpc } from '@documenso/trpc/react';
 import { ZCreateSubscriptionClaimRequestSchema } from '@documenso/trpc/server/admin-router/create-subscription-claim.types';
 import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
@@ -13,6 +14,7 @@ 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 { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
 import type { SubscriptionClaim } from '@prisma/client';
@@ -20,6 +22,8 @@ import { useForm } from 'react-hook-form';
 import { Link } from 'react-router';
 import type { z } from 'zod';

+import { ClaimLimitFields } from '../general/claim-limit-fields';
+
 export type SubscriptionClaimFormValues = z.infer<typeof ZCreateSubscriptionClaimRequestSchema>;

 type SubscriptionClaimFormProps = {
@@ -49,10 +53,22 @@ export const SubscriptionClaimForm = ({
      teamCount: subscriptionClaim.teamCount,
      memberCount: subscriptionClaim.memberCount,
      envelopeItemCount: subscriptionClaim.envelopeItemCount,
+      recipientCount: subscriptionClaim.recipientCount,
      flags: subscriptionClaim.flags,
+      documentRateLimits: subscriptionClaim.documentRateLimits,
+      documentQuota: subscriptionClaim.documentQuota,
+      emailRateLimits: subscriptionClaim.emailRateLimits,
+      emailQuota: subscriptionClaim.emailQuota,
+      apiRateLimits: subscriptionClaim.apiRateLimits,
+      apiQuota: subscriptionClaim.apiQuota,
+      emailTransportId: subscriptionClaim.emailTransportId ?? null,
    },
  });

+  const { data: transportsData } = trpc.admin.emailTransport.find.useQuery({ perPage: 100 });
+  const transports = transportsData?.data ?? [];
+  const NONE_VALUE = '__none__';
+
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onFormSubmit)}>
@@ -145,6 +161,30 @@ export const SubscriptionClaimForm = ({
            )}
          />

+          <FormField
+            control={form.control}
+            name="recipientCount"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Recipient Count</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input
+                    type="number"
+                    min={0}
+                    {...field}
+                    onChange={(e) => field.onChange(parseInt(e.target.value, 10) || 0)}
+                  />
+                </FormControl>
+                <FormDescription>
+                  <Trans>Maximum number of recipients per document allowed. 0 = Unlimited</Trans>
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
          <div>
            <FormLabel>
              <Trans>Feature Flags</Trans>
@@ -203,6 +243,42 @@ export const SubscriptionClaimForm = ({
            )}
          </div>

+          <ClaimLimitFields control={form.control} disabled={form.formState.isSubmitting} />
+
+          <FormField
+            control={form.control}
+            name="emailTransportId"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Email transport</Trans>
+                </FormLabel>
+                <Select
+                  value={field.value ?? NONE_VALUE}
+                  onValueChange={(value) => field.onChange(value === NONE_VALUE ? null : value)}
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder={t`Default (system mailer)`} />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value={NONE_VALUE}>{t`Default (system mailer)`}</SelectItem>
+                    {transports.map((transport) => (
+                      <SelectItem key={transport.id} value={transport.id}>
+                        {transport.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormDescription>
+                  <Trans>Plans without a transport use the system default mailer.</Trans>
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
          {formSubmitTrigger}
        </fieldset>
      </form>
@@ -2,7 +2,6 @@ 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';
@@ -10,11 +9,12 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { AnimatePresence, motion } from 'framer-motion';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 import type { z } from 'zod';

+import { FormStickySaveBar } from './form-sticky-save-bar';
+
 export type UpdateTeamDialogProps = {
  teamId: number;
  teamName: string;
@@ -135,36 +135,11 @@ export const TeamUpdateForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogPr
            )}
          />

-          <div className="flex flex-row justify-end space-x-4">
-            <AnimatePresence>
-              {form.formState.isDirty && (
-                <motion.div
-                  initial={{
-                    opacity: 0,
-                  }}
-                  animate={{
-                    opacity: 1,
-                  }}
-                  exit={{
-                    opacity: 0,
-                  }}
-                >
-                  <Button type="button" variant="secondary" onClick={() => form.reset()}>
-                    <Trans>Reset</Trans>
-                  </Button>
-                </motion.div>
-              )}
-            </AnimatePresence>
-
-            <Button
-              type="submit"
-              className="transition-opacity"
-              disabled={!form.formState.isDirty}
-              loading={form.formState.isSubmitting}
-            >
-              <Trans>Update team</Trans>
-            </Button>
-          </div>
+          <FormStickySaveBar
+            isDirty={form.formState.isDirty}
+            isSubmitting={form.formState.isSubmitting}
+            onReset={() => form.reset()}
+          />
        </fieldset>
      </form>
    </Form>