Merge branch 'main' into feat/external-2fa-codes

apps/remix/app/components/dialogs/admin-user-create-dialog.tsx

@@ -0,0 +1,152 @@
+import { AppError } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateUserRequestSchema } from '@documenso/trpc/server/admin-router/create-user.types';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+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';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
+import type { z } from 'zod';
+
+export type AdminUserCreateDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZFormSchema = ZCreateUserRequestSchema;
+
+type TFormSchema = z.infer<typeof ZFormSchema>;
+
+export const AdminUserCreateDialog = ({ trigger, ...props }: AdminUserCreateDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [open, setOpen] = useState(false);
+
+  const navigate = useNavigate();
+
+  const form = useForm<TFormSchema>({
+    resolver: zodResolver(ZFormSchema),
+    defaultValues: {
+      email: '',
+      name: '',
+    },
+  });
+
+  const { mutateAsync: createUser } = trpc.admin.user.create.useMutation();
+
+  const onFormSubmit = async (data: TFormSchema) => {
+    try {
+      const result = await createUser(data);
+
+      await navigate(`/admin/users/${result.userId}`);
+
+      setOpen(false);
+
+      toast({
+        title: t`Success`,
+        description: t`User created and welcome email sent`,
+        duration: 5000,
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      console.error(error);
+
+      toast({
+        title: t`An error occurred`,
+        description: error.message || t`We encountered an error while creating the user. Please try again later.`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    form.reset();
+  }, [open, form]);
+
+  return (
+    <Dialog {...props} open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+        {trigger ?? (
+          <Button className="flex-shrink-0" variant="secondary">
+            <Trans>Create User</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Create User</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>Create a new user. A welcome email will be sent with a link to set their password.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>
+                      <Trans>Email</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input {...field} type="email" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>
+                      <Trans>Name</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button type="submit" data-testid="dialog-create-user-button" loading={form.formState.isSubmitting}>
+                  <Trans>Create</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -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);
     }
   };

apps/remix/app/components/forms/signin.tsx

@@ -89,7 +89,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 +196,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 +231,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 +260,7 @@ export const SignInForm = ({
         variant: 'destructive',
       });
 
-      turnstileRef.current?.reset();
-      setCaptchaToken(null);
+      $turnstile?.reset();
     }
   };
 
@@ -358,11 +370,9 @@ export const SignInForm = ({
             <Turnstile
               ref={turnstileRef}
               siteKey={turnstileSiteKey}
-              onSuccess={setCaptchaToken}
-              onExpire={() => setCaptchaToken(null)}
               options={{
                 size: 'flexible',
-                appearance: 'interaction-only',
+                appearance: 'always',
               }}
             />
           )}
@@ -499,11 +509,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 +526,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>

apps/remix/app/components/forms/signup.tsx

@@ -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';
@@ -86,8 +86,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 +103,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 +154,6 @@ export const SignUpForm = ({
       });
 
       turnstileRef.current?.reset();
-      setCaptchaToken(null);
     }
   };
 
@@ -316,11 +329,9 @@ export const SignUpForm = ({
                 <Turnstile
                   ref={turnstileRef}
                   siteKey={turnstileSiteKey}
-                  onSuccess={setCaptchaToken}
-                  onExpire={() => setCaptchaToken(null)}
                   options={{
                     size: 'flexible',
-                    appearance: 'interaction-only',
+                    appearance: 'always',
                   }}
                 />
               )}

apps/remix/app/components/general/claim-account.tsx

@@ -1,6 +1,7 @@
 import { authClient } from '@documenso/auth/client';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { AppError } from '@documenso/lib/errors/app-error';
+import { env } from '@documenso/lib/utils/env';
 import { zEmail } from '@documenso/lib/utils/zod';
 import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
@@ -12,6 +13,9 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 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 { useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 import { z } from 'zod';
@@ -50,6 +54,9 @@ export const ClaimAccount = ({ defaultName, defaultEmail }: ClaimAccountProps) =
   const analytics = useAnalytics();
   const navigate = useNavigate();
 
+  const turnstileSiteKey = env('NEXT_PUBLIC_TURNSTILE_SITE_KEY');
+  const turnstileRef = useRef<TurnstileInstance>(null);
+
   const form = useForm<TClaimAccountFormSchema>({
     values: {
       name: defaultName ?? '',
@@ -61,7 +68,28 @@ export const ClaimAccount = ({ defaultName, defaultEmail }: ClaimAccountProps) =
 
   const onFormSubmit = async ({ name, email, password }: TClaimAccountFormSchema) => {
     try {
-      await authClient.emailPassword.signUp({ name, email, password });
+      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,
+        captchaToken: token ?? undefined,
+      });
 
       await navigate(`/unverified-account`);
 
@@ -87,6 +115,8 @@ export const ClaimAccount = ({ defaultName, defaultEmail }: ClaimAccountProps) =
         description: _(errorMessage),
         variant: 'destructive',
       });
+
+      turnstileRef.current?.reset();
     }
   };
 
@@ -141,6 +171,19 @@ export const ClaimAccount = ({ defaultName, defaultEmail }: ClaimAccountProps) =
               )}
             />
 
