chore: enable typed signature by default (#1436)

Enable typed signature by default and also add the option to set a typed
signature in the profile page.

apps/web/src/app/(signing)/sign/[token]/provider.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
 
 export type SigningContextValue = {
   fullName: string;
@@ -44,6 +44,12 @@ export const SigningProvider = ({
   const [email, setEmail] = useState(initialEmail || '');
   const [signature, setSignature] = useState(initialSignature || null);
 
+  useEffect(() => {
+    if (initialSignature) {
+      setSignature(initialSignature);
+    }
+  }, [initialSignature]);
+
   return (
     <SigningContext.Provider
       value={{

apps/web/src/app/(signing)/sign/[token]/signature-field.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo, useState, useTransition } from 'react';
+import { useLayoutEffect, useMemo, useRef, useState, useTransition } from 'react';
 
 import { useRouter } from 'next/navigation';
 
@@ -51,6 +51,10 @@ export const SignatureField = ({
   const { _ } = useLingui();
   const { toast } = useToast();
 
+  const signatureRef = useRef<HTMLParagraphElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [fontSize, setFontSize] = useState(2);
+
   const { signature: providedSignature, setSignature: setProvidedSignature } =
     useRequiredSigningContext();
 
@@ -108,6 +112,7 @@ export const SignatureField = ({
       actionTarget: field.type,
     });
   };
+
   const onSign = async (authOptions?: TRecipientActionAuth, signature?: string) => {
     try {
       const value = signature || providedSignature;
@@ -117,11 +122,23 @@ export const SignatureField = ({
         return;
       }
 
+      const isTypedSignature = !value.startsWith('data:image');
+
+      if (isTypedSignature && !typedSignatureEnabled) {
+        toast({
+          title: _(msg`Error`),
+          description: _(msg`Typed signatures are not allowed. Please draw your signature.`),
+          variant: 'destructive',
+        });
+
+        return;
+      }
+
       const payload: TSignFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
         value,
-        isBase64: true,
+        isBase64: !isTypedSignature,
         authOptions,
       };
 
@@ -176,6 +193,41 @@ export const SignatureField = ({
     }
   };
 
+  useLayoutEffect(() => {
+    if (!signatureRef.current || !containerRef.current || !signature?.typedSignature) {
+      return;
+    }
+
+    const adjustTextSize = () => {
+      const container = containerRef.current;
+      const text = signatureRef.current;
+
+      if (!container || !text) {
+        return;
+      }
+
+      let size = 2;
+      text.style.fontSize = `${size}rem`;
+
+      while (
+        (text.scrollWidth > container.clientWidth || text.scrollHeight > container.clientHeight) &&
+        size > 0.8
+      ) {
+        size -= 0.1;
+        text.style.fontSize = `${size}rem`;
+      }
+
+      setFontSize(size);
+    };
+
+    const resizeObserver = new ResizeObserver(adjustTextSize);
+    resizeObserver.observe(containerRef.current);
+
+    adjustTextSize();
+
+    return () => resizeObserver.disconnect();
+  }, [signature?.typedSignature]);
+
   return (
     <SigningFieldContainer
       field={field}
@@ -205,10 +257,15 @@ export const SignatureField = ({
       )}
 
       {state === 'signed-text' && (
-        <p className="font-signature text-muted-foreground dark:text-background text-lg duration-200 sm:text-xl md:text-2xl lg:text-3xl">
-          {/* This optional chaining is intentional, we don't want to move the check into the condition above */}
-          {signature?.typedSignature}
-        </p>
+        <div ref={containerRef} className="flex h-full w-full items-center justify-center p-2">
+          <p
+            ref={signatureRef}
+            className="font-signature text-muted-foreground dark:text-background w-full overflow-hidden break-all text-center leading-tight duration-200"
+            style={{ fontSize: `${fontSize}rem` }}
+          >
+            {signature?.typedSignature}
+          </p>
+        </div>
       )}
 
       <Dialog open={showSignatureModal} onOpenChange={setShowSignatureModal}>