fix: remove non-standard fields that would cause prisma validation errors

The `typedSignatureEnabled` prop was removed from the `SignatureField`
component, which broke the typed signature meaning that nobody could
sign documents by typing their signature.

apps/documentation/pages/developers/embedding/css-variables.mdx

@@ -111,6 +111,83 @@ The colors will be automatically converted to the appropriate format internally.
 
 4. **Consistent Radius**: Use a consistent border radius value that matches your application's design system.
 
+## CSS Class Targets
+
+In addition to CSS variables, specific components in the embedded experience can be targeted using CSS classes for more granular styling:
+
+### Component Classes
+
+| Class Name                        | Description                                                             |
+| --------------------------------- | ----------------------------------------------------------------------- |
+| `.embed--Root`                    | Main container for the embedded signing experience                      |
+| `.embed--DocumentContainer`       | Container for the document and signing widget                           |
+| `.embed--DocumentViewer`          | Container for the document viewer                                       |
+| `.embed--DocumentWidget`          | The signing widget container                                            |
+| `.embed--DocumentWidgetContainer` | Outer container for the signing widget, handles positioning             |
+| `.embed--DocumentWidgetHeader`    | Header section of the signing widget                                    |
+| `.embed--DocumentWidgetContent`   | Main content area of the signing widget                                 |
+| `.embed--DocumentWidgetForm`      | Form section within the signing widget                                  |
+| `.embed--DocumentWidgetFooter`    | Footer section of the signing widget                                    |
+| `.embed--WaitingForTurn`          | Container for the waiting screen when it's not the user's turn to sign  |
+| `.embed--DocumentCompleted`       | Container for the completion screen after signing                       |
+| `.field--FieldRootContainer`      | Base container for document fields (signatures, text, checkboxes, etc.) |
+
+Field components also expose several data attributes that can be used for styling different states:
+
+| Data Attribute      | Values                                         | Description                          |
+| ------------------- | ---------------------------------------------- | ------------------------------------ |
+| `[data-field-type]` | `SIGNATURE`, `TEXT`, `CHECKBOX`, `RADIO`, etc. | The type of field                    |
+| `[data-inserted]`   | `true`, `false`                                | Whether the field has been filled    |
+| `[data-validate]`   | `true`, `false`                                | Whether the field is being validated |
+
+### Field Styling Example
+
+```css
+/* Style all field containers */
+.field--FieldRootContainer {
+  transition: all 200ms ease;
+}
+
+/* Style specific field types */
+.field--FieldRootContainer[data-field-type='SIGNATURE'] {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+/* Style inserted fields */
+.field--FieldRootContainer[data-inserted='true'] {
+  background-color: var(--primary);
+  opacity: 0.2;
+}
+
+/* Style fields being validated */
+.field--FieldRootContainer[data-validate='true'] {
+  border-color: orange;
+}
+```
+
+### Example Usage
+
+```css
+/* Custom styles for the document widget */
+.embed--DocumentWidget {
+  background-color: #ffffff;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+}
+
+/* Custom styles for the waiting screen */
+.embed--WaitingForTurn {
+  background-color: #f9fafb;
+  padding: 2rem;
+}
+
+/* Responsive adjustments for the document container */
+@media (min-width: 768px) {
+  .embed--DocumentContainer {
+    gap: 2rem;
+  }
+}
+```
+
 ## Related
 
 - [React Integration](/developers/embedding/react)

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@documenso/web",
-  "version": "1.9.0",
+  "version": "1.9.1-rc.1",
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {

apps/web/src/app/(recipient)/d/[token]/sign-direct-template.tsx

@@ -189,6 +189,7 @@ export const SignDirectTemplateForm = ({
                   field={field}
                   onSignField={onSignField}
                   onUnsignField={onUnsignField}
+                  typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
                 />
               ))
               .with(FieldType.INITIALS, () => (
@@ -342,6 +343,7 @@ export const SignDirectTemplateForm = ({
                     onChange={(value) => {
                       setSignature(value);
                     }}
+                    allowTypedSignature={template.templateMeta?.typedSignatureEnabled}
                   />
                 </CardContent>
               </Card>

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

@@ -179,14 +179,8 @@ export const NumberField = ({ field, onSignField, onUnsignField }: NumberFieldPr
 
   const onRemove = async () => {
     try {
-      if (isAssistantMode && !targetSigner) {
-        return;
-      }
-
-      const signingRecipient = isAssistantMode && targetSigner ? targetSigner : recipient;
-
       const payload: TRemovedSignedFieldWithTokenMutationSchema = {
-        token: signingRecipient.token,
+        token: recipient.token,
         fieldId: field.id,
       };
 

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

@@ -68,26 +68,16 @@ export const RadioField = ({ field, onSignField, onUnsignField }: RadioFieldProp
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
-      if (isAssistantMode && !targetSigner) {
-        return;
-      }
-
       if (!selectedOption) {
         return;
       }
 
-      const signingRecipient = isAssistantMode && targetSigner ? targetSigner : recipient;
-
       const payload: TSignFieldWithTokenMutationSchema = {
-        token: signingRecipient.token,
+        token: recipient.token,
         fieldId: field.id,
         value: selectedOption,
         isBase64: true,
         authOptions,
-        ...(isAssistantMode && {
-          isAssistantPrefill: true,
-          assistantId: recipient.id,
-        }),
       };
 
       if (onSignField) {

apps/web/src/app/(signing)/sign/[token]/signing-page-view.tsx

@@ -179,7 +179,13 @@ export const SigningPageView = ({
             )
             .map((field) =>
               match(field.type)
-                .with(FieldType.SIGNATURE, () => <SignatureField key={field.id} field={field} />)
+                .with(FieldType.SIGNATURE, () => (
+                  <SignatureField
+                    key={field.id}
+                    field={field}
+                    typedSignatureEnabled={documentMeta?.typedSignatureEnabled}
+                  />
+                ))
                 .with(FieldType.INITIALS, () => <InitialsField key={field.id} field={field} />)
                 .with(FieldType.NAME, () => <NameField key={field.id} field={field} />)
                 .with(FieldType.DATE, () => (

apps/web/src/app/embed/completed.tsx

@@ -12,7 +12,7 @@ export type EmbedDocumentCompletedPageProps = {
 export const EmbedDocumentCompleted = ({ name, signature }: EmbedDocumentCompletedPageProps) => {
   console.log({ signature });
   return (
-    <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
+    <div className="embed--DocumentCompleted relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
       <h3 className="text-foreground text-2xl font-semibold">
         <Trans>Document Completed!</Trans>
       </h3>

apps/web/src/app/embed/sign/[[...url]]/client.tsx

@@ -226,12 +226,12 @@ export const EmbedSignDocumentClientPage = ({
 
   return (
     <RecipientProvider recipient={recipient} targetSigner={selectedSigner ?? null}>
-      <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
+      <div className="embed--Root relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
         {(!hasFinishedInit || !hasDocumentLoaded) && <EmbedClientLoading />}
 
-        <div className="relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
+        <div className="embed--DocumentContainer relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
           {/* Viewer */}
-          <div className="flex-1">
+          <div className="embed--DocumentViewer flex-1">
             <LazyPDFViewer
               documentData={documentData}
               onDocumentLoad={() => setHasDocumentLoaded(true)}
@@ -241,12 +241,12 @@ export const EmbedSignDocumentClientPage = ({
           {/* Widget */}
           <div
             key={isExpanded ? 'expanded' : 'collapsed'}
-            className="group/document-widget fixed bottom-8 left-0 z-50 h-fit w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
+            className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
             data-expanded={isExpanded || undefined}
           >
-            <div className="border-border bg-widget flex w-full flex-col rounded-xl border px-4 py-4 md:py-6">
+            <div className="embed--DocumentWidget border-border bg-widget flex w-full flex-col rounded-xl border px-4 py-4 md:py-6">
               {/* Header */}
-              <div>
+              <div className="embed--DocumentWidgetHeader">
                 <div className="flex items-center justify-between gap-x-2">
                   <h3 className="text-foreground text-xl font-semibold md:text-2xl">
                     {isAssistantMode ? (
@@ -272,7 +272,7 @@ export const EmbedSignDocumentClientPage = ({
                 </div>
               </div>
 
-              <div className="hidden group-data-[expanded]/document-widget:block md:block">
+              <div className="embed--DocumentWidgetContent hidden group-data-[expanded]/document-widget:block md:block">
                 <p className="text-muted-foreground mt-2 text-sm">
                   {isAssistantMode ? (
                     <Trans>Help complete the document for other signers.</Trans>
@@ -285,7 +285,7 @@ export const EmbedSignDocumentClientPage = ({
               </div>
 
               {/* Form */}
-              <div className="-mx-2 hidden px-2 group-data-[expanded]/document-widget:block md:block">
+              <div className="embed--DocumentWidgetForm -mx-2 hidden px-2 group-data-[expanded]/document-widget:block md:block">
                 <div className="flex flex-1 flex-col gap-y-4">
                   {isAssistantMode && (
                     <div>
@@ -413,7 +413,7 @@ export const EmbedSignDocumentClientPage = ({
 
               <div className="hidden flex-1 group-data-[expanded]/document-widget:block md:block" />
 
-              <div className="mt-4 hidden w-full grid-cols-2 items-center group-data-[expanded]/document-widget:grid md:grid">
+              <div className="embed--DocumentWidgetFooter mt-4 hidden w-full grid-cols-2 items-center group-data-[expanded]/document-widget:grid md:grid">
                 {pendingFields.length > 0 ? (
                   <Button className="col-start-2" onClick={() => onNextFieldClick()}>
                     <Trans>Next</Trans>

apps/web/src/app/embed/waiting-for-turn.tsx

@@ -26,7 +26,7 @@ export const EmbedWaitingForTurn = () => {
   }
 
   return (
-    <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
+    <div className="embed--WaitingForTurn relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
       <h3 className="text-foreground text-center text-2xl font-bold">
         <Trans>Waiting for Your Turn</Trans>
       </h3>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@documenso/root",
-  "version": "1.9.0",
+  "version": "1.9.1-rc.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@documenso/root",
-      "version": "1.9.0",
+      "version": "1.9.1-rc.1",
       "workspaces": [
         "apps/*",
         "packages/*"
@@ -106,7 +106,7 @@
     },
     "apps/web": {
       "name": "@documenso/web",
-      "version": "1.9.0",
+      "version": "1.9.1-rc.1",
       "license": "AGPL-3.0",
       "dependencies": {
         "@documenso/api": "*",
@@ -35722,6 +35722,21 @@
       "engines": {
         "node": ">=6"
       }
+    },
+    "packages/trpc/node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.6.tgz",
+      "integrity": "sha512-hNukAxq7hu4o5/UjPp5jqoBEtrpCbOmnUqZSKNJG8GrUVzfq0ucdhQFVrHcLRMvQcwqqDh1a5AJN9ORnNDpgBQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "1.9.0",
+  "version": "1.9.1-rc.1",
   "scripts": {
     "build": "turbo run build",
     "build:web": "turbo run build --filter=@documenso/web",

packages/lib/next-auth/auth-options.ts

@@ -193,7 +193,15 @@ export const NEXT_AUTH_OPTIONS: AuthOptions = {
       idToken: true,
       allowDangerousEmailAccountLinking: true,
 
-      profile(profile) {
+      profile(profile, tokens) {
+        if (tokens && 'refresh_expires_in' in tokens) {
+          delete tokens.refresh_expires_in;
+        }
+
+        if (tokens && 'not-before-policy' in tokens) {
+          delete tokens['not-before-policy'];
+        }
+
         return {
           id: profile.sub,
           email: profile.email || profile.preferred_username,

packages/ui/components/field/field.tsx

@@ -31,7 +31,8 @@ const getCardClassNames = (
   checkBoxOrRadio: boolean,
   cardClassName?: string,
 ) => {
-  const baseClasses = 'field-card-container relative z-20 h-full w-full transition-all';
+  const baseClasses =
+    'field--FieldRootContainer field-card-container relative z-20 h-full w-full transition-all';
 
   const insertedClasses =
     'bg-primary/20 border-primary ring-primary/20 ring-offset-primary/20 ring-2 ring-offset-2 dark:shadow-none';
@@ -141,6 +142,7 @@ export function FieldRootContainer({ field, children, cardClassName }: FieldCont
       <Card
         id={`field-${field.id}`}
         ref={ref}
+        data-field-type={field.type}
         data-inserted={field.inserted ? 'true' : 'false'}
         className={cardClassNames}
       >