fix: reauth, etc

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

@@ -152,6 +152,18 @@ export const EditorFieldTextForm = ({
                     className="h-auto"
                     placeholder={t`Add text to the field`}
                     {...field}
+                    onChange={(e) => {
+                      const values = form.getValues();
+                      const characterLimit = values.characterLimit || 0;
+                      let textValue = e.target.value;
+
+                      if (characterLimit > 0 && textValue.length > characterLimit) {
+                        textValue = textValue.slice(0, characterLimit);
+                      }
+
+                      e.target.value = textValue;
+                      field.onChange(e);
+                    }}
                     rows={1}
                   />
                 </FormControl>
@@ -175,6 +187,18 @@ export const EditorFieldTextForm = ({
                     className="bg-background"
                     placeholder={t`Field character limit`}
                     {...field}
+                    onChange={(e) => {
+                      field.onChange(e);
+
+                      const values = form.getValues();
+                      const characterLimit = parseInt(e.target.value, 10) || 0;
+
+                      const textValue = values.text || '';
+
+                      if (characterLimit > 0 && textValue.length > characterLimit) {
+                        form.setValue('text', textValue.slice(0, characterLimit));
+                      }
+                    }}
                   />
                 </FormControl>
                 <FormMessage />

apps/remix/app/components/general/document-signing/envelope-signing-provider.tsx

@@ -13,6 +13,7 @@ import { prop, sortBy } from 'remeda';
 import { isBase64Image } from '@documenso/lib/constants/signatures';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import type { EnvelopeForSigningResponse } from '@documenso/lib/server-only/envelope/get-envelope-for-recipient-signing';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import {
   isFieldUnsignedAndRequired,
   isRequiredField,
@@ -51,7 +52,11 @@ export type EnvelopeSigningContextValue = {
   setSelectedAssistantRecipientId: (_value: number | null) => void;
   selectedAssistantRecipient: EnvelopeForSigningResponse['envelope']['recipients'][number] | null;
 
-  signField: (_fieldId: number, _value: TSignEnvelopeFieldValue) => Promise<void>;
+  signField: (
+    _fieldId: number,
+    _value: TSignEnvelopeFieldValue,
+    authOptions?: TRecipientActionAuth,
+  ) => Promise<void>;
 };
 
 const EnvelopeSigningContext = createContext<EnvelopeSigningContextValue | null>(null);
@@ -284,7 +289,11 @@ export const EnvelopeSigningProvider = ({
       : null;
   }, [envelope.documentMeta?.signingOrder, envelope.recipients, recipient.id]);
 
-  const signField = async (fieldId: number, fieldValue: TSignEnvelopeFieldValue) => {
+  const signField = async (
+    fieldId: number,
+    fieldValue: TSignEnvelopeFieldValue,
+    authOptions?: TRecipientActionAuth,
+  ) => {
     // Set the field locally for direct templates.
     if (isDirectTemplate) {
       handleDirectTemplateFieldInsertion(fieldId, fieldValue);
@@ -295,7 +304,7 @@ export const EnvelopeSigningProvider = ({
       token: envelopeData.recipient.token,
       fieldId,
       fieldValue,
-      authOptions: undefined,
+      authOptions,
     });
   };
 

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page-renderer.tsx

@@ -103,7 +103,6 @@ export default function EnvelopeEditorFieldsPageRenderer() {
       fieldUpdates.height = fieldPageHeight;
     }
 
-    // Todo: envelopes Use id
     editorFields.updateFieldByFormId(fieldFormId, fieldUpdates);
 
     // Select the field if it is not already selected.

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx

@@ -27,7 +27,8 @@ import type {
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
-import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
 import { RecipientSelector } from '@documenso/ui/primitives/recipient-selector';
 import { Separator } from '@documenso/ui/primitives/separator';
 
@@ -112,7 +113,29 @@ export const EnvelopeEditorFieldsPage = () => {
         <EnvelopeRendererFileSelector fields={editorFields.localFields} />
 
         {/* Document View */}
-        <div className="mt-4 flex h-full justify-center p-4">
+        <div className="mt-4 flex flex-col items-center justify-center">
+          {envelope.recipients.length === 0 && (
+            <Alert
+              variant="neutral"
+              className="border-border bg-background mb-4 flex max-w-[800px] flex-row items-center justify-between space-y-0 rounded-sm border"
+            >
+              <div className="flex flex-col gap-1">
+                <AlertTitle>
+                  <Trans>Missing Recipients</Trans>
+                </AlertTitle>
+                <AlertDescription>
+                  <Trans>You need at least one recipient to add fields</Trans>
+                </AlertDescription>
+              </div>
+
+              <Button asChild variant="outline">
+                <Link to={`${relativePath.editorPath}`}>
+                  <Trans>Add Recipients</Trans>
+                </Link>
+              </Button>
+            </Alert>
+          )}
+
           {currentEnvelopeItem !== null ? (
             <PDFViewerKonvaLazy customPageRenderer={EnvelopeEditorFieldsPageRenderer} />
           ) : (
@@ -130,7 +153,7 @@ export const EnvelopeEditorFieldsPage = () => {
       </div>
 
       {/* Right Section - Form Fields Panel */}
-      {currentEnvelopeItem && (
+      {currentEnvelopeItem && envelope.recipients.length > 0 && (
         <div className="bg-background border-border sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-l py-4">
           {/* Recipient selector section. */}
           <section className="px-4">
@@ -138,29 +161,15 @@ export const EnvelopeEditorFieldsPage = () => {
               <Trans>Selected Recipient</Trans>
             </h3>
 
-            {envelope.recipients.length === 0 ? (
-              <Alert variant="warning">
-                <AlertDescription className="flex flex-col gap-2">
-                  <Trans>You need at least one recipient to add fields</Trans>
-
-                  <Link to={`${relativePath.editorPath}`} className="text-sm">
-                    <p>
-                      <Trans>Click here to add a recipient</Trans>
-                    </p>
-                  </Link>
-                </AlertDescription>
-              </Alert>
-            ) : (
-              <RecipientSelector
-                selectedRecipient={editorFields.selectedRecipient}
-                onSelectedRecipientChange={(recipient) =>
-                  editorFields.setSelectedRecipient(recipient.id)
-                }
-                recipients={envelope.recipients}
-                className="w-full"
-                align="end"
-              />
-            )}
+            <RecipientSelector
+              selectedRecipient={editorFields.selectedRecipient}
+              onSelectedRecipientChange={(recipient) =>
+                editorFields.setSelectedRecipient(recipient.id)
+              }
+              recipients={envelope.recipients}
+              className="w-full"
+              align="end"
+            />
 
             {editorFields.selectedRecipient &&
               !canRecipientFieldsBeModified(editorFields.selectedRecipient, envelope.fields) && (

apps/remix/app/components/general/envelope-editor/envelope-editor-settings-dialog.tsx

@@ -323,7 +323,7 @@ export const EnvelopeEditorSettingsDialog = ({
 
       <DialogContent className="flex w-full !max-w-5xl flex-row gap-0 p-0">
         {/* Sidebar. */}
-        <div className="flex w-80 flex-col border-r bg-gray-50">
+        <div className="bg-accent/20 flex w-80 flex-col border-r">
           <DialogHeader className="p-6 pb-4">
             <DialogTitle>Document Settings</DialogTitle>
           </DialogHeader>

apps/remix/app/components/general/envelope-editor/envelope-editor-upload-page.tsx

@@ -203,7 +203,6 @@ export const EnvelopeEditorUploadPage = () => {
     debouncedUpdateEnvelopeItems(items);
   };
 
-  // Todo: Envelopes - Sync into envelopes data
   const debouncedUpdateEnvelopeItems = useDebounceFunction((files: LocalFile[]) => {
     void updateEnvelopeItems({
       envelopeId: envelope.id,

apps/remix/app/components/general/envelope-signing/envelope-signer-page-renderer.tsx

@@ -10,14 +10,17 @@ import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-rende
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import { DIRECT_TEMPLATE_RECIPIENT_EMAIL } from '@documenso/lib/constants/direct-templates';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { ZFullFieldSchema } from '@documenso/lib/types/field';
 import { createSpinner } from '@documenso/lib/universal/field-renderer/field-generic-items';
 import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
 import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
 import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import type { TSignEnvelopeFieldValue } from '@documenso/trpc/server/envelope-router/sign-envelope-field.types';
 import { EnvelopeFieldToolTip } from '@documenso/ui/components/field/envelope-field-tooltip';
 import type { TRecipientColor } from '@documenso/ui/lib/recipient-colors';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { handleCheckboxFieldClick } from '~/utils/field-signing/checkbox-field';
 import { handleDropdownFieldClick } from '~/utils/field-signing/dropdown-field';
@@ -28,20 +31,24 @@ import { handleNumberFieldClick } from '~/utils/field-signing/number-field';
 import { handleSignatureFieldClick } from '~/utils/field-signing/signature-field';
 import { handleTextFieldClick } from '~/utils/field-signing/text-field';
 
+import { useRequiredDocumentSigningAuthContext } from '../document-signing/document-signing-auth-provider';
 import { useRequiredEnvelopeSigningContext } from '../document-signing/envelope-signing-provider';
 
 export default function EnvelopeSignerPageRenderer() {
-  const { i18n } = useLingui();
+  const { t, i18n } = useLingui();
   const { currentEnvelopeItem } = useCurrentEnvelopeRender();
   const { sessionData } = useOptionalSession();
 
+  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
+  const { toast } = useToast();
+
   const {
     envelopeData,
     recipient,
     recipientFields,
     recipientFieldsRemaining,
     showPendingFieldTooltip,
-    signField,
+    signField: signFieldInternal,
     email,
     setEmail,
     fullName,
@@ -318,7 +325,6 @@ export default function EnvelopeSignerPageRenderer() {
          * SIGNATURE FIELD.
          */
         .with({ type: FieldType.SIGNATURE }, (field) => {
-          // Todo: Envelopes - Reauth
           handleSignatureFieldClick({
             field,
             signature,
@@ -329,11 +335,21 @@ export default function EnvelopeSignerPageRenderer() {
             .then(async (payload) => {
               if (payload) {
                 fieldGroup.add(loadingSpinnerGroup);
-                await signField(field.id, payload);
-              }
 
-              if (payload?.value) {
-                setSignature(payload.value);
+                if (payload.value) {
+                  void executeActionAuthProcedure({
+                    onReauthFormSubmit: async (authOptions) => {
+                      await signField(field.id, payload, authOptions);
+
+                      loadingSpinnerGroup.destroy();
+                    },
+                    actionTarget: field.type,
+                  });
+
+                  setSignature(payload.value);
+                } else {
+                  await signField(field.id, payload);
+                }
               }
             })
             .finally(() => {
@@ -347,6 +363,26 @@ export default function EnvelopeSignerPageRenderer() {
     fieldGroup.on('pointerdown', handleFieldGroupClick);
   };
 
+  const signField = async (
+    fieldId: number,
+    payload: TSignEnvelopeFieldValue,
+    authOptions?: TRecipientActionAuth,
+  ) => {
+    try {
+      await signFieldInternal(fieldId, payload, authOptions);
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: t`Error`,
+        description: t`An error occurred while signing the field.`,
+        variant: 'destructive',
+      });
+
+      throw err;
+    }
+  };
+
   /**
    * Initialize the Konva page canvas and all fields and interactions.
    */