Merge branch 'main' into chore/add-rust-signer

2025-11-18 18:51:37 +10:00 · 2024-03-18 12:24:59 +11:00
parent 8859b2779f 4ac800fa78
commit 3c6cc7fd46
49 changed files with 1181 additions and 547 deletions
--- a/apps/web/package.json
+++ b/apps/web/package.json
@ -43,7 +43,7 @@
    "react-icons": "^4.11.0",
    "react-rnd": "^10.4.1",
    "remeda": "^1.27.1",
-    "sharp": "0.33.1",
+    "sharp": "^0.33.1",
    "ts-pattern": "^5.0.5",
    "ua-parser-js": "^1.0.37",
    "uqr": "^0.1.2",
--- a/apps/web/src/app/(dashboard)/documents/data-table.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table.tsx
@ -76,14 +76,13 @@ export const DocumentsDataTable = ({
          {
            header: 'Recipient',
            accessorKey: 'recipient',
-            cell: ({ row }) => {
-              return <StackAvatarsWithTooltip recipients={row.original.Recipient} />;
-            },
+            cell: ({ row }) => <StackAvatarsWithTooltip recipients={row.original.Recipient} />,
          },
          {
            header: 'Status',
            accessorKey: 'status',
            cell: ({ row }) => <DocumentStatus status={row.getValue('status')} />,
+            size: 140,
          },
          {
            header: 'Actions',
--- a/apps/web/src/app/(dashboard)/documents/upload-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/upload-document.tsx
@ -2,7 +2,6 @@

 import { useMemo, useState } from 'react';

-import Link from 'next/link';
 import { useRouter } from 'next/navigation';

 import { Loader } from 'lucide-react';
@ -139,27 +138,6 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
          <Loader className="text-muted-foreground h-12 w-12 animate-spin" />
        </div>
      )}
-
-      {team?.id === undefined && remaining.documents === 0 && (
-        <div className="bg-background/60 absolute inset-0 flex items-center justify-center rounded-lg backdrop-blur-sm">
-          <div className="text-center">
-            <h2 className="text-muted-foreground/80 text-xl font-semibold">
-              You have reached your document limit.
-            </h2>
-
-            <p className="text-muted-foreground/60 mt-2 text-sm">
-              You can upload up to {quota.documents} documents per month on your current plan.
-            </p>
-
-            <Link
-              className="text-primary hover:text-primary/80 mt-6 block font-medium"
-              href="/settings/billing"
-            >
-              Upgrade your account to upload more documents.
-            </Link>
-          </div>
-        </div>
-      )}
    </div>
  );
 };
--- a/apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx
+++ b/apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx
@ -1,5 +1,7 @@
 'use client';

+import { useState } from 'react';
+
 import { signOut } from 'next-auth/react';

 import type { User } from '@documenso/prisma/client';
