diff --git a/.gitignore b/.gitignore index f31f951a7..9e622a76f 100644 --- a/.gitignore +++ b/.gitignore @@ -56,4 +56,7 @@ logs.json # claude .claude -CLAUDE.md \ No newline at end of file +CLAUDE.md + +# agents +.specs diff --git a/SIGNING.md b/SIGNING.md index 3eb94fbfb..cb719ffb8 100644 --- a/SIGNING.md +++ b/SIGNING.md @@ -10,13 +10,24 @@ For the digital signature of your documents you need a signing certificate in .p `openssl req -new -x509 -key private.key -out certificate.crt -days 365` - This will prompt you to enter some information, such as the Common Name (CN) for the certificate. Make sure you enter the correct information. The -days parameter sets the number of days for which the certificate is valid. + This will prompt you to enter some information, such as the Common Name (CN) for the certificate. Make sure you enter the correct information. The `-days` parameter sets the number of days for which the certificate is valid. -3. Combine the private key and the self-signed certificate to create the p12 certificate. You can run the following command to do this: +3. Combine the private key and the self-signed certificate to create the p12 certificate. You can run the following commands to do this: - `openssl pkcs12 -export -out certificate.p12 -inkey private.key -in certificate.crt` + ```bash + # Set certificate password securely (won't appear in command history) + read -s -p "Enter certificate password: " CERT_PASS + echo + + # Create the p12 certificate using the environment variable + openssl pkcs12 -export -out certificate.p12 -inkey private.key -in certificate.crt \ + -password env:CERT_PASS \ + -keypbe PBE-SHA1-3DES \ + -certpbe PBE-SHA1-3DES \ + -macalg sha1 + ``` -4. You will be prompted to enter a password for the p12 file. Choose a strong password and remember it, as you will need it to use the certificate (**can be empty for dev certificates**) +4. **IMPORTANT**: A certificate password is required to prevent signing failures. Make sure to use a strong password (minimum 4 characters) when prompted. Certificates without passwords will cause "Failed to get private key bags" errors during document signing. 5. Place the certificate `/apps/remix/resources/certificate.p12` (If the path does not exist, it needs to be created) diff --git a/apps/documentation/pages/developers/self-hosting/how-to.mdx b/apps/documentation/pages/developers/self-hosting/how-to.mdx index 08797e801..cdc5a2c22 100644 --- a/apps/documentation/pages/developers/self-hosting/how-to.mdx +++ b/apps/documentation/pages/developers/self-hosting/how-to.mdx @@ -119,16 +119,89 @@ NEXT_PRIVATE_SMTP_USERNAME="" NEXT_PRIVATE_SMTP_PASSWORD="" ``` -### Update the Volume Binding +### Set Up Your Signing Certificate -The `cert.p12` file is required to sign and encrypt documents, so you must provide your key file. Update the volume binding in the `compose.yml` file to point to your key file: + + This is the most common source of issues for self-hosters. Please follow these steps carefully. + -```yaml -volumes: - - /path/to/your/keyfile.p12:/opt/documenso/cert.p12 -``` +The `cert.p12` file is required to sign and encrypt documents. You have three options: -After updating the volume binding, save the `compose.yml` file and run the following command to start the containers: +#### Option A: Generate Certificate Inside Container (Recommended) + +This method avoids file permission issues by creating the certificate directly inside the Docker container: + +1. Start your containers: + + ```bash + docker-compose up -d + ``` + +2. Set certificate password securely and generate certificate inside the container: + + ```bash + # Set certificate password securely (won't appear in command history) + read -s -p "Enter certificate password: " CERT_PASS + echo + + # Generate certificate inside container using environment variable + docker exec -e CERT_PASS="$CERT_PASS" -it documenso-production-documenso-1 bash -c " + openssl req -x509 -nodes -days 365 -newkey rsa:2048 \ + -keyout /tmp/private.key \ + -out /tmp/certificate.crt \ + -subj '/C=US/ST=State/L=City/O=Organization/CN=localhost' && \ + openssl pkcs12 -export -out /app/certs/cert.p12 \ + -inkey /tmp/private.key -in /tmp/certificate.crt \ + -passout env:CERT_PASS && \ + rm /tmp/private.key /tmp/certificate.crt + " + ``` + +3. Add the certificate passphrase to your `.env` file: + + ```bash + NEXT_PRIVATE_SIGNING_PASSPHRASE="your_password_here" + ``` + +4. Restart the container to apply changes: + ```bash + docker-compose restart documenso + ``` + +#### Option B: Use an Existing Certificate File + +If you have an existing `.p12` certificate file: + +1. **Place your certificate file** in an accessible location on your host system +2. **Set proper permissions:** + + ```bash + # Make sure the certificate is readable + chmod 644 /path/to/your/cert.p12 + + # For Docker, ensure proper ownership + chown 1001:1001 /path/to/your/cert.p12 + ``` + +3. **Update the volume binding** in the `compose.yml` file: + + ```yaml + volumes: + - /path/to/your/cert.p12:/opt/documenso/cert.p12:ro + ``` + +4. **Add certificate configuration** to your `.env` file: + ```bash + NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH=/opt/documenso/cert.p12 + NEXT_PRIVATE_SIGNING_PASSPHRASE=your_certificate_password + ``` + + + Your certificate MUST have a password. Certificates without passwords will cause "Failed to get + private key bags" errors. + + +After setting up your certificate, save the `compose.yml` file and run the following command to start the containers: ```bash docker-compose --env-file ./.env up -d diff --git a/apps/documentation/pages/users/documents/sending-documents.mdx b/apps/documentation/pages/users/documents/sending-documents.mdx index 19d012bc3..bf4d7c394 100644 --- a/apps/documentation/pages/users/documents/sending-documents.mdx +++ b/apps/documentation/pages/users/documents/sending-documents.mdx @@ -18,6 +18,11 @@ The guide assumes you have a Documenso account. If you don't, you can create a f Navigate to the [Documenso dashboard](https://app.documenso.com/documents) and click on the "Add a document" button. Select the document you want to upload and wait for the upload to complete. + + The maximum file size for uploaded documents is 150MB in production. In staging, the limit is + 50MB. + + ![Documenso dashboard](/document-signing/documenso-documents-dashboard.webp) After the upload is complete, you will be redirected to the document's page. You can configure the document's settings and add recipients and fields here. diff --git a/apps/documentation/pages/users/organisations/_meta.json b/apps/documentation/pages/users/organisations/_meta.json index b77f9137c..dfc75fc95 100644 --- a/apps/documentation/pages/users/organisations/_meta.json +++ b/apps/documentation/pages/users/organisations/_meta.json @@ -3,5 +3,6 @@ "members": "Members", "groups": "Groups", "teams": "Teams", + "sso": "SSO", "billing": "Billing" -} \ No newline at end of file +} diff --git a/apps/documentation/pages/users/organisations/sso/_meta.json b/apps/documentation/pages/users/organisations/sso/_meta.json new file mode 100644 index 000000000..4ba07c6f6 --- /dev/null +++ b/apps/documentation/pages/users/organisations/sso/_meta.json @@ -0,0 +1,4 @@ +{ + "index": "Configuration", + "microsoft-entra-id": "Microsoft Entra ID" +} diff --git a/apps/documentation/pages/users/organisations/sso/index.mdx b/apps/documentation/pages/users/organisations/sso/index.mdx new file mode 100644 index 000000000..c909b3336 --- /dev/null +++ b/apps/documentation/pages/users/organisations/sso/index.mdx @@ -0,0 +1,149 @@ +--- +title: SSO Portal +description: Learn how to set up a custom SSO login portal for your organisation. +--- + +import Image from 'next/image'; + +import { Callout, Steps } from 'nextra/components'; + +# Organisation SSO Portal + +The SSO Portal provides a dedicated login URL for your organisation that integrates with any OIDC compliant identity provider. This feature provides: + +- **Single Sign-On**: Access Documenso using your own authentication system +- **Automatic onboarding**: New users will be automatically added to your organisation when they sign in through the portal +- **Delegated account management**: Your organisation has full control over the users who sign in through the portal + + + Anyone who signs in through your portal will be added to your organisation as a member. + + +## Getting Started + +To set up the SSO Portal, you need to be an organisation owner, admin, or manager. + + + **Enterprise Only**: This feature is only available to Enterprise customers. + + + + +### Access Organisation SSO Settings + +![Organisation SSO Portal settings](/organisations/organisations-sso-settings.webp) + +### Configure SSO Portal + +See the [Microsoft Entra ID](/users/organisations/sso/microsoft-entra-id) guide to find the values for the following fields. + +#### Issuer URL + +Enter the OpenID discovery endpoint URL for your provider. Here are some common examples: + +- **Google Workspace**: `https://accounts.google.com/.well-known/openid-configuration` +- **Microsoft Entra ID**: `https://login.microsoftonline.com/{tenant-id}/v2.0/.well-known/openid-configuration` +- **Okta**: `https://{your-domain}.okta.com/.well-known/openid-configuration` +- **Auth0**: `https://{your-domain}.auth0.com/.well-known/openid-configuration` + +#### Client Credentials + +Enter the client ID and client secret provided by your identity provider: + +- **Client ID**: The unique identifier for your application +- **Client Secret**: The secret key for authenticating your application + +#### Default Organisation Role + +Select the default Organisation role that new users will receive when they first sign in through the portal. + +#### Allowed Email Domains + +Specify which email domains are allowed to sign in through your SSO portal. Separate domains with spaces: + +``` +your-domain.com another-domain.com +``` + +Leave this field empty to allow all domains. + +### Configure Your Identity Provider + +You'll need to configure your identity provider with the following information: + +- Redirect URI +- Scopes + +These values are found at the top of the page. + +### Save Configuration + +Toggle the "Enable SSO portal" switch to activate the feature for your organisation. + +Click "Update" to save your SSO portal configuration. The portal will be activated once all required fields are completed. + + + +## Testing Your SSO Portal + +Once configured, you can test your SSO portal by: + +1. Navigating to your portal URL found at the top of the organisation SSO portal settings page +2. Sign in with a test account from your configured domain +3. Verifying that the user is properly provisioned with the correct organisation role + +## Best Practices + +### Reduce Friction + +Create a custom subdomain for your organisation's SSO portal. For example, you can create a subdomain like `documenso.your-organisation.com` which redirects to the portal link. + +### Security Considerations + +Please note that anyone who signs in through your portal will be added to your organisation as a member. + +- **Domain Restrictions**: Use allowed domains to prevent unauthorized access +- **Role Assignment**: Carefully consider the default organisation role for new users + +## Troubleshooting + +### Common Issues + +**"Invalid issuer URL"** + +- Verify the issuer URL is correct and accessible +- Ensure the URL follows the OpenID Connect discovery format + +**"Client authentication failed"** + +- Check that your client ID and client secret are correct +- Verify that your application is properly registered with your identity provider + +**"User not provisioned"** + +- Check that the user's email domain is in the allowed domains list +- Verify the default organisation role is set correctly + +**"Redirect URI mismatch"** + +- Ensure the redirect URI in Documenso matches exactly what's configured in your identity provider +- Check for any trailing slashes or protocol mismatches + +### Getting Help + +If you encounter issues with your SSO portal configuration: + +1. Review your identity provider's documentation for OpenID Connect setup +2. Check the Documenso logs for detailed error messages +3. Contact your identity provider's support for provider-specific issues + + + For additional support for SSO Portal configuration, contact our support team at + support@documenso.com. + + +## Identity Provider Guides + +For detailed setup instructions for specific identity providers: + +- [Microsoft Entra ID](/users/organisations/sso/microsoft-entra-id) - Complete guide for Azure AD configuration diff --git a/apps/documentation/pages/users/organisations/sso/microsoft-entra-id.mdx b/apps/documentation/pages/users/organisations/sso/microsoft-entra-id.mdx new file mode 100644 index 000000000..6b3ed6d65 --- /dev/null +++ b/apps/documentation/pages/users/organisations/sso/microsoft-entra-id.mdx @@ -0,0 +1,76 @@ +--- +title: Microsoft Entra ID +description: Learn how to configure Microsoft Entra ID (Azure AD) for your organisation's SSO portal. +--- + +import Image from 'next/image'; + +import { Callout, Steps } from 'nextra/components'; + +# Microsoft Entra ID Configuration + +Microsoft Entra ID (formerly Azure Active Directory) is a popular identity provider for enterprise SSO. This guide will walk you through creating an app registration and configuring it for use with your Documenso SSO portal. + +## Prerequisites + +- Access to Microsoft Entra ID (Azure AD) admin center +- Access to your Documenso organisation as an administrator or manager + +Each user in your Azure AD will need an email associated with it. + +## Creating an App Registration + + + +### Access Azure Portal + +1. Navigate to the Azure Portal +2. Sign in with your Microsoft Entra ID administrator account +3. Search for "Azure Active Directory" or "Microsoft Entra ID" in the search bar +4. Click on "Microsoft Entra ID" from the results + +### Create App Registration + +1. In the left sidebar, click on "App registrations" +2. Click the "New registration" button + +### Configure App Registration + +Fill in the registration form with the following details: + +- **Name**: Your preferred name (e.g. `Documenso SSO Portal`) +- **Supported account types**: Choose based on your needs +- **Redirect URI (Web)**: Found in the Documenso SSO portal settings page + +Click "Register" to create the app registration. + +### Get Client ID + +After registration, you'll be taken to the app's overview page. The **Application (client) ID** is displayed prominently - this is your Client ID for Documenso. + +### Create Client Secret + +1. In the left sidebar, click on "Certificates & secrets" +2. Click "New client secret" +3. Add a description (e.g., "Documenso SSO Secret") +4. Choose an expiration period (recommended 12-24 months) +5. Click "Add" + +Make sure you copy the "Secret value", not the "Secret ID", you won't be able to access it again after you leave the page. + + + +## Getting Your OpenID Configuration URL + +1. In the Azure portal, go to "Microsoft Entra ID" +2. Click on "Overview" in the left sidebar +3. Click the "Endpoints" in the horizontal tab +4. Copy the "OpenID Connect metadata document" value + +## Configure Documenso SSO Portal + +Now you have all the information needed to configure your Documenso SSO portal: + +- **Issuer URL**: The "OpenID Connect metadata document" value from the previous step +- **Client ID**: The Application (client) ID from your app registration +- **Client Secret**: The secret value you copied during creation diff --git a/apps/documentation/public/organisations/organisations-sso-settings.webp b/apps/documentation/public/organisations/organisations-sso-settings.webp new file mode 100644 index 000000000..b6d46f77e Binary files /dev/null and b/apps/documentation/public/organisations/organisations-sso-settings.webp differ diff --git a/apps/remix/app/components/dialogs/document-resend-dialog.tsx b/apps/remix/app/components/dialogs/document-resend-dialog.tsx index e1a97ecc1..d93f29e84 100644 --- a/apps/remix/app/components/dialogs/document-resend-dialog.tsx +++ b/apps/remix/app/components/dialogs/document-resend-dialog.tsx @@ -6,7 +6,7 @@ import { useLingui } from '@lingui/react'; import { Trans } from '@lingui/react/macro'; import { type Recipient, SigningStatus } from '@prisma/client'; import { History } from 'lucide-react'; -import { useForm } from 'react-hook-form'; +import { useForm, useWatch } from 'react-hook-form'; import * as z from 'zod'; import { useSession } from '@documenso/lib/client-only/providers/session'; @@ -85,6 +85,11 @@ export const DocumentResendDialog = ({ document, recipients }: DocumentResendDia formState: { isSubmitting }, } = form; + const selectedRecipients = useWatch({ + control: form.control, + name: 'recipients', + }); + const onFormSubmit = async ({ recipients }: TResendDocumentFormSchema) => { try { await resendDocument({ documentId: document.id, recipients }); @@ -151,7 +156,7 @@ export const DocumentResendDialog = ({ document, recipients }: DocumentResendDia @@ -182,7 +187,13 @@ export const DocumentResendDialog = ({ document, recipients }: DocumentResendDia - diff --git a/apps/remix/app/components/dialogs/template-use-dialog.tsx b/apps/remix/app/components/dialogs/template-use-dialog.tsx index 3d4e7ba61..f5822b2f9 100644 --- a/apps/remix/app/components/dialogs/template-use-dialog.tsx +++ b/apps/remix/app/components/dialogs/template-use-dialog.tsx @@ -15,7 +15,6 @@ import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app'; import { TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX, TEMPLATE_RECIPIENT_NAME_PLACEHOLDER_REGEX, - isTemplateRecipientEmailPlaceholder, } from '@documenso/lib/constants/template'; import { AppError } from '@documenso/lib/errors/app-error'; import { putPdfFile } from '@documenso/lib/universal/upload/put-file'; @@ -46,50 +45,22 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitive import type { Toast } from '@documenso/ui/primitives/use-toast'; import { useToast } from '@documenso/ui/primitives/use-toast'; -const ZAddRecipientsForNewDocumentSchema = z - .object({ - distributeDocument: z.boolean(), - useCustomDocument: z.boolean().default(false), - customDocumentData: z - .any() - .refine((data) => data instanceof File || data === undefined) - .optional(), - recipients: z.array( - z.object({ - id: z.number(), - email: z.string().email(), - name: z.string(), - signingOrder: z.number().optional(), - }), - ), - }) - // Display exactly which rows are duplicates. - .superRefine((items, ctx) => { - const uniqueEmails = new Map(); - - for (const [index, recipients] of items.recipients.entries()) { - const email = recipients.email.toLowerCase(); - - const firstFoundIndex = uniqueEmails.get(email); - - if (firstFoundIndex === undefined) { - uniqueEmails.set(email, index); - continue; - } - - ctx.addIssue({ - code: z.ZodIssueCode.custom, - message: 'Emails must be unique', - path: ['recipients', index, 'email'], - }); - - ctx.addIssue({ - code: z.ZodIssueCode.custom, - message: 'Emails must be unique', - path: ['recipients', firstFoundIndex, 'email'], - }); - } - }); +const ZAddRecipientsForNewDocumentSchema = z.object({ + distributeDocument: z.boolean(), + useCustomDocument: z.boolean().default(false), + customDocumentData: z + .any() + .refine((data) => data instanceof File || data === undefined) + .optional(), + recipients: z.array( + z.object({ + id: z.number(), + email: z.string().email(), + name: z.string(), + signingOrder: z.number().optional(), + }), + ), +}); type TAddRecipientsForNewDocumentSchema = z.infer; @@ -278,14 +249,7 @@ export function TemplateUseDialog({ )} - + @@ -306,6 +270,7 @@ export function TemplateUseDialog({ diff --git a/apps/remix/app/components/forms/document-preferences-form.tsx b/apps/remix/app/components/forms/document-preferences-form.tsx index eb3c64e06..38d01e252 100644 --- a/apps/remix/app/components/forms/document-preferences-form.tsx +++ b/apps/remix/app/components/forms/document-preferences-form.tsx @@ -3,10 +3,11 @@ 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 } from '@prisma/client'; +import { DocumentVisibility, OrganisationType } 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'; @@ -86,8 +87,10 @@ export const DocumentPreferencesForm = ({ }: DocumentPreferencesFormProps) => { const { t } = useLingui(); const { user, organisations } = useSession(); + const currentOrganisation = useCurrentOrganisation(); const isPersonalLayoutMode = isPersonalLayout(organisations); + const isPersonalOrganisation = currentOrganisation.type === OrganisationType.PERSONAL; const placeholderEmail = user.email ?? 'user@example.com'; @@ -331,7 +334,7 @@ export const DocumentPreferencesForm = ({ )} /> - {!isPersonalLayoutMode && ( + {!isPersonalLayoutMode && !isPersonalOrganisation && ( handleSubmit()} documentTitle={template.title} fields={localFields} fieldsValidated={fieldsValidated} - role={directRecipient.role} + recipient={directRecipient} /> diff --git a/apps/remix/app/components/general/document-signing/access-auth-2fa-form.tsx b/apps/remix/app/components/general/document-signing/access-auth-2fa-form.tsx new file mode 100644 index 000000000..57891e877 --- /dev/null +++ b/apps/remix/app/components/general/document-signing/access-auth-2fa-form.tsx @@ -0,0 +1,312 @@ +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 { ArrowLeftIcon, KeyIcon, MailIcon } from 'lucide-react'; +import { DateTime } from 'luxon'; +import { useForm } from 'react-hook-form'; +import { z } from 'zod'; + +import type { TRecipientAccessAuth } from '@documenso/lib/types/document-auth'; +import { trpc } from '@documenso/trpc/react'; +import { cn } from '@documenso/ui/lib/utils'; +import { Alert } from '@documenso/ui/primitives/alert'; +import { Button } from '@documenso/ui/primitives/button'; +import { Form, FormField, FormItem } 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 { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider'; + +type FormStep = 'method-selection' | 'code-input'; +type TwoFactorMethod = 'email' | 'authenticator'; + +const ZAccessAuth2FAFormSchema = z.object({ + token: z.string().length(6, { message: 'Token must be 6 characters long' }), +}); + +type TAccessAuth2FAFormSchema = z.infer; + +export type AccessAuth2FAFormProps = { + onSubmit: (accessAuthOptions: TRecipientAccessAuth) => void; + token: string; + error?: string | null; +}; + +export const AccessAuth2FAForm = ({ onSubmit, token, error }: AccessAuth2FAFormProps) => { + const [step, setStep] = useState('method-selection'); + const [selectedMethod, setSelectedMethod] = useState(null); + + const [expiresAt, setExpiresAt] = useState(null); + const [millisecondsRemaining, setMillisecondsRemaining] = useState(null); + + const { _ } = useLingui(); + const { toast } = useToast(); + + const { user } = useRequiredDocumentSigningAuthContext(); + + const { mutateAsync: request2FAEmail, isPending: isRequesting2FAEmail } = + trpc.document.accessAuth.request2FAEmail.useMutation(); + + const form = useForm({ + resolver: zodResolver(ZAccessAuth2FAFormSchema), + defaultValues: { + token: '', + }, + }); + + const hasAuthenticatorEnabled = user?.twoFactorEnabled === true; + + const onMethodSelect = async (method: TwoFactorMethod) => { + setSelectedMethod(method); + + if (method === 'email') { + try { + const result = await request2FAEmail({ + token: token, + }); + + setExpiresAt(result.expiresAt); + setMillisecondsRemaining(result.expiresAt.valueOf() - Date.now()); + + setStep('code-input'); + } catch (error) { + toast({ + title: _(msg`An error occurred`), + description: _( + msg`We encountered an unknown error while attempting to request the two-factor authentication code. Please try again later.`, + ), + variant: 'destructive', + }); + + return; + } + } + + setStep('code-input'); + }; + + const onFormSubmit = (data: TAccessAuth2FAFormSchema) => { + if (!selectedMethod) { + return; + } + + // Prepare the auth options for the completion attempt + const accessAuthOptions: TRecipientAccessAuth = { + type: 'TWO_FACTOR_AUTH', + token: data.token, // Just the user's code - backend will validate using method type + method: selectedMethod, + }; + + onSubmit(accessAuthOptions); + }; + + const onGoBack = () => { + setStep('method-selection'); + setSelectedMethod(null); + setExpiresAt(null); + setMillisecondsRemaining(null); + }; + + const onResendEmail = async () => { + if (selectedMethod !== 'email') { + return; + } + + try { + const result = await request2FAEmail({ + token: token, + }); + + setExpiresAt(result.expiresAt); + setMillisecondsRemaining(result.expiresAt.valueOf() - Date.now()); + } catch (error) { + toast({ + title: _(msg`An error occurred`), + description: _( + msg`We encountered an unknown error while attempting to request the two-factor authentication code. Please try again later.`, + ), + variant: 'destructive', + }); + } + }; + + useEffect(() => { + const interval = setInterval(() => { + if (expiresAt) { + setMillisecondsRemaining(expiresAt.valueOf() - Date.now()); + } + }, 1000); + + return () => clearInterval(interval); + }, [expiresAt]); + + return ( +
+ {step === 'method-selection' && ( +
+
+

+ Choose verification method +

+

+ Please select how you'd like to receive your verification code. +

+
+ + {error && ( + + {error} + + )} + +
+ + + {hasAuthenticatorEnabled && ( + + )} +
+
+ )} + + {step === 'code-input' && ( +
+
+ + +

+ Enter verification code +

+
+ +
+ {selectedMethod === 'email' ? ( + + We've sent a 6-digit verification code to your email. Please enter it below to + complete the document. + + ) : ( + + Please open your authenticator app and enter the 6-digit code for this document. + + )} +
+ +
+ +
+ ( + + + + + + + + + + + + + {expiresAt && millisecondsRemaining !== null && ( +
+ + Expires in{' '} + {DateTime.fromMillis(Math.max(millisecondsRemaining, 0)).toFormat( + 'mm:ss', + )} + +
+ )} + + )} + /> + +
+ + + {selectedMethod === 'email' && ( + + )} +
+
+
+ +
+ )} +
+ ); +}; diff --git a/apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx b/apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx index 65503b965..7f0f06e5a 100644 --- a/apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx +++ b/apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx @@ -2,12 +2,17 @@ import { useMemo, useState } from 'react'; import { zodResolver } from '@hookform/resolvers/zod'; import { Trans } from '@lingui/react/macro'; -import type { Field } from '@prisma/client'; +import type { Field, Recipient } from '@prisma/client'; import { RecipientRole } from '@prisma/client'; import { useForm } from 'react-hook-form'; import { match } from 'ts-pattern'; import { z } from 'zod'; +import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error'; +import { + type TRecipientAccessAuth, + ZDocumentAccessAuthSchema, +} from '@documenso/lib/types/document-auth'; import { fieldsContainUnsignedRequiredField } from '@documenso/lib/utils/advanced-fields-helpers'; import { Button } from '@documenso/ui/primitives/button'; import { @@ -27,15 +32,21 @@ import { } from '@documenso/ui/primitives/form/form'; import { Input } from '@documenso/ui/primitives/input'; +import { AccessAuth2FAForm } from '~/components/general/document-signing/access-auth-2fa-form'; import { DocumentSigningDisclosure } from '~/components/general/document-signing/document-signing-disclosure'; +import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider'; + export type DocumentSigningCompleteDialogProps = { isSubmitting: boolean; documentTitle: string; fields: Field[]; fieldsValidated: () => void | Promise; - onSignatureComplete: (nextSigner?: { name: string; email: string }) => void | Promise; - role: RecipientRole; + onSignatureComplete: ( + nextSigner?: { name: string; email: string }, + accessAuthOptions?: TRecipientAccessAuth, + ) => void | Promise; + recipient: Pick; disabled?: boolean; allowDictateNextSigner?: boolean; defaultNextSigner?: { @@ -47,6 +58,7 @@ export type DocumentSigningCompleteDialogProps = { const ZNextSignerFormSchema = z.object({ name: z.string().min(1, 'Name is required'), email: z.string().email('Invalid email address'), + accessAuthOptions: ZDocumentAccessAuthSchema.optional(), }); type TNextSignerFormSchema = z.infer; @@ -57,7 +69,7 @@ export const DocumentSigningCompleteDialog = ({ fields, fieldsValidated, onSignatureComplete, - role, + recipient, disabled = false, allowDictateNextSigner = false, defaultNextSigner, @@ -65,6 +77,11 @@ export const DocumentSigningCompleteDialog = ({ const [showDialog, setShowDialog] = useState(false); const [isEditingNextSigner, setIsEditingNextSigner] = useState(false); + const [showTwoFactorForm, setShowTwoFactorForm] = useState(false); + const [twoFactorValidationError, setTwoFactorValidationError] = useState(null); + + const { derivedRecipientAccessAuth, user } = useRequiredDocumentSigningAuthContext(); + const form = useForm({ resolver: allowDictateNextSigner ? zodResolver(ZNextSignerFormSchema) : undefined, defaultValues: { @@ -75,6 +92,11 @@ export const DocumentSigningCompleteDialog = ({ const isComplete = useMemo(() => !fieldsContainUnsignedRequiredField(fields), [fields]); + const completionRequires2FA = useMemo( + () => derivedRecipientAccessAuth.includes('TWO_FACTOR_AUTH'), + [derivedRecipientAccessAuth], + ); + const handleOpenChange = (open: boolean) => { if (form.formState.isSubmitting || !isComplete) { return; @@ -93,16 +115,43 @@ export const DocumentSigningCompleteDialog = ({ const onFormSubmit = async (data: TNextSignerFormSchema) => { try { - if (allowDictateNextSigner && data.name && data.email) { - await onSignatureComplete({ name: data.name, email: data.email }); - } else { - await onSignatureComplete(); + // Check if 2FA is required + if (completionRequires2FA && !data.accessAuthOptions) { + setShowTwoFactorForm(true); + return; } + + const nextSigner = + allowDictateNextSigner && data.name && data.email + ? { name: data.name, email: data.email } + : undefined; + + await onSignatureComplete(nextSigner, data.accessAuthOptions); } catch (error) { - console.error('Error completing signature:', error); + const err = AppError.parseError(error); + + if (AppErrorCode.TWO_FACTOR_AUTH_FAILED === err.code) { + // This was a 2FA validation failure - show the 2FA dialog again with error + form.setValue('accessAuthOptions', undefined); + + setTwoFactorValidationError('Invalid verification code. Please try again.'); + setShowTwoFactorForm(true); + + return; + } } }; + const onTwoFactorFormSubmit = (validatedAuthOptions: TRecipientAccessAuth) => { + form.setValue('accessAuthOptions', validatedAuthOptions); + + setShowTwoFactorForm(false); + setTwoFactorValidationError(null); + + // Now trigger the form submission with auth options + void form.handleSubmit(onFormSubmit)(); + }; + const isNextSignerValid = !allowDictateNextSigner || (form.watch('name') && form.watch('email')); return ( @@ -116,7 +165,7 @@ export const DocumentSigningCompleteDialog = ({ loading={isSubmitting} disabled={disabled} > - {match({ isComplete, role }) + {match({ isComplete, role: recipient.role }) .with({ isComplete: false }, () => Next field) .with({ isComplete: true, role: RecipientRole.APPROVER }, () => Approve) .with({ isComplete: true, role: RecipientRole.VIEWER }, () => ( @@ -128,184 +177,194 @@ export const DocumentSigningCompleteDialog = ({ -
- -
- -
- {match(role) - .with(RecipientRole.VIEWER, () => Complete Viewing) - .with(RecipientRole.SIGNER, () => Complete Signing) - .with(RecipientRole.APPROVER, () => Complete Approval) - .with(RecipientRole.CC, () => Complete Viewing) - .with(RecipientRole.ASSISTANT, () => Complete Assisting) - .exhaustive()} -
- - -
- {match(role) - .with(RecipientRole.VIEWER, () => ( - - - - You are about to complete viewing " - - {documentTitle} - - ". - -
Are you sure? - - - )) - .with(RecipientRole.SIGNER, () => ( - - - - You are about to complete signing " - - {documentTitle} - - ". - -
Are you sure? - - - )) - .with(RecipientRole.APPROVER, () => ( - - - - You are about to complete approving{' '} - - "{documentTitle}" - - . - -
Are you sure? - - - )) - .otherwise(() => ( - - - - You are about to complete viewing " - - {documentTitle} - - ". - -
Are you sure? - - - ))} -
- - {allowDictateNextSigner && ( -
- {!isEditingNextSigner && ( -
-

- The next recipient to sign this document will be{' '} - {form.watch('name')} ( - {form.watch('email')}). -

- - -
- )} - - {isEditingNextSigner && ( -
- ( - - - Name - - - - - - - - )} - /> - - ( - - - Email - - - - - - - )} - /> -
- )} -
- )} - - - - -
- - - +
+ + +
+ {match(recipient.role) + .with(RecipientRole.VIEWER, () => ( + + + + You are about to complete viewing " + + {documentTitle} + + ". + +
Are you sure? + + + )) + .with(RecipientRole.SIGNER, () => ( + + + + You are about to complete signing " + + {documentTitle} + + ". + +
Are you sure? + + + )) + .with(RecipientRole.APPROVER, () => ( + + + + You are about to complete approving{' '} + + "{documentTitle}" + + . + +
Are you sure? + + + )) + .otherwise(() => ( + + + + You are about to complete viewing " + + {documentTitle} + + ". + +
Are you sure? + + + ))}
- -
-
- + + {allowDictateNextSigner && ( +
+ {!isEditingNextSigner && ( +
+

+ The next recipient to sign this document will be{' '} + {form.watch('name')} ( + {form.watch('email')}). +

+ + +
+ )} + + {isEditingNextSigner && ( +
+ ( + + + Name + + + + + + + + )} + /> + + ( + + + Email + + + + + + + )} + /> +
+ )} +
+ )} + + + + +
+ + + +
+ + + + + )} + + {showTwoFactorForm && ( + + )} ); diff --git a/apps/remix/app/components/general/document-signing/document-signing-form.tsx b/apps/remix/app/components/general/document-signing/document-signing-form.tsx index b2b58aa3b..dcc947645 100644 --- a/apps/remix/app/components/general/document-signing/document-signing-form.tsx +++ b/apps/remix/app/components/general/document-signing/document-signing-form.tsx @@ -8,7 +8,7 @@ import { Controller, useForm } from 'react-hook-form'; import { useNavigate } from 'react-router'; import type { DocumentAndSender } from '@documenso/lib/server-only/document/get-document-by-token'; -import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth'; +import type { TRecipientAccessAuth } from '@documenso/lib/types/document-auth'; import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers'; import { sortFieldsByPosition } from '@documenso/lib/utils/fields'; import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields'; @@ -34,10 +34,10 @@ export type DocumentSigningFormProps = { isRecipientsTurn: boolean; allRecipients?: RecipientWithFields[]; setSelectedSignerId?: (id: number | null) => void; - completeDocument: ( - authOptions?: TRecipientActionAuth, - nextSigner?: { email: string; name: string }, - ) => Promise; + completeDocument: (options: { + accessAuthOptions?: TRecipientAccessAuth; + nextSigner?: { email: string; name: string }; + }) => Promise; isSubmitting: boolean; fieldsValidated: () => void; nextRecipient?: RecipientWithFields; @@ -105,7 +105,7 @@ export const DocumentSigningForm = ({ setIsAssistantSubmitting(true); try { - await completeDocument(undefined, nextSigner); + await completeDocument({ nextSigner }); } catch (err) { toast({ title: 'Error', @@ -149,10 +149,10 @@ export const DocumentSigningForm = ({ documentTitle={document.title} fields={fields} fieldsValidated={localFieldsValidated} - onSignatureComplete={async (nextSigner) => { - await completeDocument(undefined, nextSigner); - }} - role={recipient.role} + onSignatureComplete={async (nextSigner, accessAuthOptions) => + completeDocument({ nextSigner, accessAuthOptions }) + } + recipient={recipient} allowDictateNextSigner={document.documentMeta?.allowDictateNextSigner} defaultNextSigner={ nextRecipient @@ -309,10 +309,13 @@ export const DocumentSigningForm = ({ fields={fields} fieldsValidated={localFieldsValidated} disabled={!isRecipientsTurn} - onSignatureComplete={async (nextSigner) => { - await completeDocument(undefined, nextSigner); - }} - role={recipient.role} + onSignatureComplete={async (nextSigner, accessAuthOptions) => + completeDocument({ + accessAuthOptions, + nextSigner, + }) + } + recipient={recipient} allowDictateNextSigner={ nextRecipient && document.documentMeta?.allowDictateNextSigner } diff --git a/apps/remix/app/components/general/document-signing/document-signing-page-view.tsx b/apps/remix/app/components/general/document-signing/document-signing-page-view.tsx index 626a5195f..6c06cdf44 100644 --- a/apps/remix/app/components/general/document-signing/document-signing-page-view.tsx +++ b/apps/remix/app/components/general/document-signing/document-signing-page-view.tsx @@ -12,7 +12,7 @@ import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-form import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer'; import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones'; import type { DocumentAndSender } from '@documenso/lib/server-only/document/get-document-by-token'; -import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth'; +import type { TRecipientAccessAuth } from '@documenso/lib/types/document-auth'; import { ZCheckboxFieldMeta, ZDropdownFieldMeta, @@ -46,6 +46,7 @@ import { DocumentSigningRejectDialog } from '~/components/general/document-signi import { DocumentSigningSignatureField } from '~/components/general/document-signing/document-signing-signature-field'; import { DocumentSigningTextField } from '~/components/general/document-signing/document-signing-text-field'; +import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider'; import { DocumentSigningCompleteDialog } from './document-signing-complete-dialog'; import { DocumentSigningRecipientProvider } from './document-signing-recipient-provider'; @@ -70,6 +71,12 @@ export const DocumentSigningPageView = ({ }: DocumentSigningPageViewProps) => { const { documentData, documentMeta } = document; + const { derivedRecipientAccessAuth, user: authUser } = useRequiredDocumentSigningAuthContext(); + + const hasAuthenticator = authUser?.twoFactorEnabled + ? authUser.twoFactorEnabled && authUser.email === recipient.email + : false; + const navigate = useNavigate(); const analytics = useAnalytics(); @@ -94,14 +101,16 @@ export const DocumentSigningPageView = ({ validateFieldsInserted(fieldsRequiringValidation); }; - const completeDocument = async ( - authOptions?: TRecipientActionAuth, - nextSigner?: { email: string; name: string }, - ) => { + const completeDocument = async (options: { + accessAuthOptions?: TRecipientAccessAuth; + nextSigner?: { email: string; name: string }; + }) => { + const { accessAuthOptions, nextSigner } = options; + const payload = { token: recipient.token, documentId: document.id, - authOptions, + accessAuthOptions, ...(nextSigner?.email && nextSigner?.name ? { nextSigner } : {}), }; @@ -160,6 +169,14 @@ export const DocumentSigningPageView = ({ return (
+ {document.team.teamGlobalSettings.brandingEnabled && + document.team.teamGlobalSettings.brandingLogo && ( + {`${document.team.name}'s + )}

{ - await completeDocument(undefined, nextSigner); - }} - role={recipient.role} + onSignatureComplete={async (nextSigner) => + completeDocument({ nextSigner }) + } + recipient={recipient} allowDictateNextSigner={ nextRecipient && documentMeta?.allowDictateNextSigner } diff --git a/apps/remix/app/components/general/document/document-drop-zone-wrapper.tsx b/apps/remix/app/components/general/document/document-drop-zone-wrapper.tsx index e5fe18636..84b1dfc4a 100644 --- a/apps/remix/app/components/general/document/document-drop-zone-wrapper.tsx +++ b/apps/remix/app/components/general/document/document-drop-zone-wrapper.tsx @@ -4,7 +4,7 @@ import { msg } from '@lingui/core/macro'; import { useLingui } from '@lingui/react'; import { Trans } from '@lingui/react/macro'; import { Loader } from 'lucide-react'; -import { useDropzone } from 'react-dropzone'; +import { ErrorCode, type FileRejection, useDropzone } from 'react-dropzone'; import { Link, useNavigate, useParams } from 'react-router'; import { match } from 'ts-pattern'; @@ -108,15 +108,51 @@ export const DocumentDropZoneWrapper = ({ children, className }: DocumentDropZon } }; - const onFileDropRejected = () => { + const onFileDropRejected = (fileRejections: FileRejection[]) => { + if (!fileRejections.length) { + return; + } + + // Since users can only upload only one file (no multi-upload), we only handle the first file rejection + const { file, errors } = fileRejections[0]; + + if (!errors.length) { + return; + } + + const errorNodes = errors.map((error, index) => ( + + {match(error.code) + .with(ErrorCode.FileTooLarge, () => ( + File is larger than {APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB + )) + .with(ErrorCode.FileInvalidType, () => Only PDF files are allowed) + .with(ErrorCode.FileTooSmall, () => File is too small) + .with(ErrorCode.TooManyFiles, () => ( + Only one file can be uploaded at a time + )) + .otherwise(() => ( + Unknown error + ))} + + )); + + const description = ( + <> + + {file.name} couldn't be uploaded: + + {errorNodes} + + ); + toast({ - title: _(msg`Your document failed to upload.`), - description: _(msg`File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`), + title: _(msg`Upload failed`), + description, duration: 5000, variant: 'destructive', }); }; - const { getRootProps, getInputProps, isDragActive } = useDropzone({ accept: { 'application/pdf': ['.pdf'], @@ -129,8 +165,8 @@ export const DocumentDropZoneWrapper = ({ children, className }: DocumentDropZon void onFileDrop(acceptedFile); } }, - onDropRejected: () => { - void onFileDropRejected(); + onDropRejected: (fileRejections) => { + onFileDropRejected(fileRejections); }, noClick: true, noDragEventsBubbling: true, diff --git a/apps/remix/app/components/general/document/document-edit-form.tsx b/apps/remix/app/components/general/document/document-edit-form.tsx index 0eb192b40..84f1d2af6 100644 --- a/apps/remix/app/components/general/document/document-edit-form.tsx +++ b/apps/remix/app/components/general/document/document-edit-form.tsx @@ -248,7 +248,27 @@ export const DocumentEditForm = ({ const onAddSignersFormAutoSave = async (data: TAddSignersFormSchema) => { try { - await saveSignersData(data); + // For autosave, we need to return the recipients response for form state sync + const [, recipientsResponse] = await Promise.all([ + updateDocument({ + documentId: document.id, + meta: { + allowDictateNextSigner: data.allowDictateNextSigner, + signingOrder: data.signingOrder, + }, + }), + + setRecipients({ + documentId: document.id, + recipients: data.signers.map((signer) => ({ + ...signer, + // Explicitly set to null to indicate we want to remove auth if required. + actionAuth: signer.actionAuth ?? [], + })), + }), + ]); + + return recipientsResponse; } catch (err) { console.error(err); @@ -257,6 +277,8 @@ export const DocumentEditForm = ({ description: _(msg`An error occurred while adding signers.`), variant: 'destructive', }); + + throw err; // Re-throw so the autosave hook can handle the error } }; diff --git a/apps/remix/app/components/general/folder/folder-card.tsx b/apps/remix/app/components/general/folder/folder-card.tsx index a8d2d3bac..db88ebb7f 100644 --- a/apps/remix/app/components/general/folder/folder-card.tsx +++ b/apps/remix/app/components/general/folder/folder-card.tsx @@ -54,7 +54,7 @@ export const FolderCard = ({ }; return ( - +
diff --git a/apps/remix/app/components/general/template/template-drop-zone-wrapper.tsx b/apps/remix/app/components/general/template/template-drop-zone-wrapper.tsx index 0d9c3fc9e..dbca5a8ea 100644 --- a/apps/remix/app/components/general/template/template-drop-zone-wrapper.tsx +++ b/apps/remix/app/components/general/template/template-drop-zone-wrapper.tsx @@ -4,8 +4,9 @@ import { msg } from '@lingui/core/macro'; import { useLingui } from '@lingui/react'; import { Trans } from '@lingui/react/macro'; import { Loader } from 'lucide-react'; -import { useDropzone } from 'react-dropzone'; +import { ErrorCode, type FileRejection, useDropzone } from 'react-dropzone'; import { useNavigate, useParams } from 'react-router'; +import { match } from 'ts-pattern'; import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app'; import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions'; @@ -67,10 +68,47 @@ export const TemplateDropZoneWrapper = ({ children, className }: TemplateDropZon } }; - const onFileDropRejected = () => { + const onFileDropRejected = (fileRejections: FileRejection[]) => { + if (!fileRejections.length) { + return; + } + + // Since users can only upload only one file (no multi-upload), we only handle the first file rejection + const { file, errors } = fileRejections[0]; + + if (!errors.length) { + return; + } + + const errorNodes = errors.map((error, index) => ( + + {match(error.code) + .with(ErrorCode.FileTooLarge, () => ( + File is larger than {APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB + )) + .with(ErrorCode.FileInvalidType, () => Only PDF files are allowed) + .with(ErrorCode.FileTooSmall, () => File is too small) + .with(ErrorCode.TooManyFiles, () => ( + Only one file can be uploaded at a time + )) + .otherwise(() => ( + Unknown error + ))} + + )); + + const description = ( + <> + + {file.name} couldn't be uploaded: + + {errorNodes} + + ); + toast({ - title: _(msg`Your template failed to upload.`), - description: _(msg`File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`), + title: _(msg`Upload failed`), + description, duration: 5000, variant: 'destructive', }); @@ -88,8 +126,8 @@ export const TemplateDropZoneWrapper = ({ children, className }: TemplateDropZon void onFileDrop(acceptedFile); } }, - onDropRejected: () => { - void onFileDropRejected(); + onDropRejected: (fileRejections) => { + onFileDropRejected(fileRejections); }, noClick: true, noDragEventsBubbling: true, diff --git a/apps/remix/app/components/general/template/template-edit-form.tsx b/apps/remix/app/components/general/template/template-edit-form.tsx index 17d7a45a1..41002b54e 100644 --- a/apps/remix/app/components/general/template/template-edit-form.tsx +++ b/apps/remix/app/components/general/template/template-edit-form.tsx @@ -182,7 +182,7 @@ export const TemplateEditForm = ({ }; const saveTemplatePlaceholderData = async (data: TAddTemplatePlacholderRecipientsFormSchema) => { - return Promise.all([ + const [, recipients] = await Promise.all([ updateTemplateSettings({ templateId: template.id, meta: { @@ -196,6 +196,8 @@ export const TemplateEditForm = ({ recipients: data.signers, }), ]); + + return recipients; }; const onAddTemplatePlaceholderFormSubmit = async ( @@ -218,7 +220,7 @@ export const TemplateEditForm = ({ data: TAddTemplatePlacholderRecipientsFormSchema, ) => { try { - await saveTemplatePlaceholderData(data); + return await saveTemplatePlaceholderData(data); } catch (err) { console.error(err); @@ -227,6 +229,8 @@ export const TemplateEditForm = ({ description: _(msg`An error occurred while auto-saving the template placeholders.`), variant: 'destructive', }); + + throw err; } }; diff --git a/apps/remix/app/routes/_authenticated+/admin+/organisations.$id.tsx b/apps/remix/app/routes/_authenticated+/admin+/organisations.$id.tsx index 0a93d2d66..5aa188895 100644 --- a/apps/remix/app/routes/_authenticated+/admin+/organisations.$id.tsx +++ b/apps/remix/app/routes/_authenticated+/admin+/organisations.$id.tsx @@ -71,6 +71,23 @@ export default function OrganisationGroupSettingsPage({ params }: Route.Componen }, }); + const { mutateAsync: promoteToOwner, isPending: isPromotingToOwner } = + trpc.admin.organisationMember.promoteToOwner.useMutation({ + onSuccess: () => { + toast({ + title: t`Success`, + description: t`Member promoted to owner successfully`, + }); + }, + onError: () => { + toast({ + title: t`Error`, + description: t`We couldn't promote the member to owner. Please try again.`, + variant: 'destructive', + }); + }, + }); + const teamsColumns = useMemo(() => { return [ { @@ -101,6 +118,26 @@ export default function OrganisationGroupSettingsPage({ params }: Route.Componen {row.original.user.email} ), }, + { + header: t`Actions`, + cell: ({ row }) => ( +
+ +
+ ), + }, ] satisfies DataTableColumnDef[]; }, [organisation]); diff --git a/apps/remix/app/routes/_authenticated+/o.$orgUrl.settings._layout.tsx b/apps/remix/app/routes/_authenticated+/o.$orgUrl.settings._layout.tsx index 87326a5fa..1ef247147 100644 --- a/apps/remix/app/routes/_authenticated+/o.$orgUrl.settings._layout.tsx +++ b/apps/remix/app/routes/_authenticated+/o.$orgUrl.settings._layout.tsx @@ -6,6 +6,7 @@ import { GroupIcon, MailboxIcon, Settings2Icon, + ShieldCheckIcon, Users2Icon, } from 'lucide-react'; import { FaUsers } from 'react-icons/fa6'; @@ -77,6 +78,11 @@ export default function SettingsLayout() { label: t`Groups`, icon: GroupIcon, }, + { + path: `/o/${organisation.url}/settings/sso`, + label: t`SSO`, + icon: ShieldCheckIcon, + }, { path: `/o/${organisation.url}/settings/billing`, label: t`Billing`, @@ -94,6 +100,13 @@ export default function SettingsLayout() { return false; } + if ( + (!isBillingEnabled || !organisation.organisationClaim.flags.authenticationPortal) && + route.path.includes('/sso') + ) { + return false; + } + return true; }); diff --git a/apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.sso.tsx b/apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.sso.tsx new file mode 100644 index 000000000..db6b7c38d --- /dev/null +++ b/apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.sso.tsx @@ -0,0 +1,432 @@ +import { zodResolver } from '@hookform/resolvers/zod'; +import { msg } from '@lingui/core/macro'; +import { Trans, useLingui } from '@lingui/react/macro'; +import { OrganisationMemberRole } from '@prisma/client'; +import { useForm } from 'react-hook-form'; +import { z } from 'zod'; + +import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation'; +import { ORGANISATION_MEMBER_ROLE_HIERARCHY } from '@documenso/lib/constants/organisations'; +import { ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations-translations'; +import { + formatOrganisationCallbackUrl, + formatOrganisationLoginUrl, +} from '@documenso/lib/utils/organisation-authentication-portal'; +import { trpc } from '@documenso/trpc/react'; +import { domainRegex } from '@documenso/trpc/server/enterprise-router/create-organisation-email-domain.types'; +import type { TGetOrganisationAuthenticationPortalResponse } from '@documenso/trpc/server/enterprise-router/get-organisation-authentication-portal.types'; +import { ZUpdateOrganisationAuthenticationPortalRequestSchema } from '@documenso/trpc/server/enterprise-router/update-organisation-authentication-portal.types'; +import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button'; +import { Alert, AlertDescription } from '@documenso/ui/primitives/alert'; +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 { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@documenso/ui/primitives/select'; +import { SpinnerBox } from '@documenso/ui/primitives/spinner'; +import { Switch } from '@documenso/ui/primitives/switch'; +import { Textarea } from '@documenso/ui/primitives/textarea'; +import { useToast } from '@documenso/ui/primitives/use-toast'; + +import { SettingsHeader } from '~/components/general/settings-header'; +import { appMetaTags } from '~/utils/meta'; + +const ZProviderFormSchema = ZUpdateOrganisationAuthenticationPortalRequestSchema.shape.data + .pick({ + enabled: true, + wellKnownUrl: true, + clientId: true, + autoProvisionUsers: true, + defaultOrganisationRole: true, + }) + .extend({ + clientSecret: z.string().nullable(), + allowedDomains: z.string().refine( + (value) => { + const domains = value.split(' ').filter(Boolean); + + return domains.every((domain) => domainRegex.test(domain)); + }, + { + message: msg`Invalid domains`.id, + }, + ), + }); + +type TProviderFormSchema = z.infer; + +export function meta() { + return appMetaTags('Organisation SSO Portal'); +} + +export default function OrganisationSettingSSOLoginPage() { + const { t } = useLingui(); + const organisation = useCurrentOrganisation(); + + const { data: authenticationPortal, isLoading: isLoadingAuthenticationPortal } = + trpc.enterprise.organisation.authenticationPortal.get.useQuery({ + organisationId: organisation.id, + }); + + if (isLoadingAuthenticationPortal || !authenticationPortal) { + return ; + } + + return ( +
+ + + +
+ ); +} + +type SSOProviderFormProps = { + authenticationPortal: TGetOrganisationAuthenticationPortalResponse; +}; + +const SSOProviderForm = ({ authenticationPortal }: SSOProviderFormProps) => { + const { t } = useLingui(); + const { toast } = useToast(); + + const organisation = useCurrentOrganisation(); + + const { mutateAsync: updateOrganisationAuthenticationPortal } = + trpc.enterprise.organisation.authenticationPortal.update.useMutation(); + + const form = useForm({ + resolver: zodResolver(ZProviderFormSchema), + defaultValues: { + enabled: authenticationPortal.enabled, + clientId: authenticationPortal.clientId, + clientSecret: authenticationPortal.clientSecretProvided ? null : '', + wellKnownUrl: authenticationPortal.wellKnownUrl, + autoProvisionUsers: authenticationPortal.autoProvisionUsers, + defaultOrganisationRole: authenticationPortal.defaultOrganisationRole, + allowedDomains: authenticationPortal.allowedDomains.join(' '), + }, + }); + + const onSubmit = async (values: TProviderFormSchema) => { + const { enabled, clientId, clientSecret, wellKnownUrl } = values; + + if (enabled && !clientId) { + form.setError('clientId', { + message: t`Client ID is required`, + }); + + return; + } + + if (enabled && clientSecret === '') { + form.setError('clientSecret', { + message: t`Client secret is required`, + }); + + return; + } + + if (enabled && !wellKnownUrl) { + form.setError('wellKnownUrl', { + message: t`Well-known URL is required`, + }); + + return; + } + + try { + await updateOrganisationAuthenticationPortal({ + organisationId: organisation.id, + data: { + enabled, + clientId, + clientSecret: values.clientSecret ?? undefined, + wellKnownUrl, + autoProvisionUsers: values.autoProvisionUsers, + defaultOrganisationRole: values.defaultOrganisationRole, + allowedDomains: values.allowedDomains.split(' ').filter(Boolean), + }, + }); + + toast({ + title: t`Success`, + description: t`Provider has been updated successfully`, + duration: 5000, + }); + } catch (err) { + console.error(err); + + toast({ + title: t`An error occurred`, + description: t`We couldn't update the provider. Please try again.`, + variant: 'destructive', + }); + } + }; + + const isSsoEnabled = form.watch('enabled'); + + return ( +
+ +
+
+ + +
+ +
+ toast({ title: t`Copied to clipboard` })} + /> +
+
+ +

+ This is the URL which users will use to sign in to your organisation. +

+
+ +
+ + +
+ +
+ toast({ title: t`Copied to clipboard` })} + /> +
+
+ +

+ Add this URL to your provider's allowed redirect URIs +

+
+ +
+ + + + +

+ This is the required scopes you must set in your provider's settings +

+
+ + ( + + + Issuer URL + + + + + + {!form.formState.errors.wellKnownUrl && ( +

+ The OpenID discovery endpoint URL for your provider +

+ )} + + + )} + /> + +
+ ( + + + Client ID + + + + + + + )} + /> + + ( + + + Client Secret + + + + + + + )} + /> +
+ + ( + + + Default Organisation Role for New Users + + + + + + + )} + /> + + ( + + + Allowed Email Domains + + +