+            {turnstileSiteKey && (
+              <div className="mt-4">
+                <Turnstile
+                  ref={turnstileRef}
+                  siteKey={turnstileSiteKey}
+                  options={{
+                    size: 'flexible',
+                    appearance: 'always',
+                  }}
+                />
+              </div>
+            )}
+
             <Button type="submit" className="mt-6 w-full" loading={form.formState.isSubmitting}>
               <Trans>Claim account</Trans>
             </Button>

apps/remix/app/components/general/document-signing/document-signing-mobile-widget.tsx

@@ -97,7 +97,7 @@ export const DocumentSigningMobileWidget = () => {
                   layoutId="document-signing-mobile-widget-progress-bar"
                   className="absolute inset-y-0 left-0 bg-primary"
                   style={{
-                    width: `${100 - (100 / requiredRecipientFields.length) * (recipientFieldsRemaining.length ?? 0)}%`,
+                    width: `${requiredRecipientFields.length === 0 ? 100 : 100 - (100 / requiredRecipientFields.length) * (recipientFieldsRemaining.length ?? 0)}%`,
                   }}
                 />
               </div>

apps/remix/app/components/general/document-signing/document-signing-page-view-v1.tsx

@@ -142,7 +142,7 @@ export const DocumentSigningPageViewV1 = ({
       return undefined;
     }
 
-    const sortedRecipients = allRecipients.sort((a, b) => {
+    const sortedRecipients = [...allRecipients].sort((a, b) => {
       // Sort by signingOrder first (nulls last), then by id
       if (a.signingOrder === null && b.signingOrder === null) {
         return a.id - b.id;

apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx

@@ -150,7 +150,7 @@ export const DocumentSigningPageViewV2 = () => {
                   layoutId="document-flow-container-step"
                   className="absolute inset-y-0 left-0 bg-primary"
                   style={{
-                    width: `${100 - (100 / requiredRecipientFields.length) * (recipientFieldsRemaining.length ?? 0)}%`,
+                    width: `${requiredRecipientFields.length === 0 ? 100 : 100 - (100 / requiredRecipientFields.length) * (recipientFieldsRemaining.length ?? 0)}%`,
                   }}
                 />
               </div>

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

@@ -294,7 +294,7 @@ export const EnvelopeSigningProvider = ({
       return null;
     }
 
-    const sortedRecipients = envelope.recipients.sort((a, b) => {
+    const sortedRecipients = [...envelope.recipients].sort((a, b) => {
       // Sort by signingOrder first (nulls last), then by id
       if (a.signingOrder === null && b.signingOrder === null) {
         return a.id - b.id;

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

@@ -334,8 +334,6 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
                 fieldGroup.add(loadingSpinnerGroup);
                 await signField(field.id, payload);
               }
-
-              loadingSpinnerGroup.destroy();
             })
             .finally(() => {
               loadingSpinnerGroup.destroy();

apps/remix/app/components/general/metric-card.tsx

@@ -25,7 +25,7 @@ export const CardMetric = ({ icon: Icon, title, value, className, children }: Ca
             </div>
           )}
 
-          <h3 className="mb-2 flex items-end font-medium text-primary-forground text-sm leading-tight">{title}</h3>
+          <h3 className="mb-2 flex items-end font-medium text-sm leading-tight">{title}</h3>
         </div>
 
         {children || (

apps/remix/app/components/tables/admin-organisations-table.tsx

@@ -238,7 +238,7 @@ export const AdminOrganisationsTable = ({
         }}
       >
         {(table) =>
-          !hidePaginationUntilOverflow || 1 > table.getPageCount() ? (
+          !hidePaginationUntilOverflow || table.getPageCount() > 1 ? (
             <DataTablePagination additionalInformation="VisibleCount" table={table} />
           ) : null
         }

apps/remix/app/routes/_authenticated+/admin+/users._index.tsx

@@ -1,6 +1,7 @@
 import { findUsers } from '@documenso/lib/server-only/user/get-all-users';
 import { Trans } from '@lingui/react/macro';
 
+import { AdminUserCreateDialog } from '~/components/dialogs/admin-user-create-dialog';
 import { AdminDashboardUsersTable } from '~/components/tables/admin-dashboard-users-table';
 
 import type { Route } from './+types/users._index';
@@ -27,9 +28,13 @@ export default function AdminManageUsersPage({ loaderData }: Route.ComponentProp
 
   return (
     <div>
-      <h2 className="font-semibold text-4xl">
-        <Trans>Manage users</Trans>
-      </h2>
+      <div className="mb-6 flex items-center justify-between">
+        <h2 className="font-semibold text-4xl">
+          <Trans>Manage users</Trans>
+        </h2>
+
+        <AdminUserCreateDialog />
+      </div>
 
       <AdminDashboardUsersTable users={users} totalPages={totalPages} page={page} perPage={perPage} />
     </div>

apps/remix/app/utils/field-signing/initial-field.ts

@@ -40,6 +40,6 @@ export const handleInitialsFieldClick = async (
 
   return {
     type: FieldType.INITIALS,
-    value: initials,
+    value: initialsToInsert,
   };
 };