@ -16,6 +18,8 @@ import {
  DialogTitle,
  DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';

 export type DeleteAccountDialogProps = {
@ -28,6 +32,8 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp

  const hasTwoFactorAuthentication = user.twoFactorEnabled;

+  const [enteredEmail, setEnteredEmail] = useState<string>('');
+
  const { mutateAsync: deleteAccount, isLoading: isDeletingAccount } =
    trpc.profile.deleteAccount.useMutation();

@ -76,10 +82,11 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp
        </div>

        <div className="flex-shrink-0">
-          <Dialog>
+          <Dialog onOpenChange={() => setEnteredEmail('')}>
            <DialogTrigger asChild>
              <Button variant="destructive">Delete Account</Button>
            </DialogTrigger>
+
            <DialogContent>
              <DialogHeader className="space-y-4">
                <DialogTitle>Delete Account</DialogTitle>
@ -105,14 +112,31 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp
                </DialogDescription>
              </DialogHeader>

+              {!hasTwoFactorAuthentication && (
+                <div className="mt-4">
+                  <Label>
+                    Please type{' '}
+                    <span className="text-muted-foreground font-semibold">{user.email}</span> to
+                    confirm.
+                  </Label>
+
+                  <Input
+                    type="text"
+                    className="mt-2"
+                    aria-label="Confirm Email"
+                    value={enteredEmail}
+                    onChange={(e) => setEnteredEmail(e.target.value)}
+                  />
+                </div>
+              )}
              <DialogFooter>
                <Button
                  onClick={onDeleteAccount}
                  loading={isDeletingAccount}
                  variant="destructive"
-                  disabled={hasTwoFactorAuthentication}
+                  disabled={hasTwoFactorAuthentication || enteredEmail !== user.email}
                >
-                  {isDeletingAccount ? 'Deleting account...' : 'Delete Account'}
+                  {isDeletingAccount ? 'Deleting account...' : 'Confirm Deletion'}
                </Button>
              </DialogFooter>
            </DialogContent>
--- a/apps/web/src/app/(dashboard)/templates/data-table-templates.tsx
+++ b/apps/web/src/app/(dashboard)/templates/data-table-templates.tsx
@ -25,7 +25,11 @@ type TemplateWithRecipient = Template & {
 };

 type TemplatesDataTableProps = {
-  templates: TemplateWithRecipient[];
+  templates: Array<
+    TemplateWithRecipient & {
+      team: { id: number; url: string } | null;
+    }
+  >;
  perPage: number;
  page: number;
  totalPages: number;
--- a/apps/web/src/app/(dashboard)/templates/data-table-title.tsx
+++ b/apps/web/src/app/(dashboard)/templates/data-table-title.tsx
@ -1,23 +1,35 @@
+'use client';
+
 import Link from 'next/link';

 import { useSession } from 'next-auth/react';

-import { Template } from '@documenso/prisma/client';
+import { formatTemplatesPath } from '@documenso/lib/utils/teams';
+import type { Template } from '@documenso/prisma/client';
+
+import { useOptionalCurrentTeam } from '~/providers/team';

 export type DataTableTitleProps = {
-  row: Template;
+  row: Template & {
+    team: { id: number; url: string } | null;
+  };
 };

 export const DataTableTitle = ({ row }: DataTableTitleProps) => {
  const { data: session } = useSession();
+  const team = useOptionalCurrentTeam();

  if (!session) {
    return null;
  }

+  const isCurrentTeamTemplate = team?.url && row.team?.url === team?.url;
+
+  const templatesPath = formatTemplatesPath(isCurrentTeamTemplate ? team?.url : undefined);
+
  return (
    <Link
-      href={`/templates/${row.id}`}
+      href={`${templatesPath}/${row.id}`}
      className="block max-w-[10rem] cursor-pointer truncate font-medium hover:underline md:max-w-[20rem]"
    >
      {row.title}
--- a/apps/web/src/app/(unauthenticated)/layout.tsx
+++ b/apps/web/src/app/(unauthenticated)/layout.tsx
@ -10,7 +10,7 @@ type UnauthenticatedLayoutProps = {

 export default function UnauthenticatedLayout({ children }: UnauthenticatedLayoutProps) {
  return (
-    <main className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden  px-4 py-12 md:p-12 lg:p-24">
+    <main className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden px-4 py-12 md:p-12 lg:p-24">
      <div>
        <div className="absolute -inset-[min(600px,max(400px,60vw))] -z-[1] flex items-center justify-center opacity-70">
          <Image
--- a/apps/web/src/app/(unauthenticated)/signup/page.tsx
+++ b/apps/web/src/app/(unauthenticated)/signup/page.tsx
@ -34,7 +34,7 @@ export default function SignUpPage({ searchParams }: SignUpPageProps) {

  return (
    <SignUpFormV2
-      className="w-screen max-w-screen-2xl px-4 md:px-16"
+      className="w-screen max-w-screen-2xl px-4 md:px-16 lg:-my-16"
      initialEmail={email || undefined}
      isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED}
    />
--- a/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx
+++ b/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx
@ -1,13 +1,12 @@
+'use client';
+
+import { useRef, useState } from 'react';
+
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import type { Recipient } from '@documenso/prisma/client';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@documenso/ui/primitives/tooltip';
+import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';

 import { AvatarWithRecipient } from './avatar-with-recipient';
 import { StackAvatar } from './stack-avatar';
@ -24,6 +23,11 @@ export const StackAvatarsWithTooltip = ({
  position,
  children,
 }: StackAvatarsWithTooltipProps) => {
+  const [open, setOpen] = useState(false);
+
+  const isControlled = useRef(false);
+  const isMouseOverTimeout = useRef<NodeJS.Timeout | null>(null);
+
  const waitingRecipients = recipients.filter(
    (recipient) => getRecipientType(recipient) === 'waiting',
  );
@ -40,66 +44,105 @@ export const StackAvatarsWithTooltip = ({
    (recipient) => getRecipientType(recipient) === 'unsigned',
  );

+  const onMouseEnter = () => {
+    if (isMouseOverTimeout.current) {
+      clearTimeout(isMouseOverTimeout.current);
+    }
+
+    if (isControlled.current) {
+      return;
+    }
+
+    isMouseOverTimeout.current = setTimeout(() => {
+      setOpen((o) => (!o ? true : o));
+    }, 200);
+  };
+
+  const onMouseLeave = () => {
+    if (isMouseOverTimeout.current) {
+      clearTimeout(isMouseOverTimeout.current);
+    }
+
+    if (isControlled.current) {
+      return;
+    }
+
+    setTimeout(() => {
+      setOpen((o) => (o ? false : o));
+    }, 200);
+  };
+
+  const onOpenChange = (newOpen: boolean) => {
+    isControlled.current = newOpen;
+
+    setOpen(newOpen);
+  };
+
  return (
-    <TooltipProvider>
-      <Tooltip delayDuration={200}>
-        <TooltipTrigger className="flex cursor-pointer">
-          {children || <StackAvatars recipients={recipients} />}
-        </TooltipTrigger>
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger
+        className="flex cursor-pointer"
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        {children || <StackAvatars recipients={recipients} />}
+      </PopoverTrigger>

-        <TooltipContent side={position}>
-          <div className="flex flex-col gap-y-5 p-1">
-            {completedRecipients.length > 0 && (
-              <div>
-                <h1 className="text-base font-medium">Completed</h1>
-                {completedRecipients.map((recipient: Recipient) => (
-                  <div key={recipient.id} className="my-1 flex items-center gap-2">
-                    <StackAvatar
-                      first={true}
-                      key={recipient.id}
-                      type={getRecipientType(recipient)}
-                      fallbackText={recipientAbbreviation(recipient)}
-                    />
-                    <div className="">
-                      <p className="text-muted-foreground text-sm">{recipient.email}</p>
-                      <p className="text-muted-foreground/70 text-xs">
-                        {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
-                      </p>
-                    </div>
-                  </div>
-                ))}
+      <PopoverContent
+        side={position}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        className="flex flex-col gap-y-5 py-2"
+      >
+        {completedRecipients.length > 0 && (
+          <div>
+            <h1 className="text-base font-medium">Completed</h1>
+            {completedRecipients.map((recipient: Recipient) => (
+              <div key={recipient.id} className="my-1 flex items-center gap-2">
+                <StackAvatar
+                  first={true}
+                  key={recipient.id}
+                  type={getRecipientType(recipient)}
+                  fallbackText={recipientAbbreviation(recipient)}
+                />
+                <div className="">
+                  <p className="text-muted-foreground text-sm">{recipient.email}</p>
+                  <p className="text-muted-foreground/70 text-xs">
+                    {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
+                  </p>
+                </div>
              </div>
-            )}
-
-            {waitingRecipients.length > 0 && (
-              <div>
-                <h1 className="text-base font-medium">Waiting</h1>
-                {waitingRecipients.map((recipient: Recipient) => (
-                  <AvatarWithRecipient key={recipient.id} recipient={recipient} />
-                ))}
-              </div>
-            )}
-
-            {openedRecipients.length > 0 && (
-              <div>
-                <h1 className="text-base font-medium">Opened</h1>
-                {openedRecipients.map((recipient: Recipient) => (
-                  <AvatarWithRecipient key={recipient.id} recipient={recipient} />
-                ))}
-              </div>
-            )}
-
-            {uncompletedRecipients.length > 0 && (
-              <div>
-                <h1 className="text-base font-medium">Uncompleted</h1>
-                {uncompletedRecipients.map((recipient: Recipient) => (
-                  <AvatarWithRecipient key={recipient.id} recipient={recipient} />
-                ))}
-              </div>
-            )}
+            ))}
          </div>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+        )}
+
+        {waitingRecipients.length > 0 && (
+          <div>
+            <h1 className="text-base font-medium">Waiting</h1>
+            {waitingRecipients.map((recipient: Recipient) => (
+              <AvatarWithRecipient key={recipient.id} recipient={recipient} />
+            ))}
+          </div>
+        )}
+
+        {openedRecipients.length > 0 && (
+          <div>
+            <h1 className="text-base font-medium">Opened</h1>
+            {openedRecipients.map((recipient: Recipient) => (
+              <AvatarWithRecipient key={recipient.id} recipient={recipient} />
+            ))}
+          </div>
+        )}
+
+        {uncompletedRecipients.length > 0 && (
+          <div>
+            <h1 className="text-base font-medium">Uncompleted</h1>
+            {uncompletedRecipients.map((recipient: Recipient) => (
+              <AvatarWithRecipient key={recipient.id} recipient={recipient} />
+            ))}
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
  );
 };
--- a/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
+++ b/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
@ -93,7 +93,7 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
        <Button
          data-testid="menu-switcher"
          variant="none"
-          className="relative flex h-12 flex-row items-center px-2 py-2 ring-0 focus-visible:border-0 focus-visible:ring-0"
+          className="relative flex h-12 flex-row items-center px-2 py-2 ring-0 focus:outline-none focus-visible:border-0 focus-visible:ring-0 focus-visible:ring-transparent"
        >
          <AvatarWithText
            avatarFallback={formatAvatarFallback(selectedTeam?.name)}
--- a/apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx
+++ b/apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx
@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
@ -149,6 +149,13 @@ export const EnableAuthenticatorAppDialog = ({
    }
  };

+  useEffect(() => {
+    // Reset the form when the Dialog closes
+    if (!open) {
+      setupTwoFactorAuthenticationForm.reset();
+    }
+  }, [open, setupTwoFactorAuthenticationForm]);
+
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="w-full max-w-xl md:max-w-xl lg:max-w-xl">
--- a/apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx
+++ b/apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx
@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
@ -92,6 +92,13 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
    }
  };

+  useEffect(() => {
+    // Reset the form when the Dialog closes
+    if (!open) {
+      viewRecoveryCodesForm.reset();
+    }
+  }, [open, viewRecoveryCodesForm]);
+
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="w-full max-w-xl md:max-w-xl lg:max-w-xl">
--- a/apps/web/src/components/forms/v2/signup.tsx
+++ b/apps/web/src/components/forms/v2/signup.tsx
@ -108,17 +108,6 @@ export const SignUpFormV2 = ({
  const name = form.watch('name');
  const url = form.watch('url');

-  // To continue we need to make sure name, email, password and signature are valid
-  const canContinue =
-    form.formState.dirtyFields.name &&
-    form.formState.errors.name === undefined &&
-    form.formState.dirtyFields.email &&
-    form.formState.errors.email === undefined &&
-    form.formState.dirtyFields.password &&
-    form.formState.errors.password === undefined &&
-    form.formState.dirtyFields.signature &&
-    form.formState.errors.signature === undefined;
-
  const { mutateAsync: signup } = trpc.auth.signup.useMutation();

  const onFormSubmit = async ({ name, email, password, signature, url }: TSignUpFormV2Schema) => {
@ -169,6 +158,14 @@ export const SignUpFormV2 = ({
    }
  };

+  const onNextClick = async () => {
+    const valid = await form.trigger(['name', 'email', 'password', 'signature']);
+
+    if (valid) {
+      setStep('CLAIM_USERNAME');
+    }
+  };
+
  const onSignUpWithGoogleClick = async () => {
    try {
      await signIn('google', { callbackUrl: SIGN_UP_REDIRECT_PATH });
@ -224,12 +221,12 @@ export const SignUpFormV2 = ({
        </div>
      </div>

-      <div className="border-border dark:bg-background relative z-10 flex min-h-[min(800px,80vh)] w-full max-w-lg flex-col rounded-xl border bg-neutral-100 p-6">
+      <div className="border-border dark:bg-background relative z-10 flex min-h-[min(850px,80vh)] w-full max-w-lg flex-col rounded-xl border bg-neutral-100 p-6">
        {step === 'BASIC_DETAILS' && (
          <div className="h-20">
-            <h1 className="text-2xl font-semibold">Create a new account</h1>
+            <h1 className="text-xl font-semibold md:text-2xl">Create a new account</h1>

-            <p className="text-muted-foreground mt-2 text-sm">
+            <p className="text-muted-foreground mt-2 text-xs md:text-sm">
              Create your account and start using state-of-the-art document signing. Open and
              beautiful signing is within your grasp.
            </p>
@ -238,9 +235,9 @@ export const SignUpFormV2 = ({

        {step === 'CLAIM_USERNAME' && (
          <div className="h-20">
-            <h1 className="text-2xl font-semibold">Claim your username now</h1>
+            <h1 className="text-xl font-semibold md:text-2xl">Claim your username now</h1>

-            <p className="text-muted-foreground mt-2 text-sm">
+            <p className="text-muted-foreground mt-2 text-xs md:text-sm">
              You will get notified & be able to set up your documenso public profile when we launch
              the feature.
            </p>
@ -257,8 +254,8 @@ export const SignUpFormV2 = ({
            {step === 'BASIC_DETAILS' && (
              <fieldset
                className={cn(
-                  'flex h-[500px] w-full flex-col gap-y-4',
-                  isGoogleSSOEnabled && 'h-[600px]',
+                  'flex h-[550px] w-full flex-col gap-y-4',
+                  isGoogleSSOEnabled && 'h-[650px]',
                )}
                disabled={isSubmitting}
              >
@ -360,8 +357,8 @@ export const SignUpFormV2 = ({
            {step === 'CLAIM_USERNAME' && (
              <fieldset
                className={cn(
-                  'flex h-[500px] w-full flex-col gap-y-4',
-                  isGoogleSSOEnabled && 'h-[600px]',
+                  'flex h-[550px] w-full flex-col gap-y-4',
+                  isGoogleSSOEnabled && 'h-[650px]',
                )}
                disabled={isSubmitting}
              >
@ -378,7 +375,7 @@ export const SignUpFormV2 = ({

                      <FormMessage />

-                      <div className="bg-muted/50 border-border text-muted-foreground mt-2 inline-block truncate rounded-md border px-2 py-1 text-sm lowercase">
+                      <div className="bg-muted/50 border-border text-muted-foreground mt-2 inline-block max-w-[16rem] truncate rounded-md border px-2 py-1 text-sm lowercase">
                        {baseUrl.host}/u/{field.value || '<username>'}
                      </div>
                    </FormItem>
@ -431,9 +428,8 @@ export const SignUpFormV2 = ({
                  type="button"
                  size="lg"
                  className="flex-1 disabled:cursor-not-allowed"
-                  disabled={!canContinue}
                  loading={form.formState.isSubmitting}
-                  onClick={() => setStep('CLAIM_USERNAME')}
+                  onClick={onNextClick}
                >
                  Next
                </Button>
--- a/apps/web/src/components/ui/user-profile-skeleton.tsx
+++ b/apps/web/src/components/ui/user-profile-skeleton.tsx
@ -24,9 +24,8 @@ export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSk
        className,
      )}
    >
-      <div className="border-border bg-background text-muted-foreground inline-flex items-center rounded-md border px-2.5 py-1.5 text-sm">
-        <span>{baseUrl.host}/u/</span>
-        <span className="inline-block max-w-[8rem] truncate lowercase">{user.url}</span>
+      <div className="border-border bg-background text-muted-foreground inline-block max-w-full truncate rounded-md border px-2.5 py-1.5 text-sm">
+        {baseUrl.host}/u/{user.url}
      </div>

      <div className="mt-4">
--- a/apps/web/src/components/ui/user-profile-timur.tsx
+++ b/apps/web/src/components/ui/user-profile-timur.tsx
@ -25,7 +25,7 @@ export const UserProfileTimur = ({ className, rows = 2 }: UserProfileTimurProps)
        className,
      )}
    >
-      <div className="border-border bg-background text-muted-foreground inline-block rounded-md border px-2.5 py-1.5 text-sm">
+      <div className="border-border bg-background text-muted-foreground inline-block max-w-full truncate rounded-md border px-2.5 py-1.5 text-sm">
        {baseUrl.host}/u/timur
      </div>