chore: merge main

2025-11-17 02:01:33 +10:00 · 2024-02-16 12:12:54 +02:00
parent 7f3f6f5312 e5f4edc120
commit 4d6e780abe
163 changed files with 3250 additions and 57373 deletions
--- a/apps/web/src/components/(dashboard)/avatar/avatar-with-recipient.tsx
+++ b/apps/web/src/components/(dashboard)/avatar/avatar-with-recipient.tsx
@ -4,6 +4,7 @@ import React from 'react';

 import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 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';
@ -25,7 +26,7 @@ export function AvatarWithRecipient({ recipient }: AvatarWithRecipientProps) {
      return;
    }

-    void copy(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/sign/${recipient.token}`).then(() => {
+    void copy(`${NEXT_PUBLIC_WEBAPP_URL()}/sign/${recipient.token}`).then(() => {
      toast({
        title: 'Copied to clipboard',
        description: 'The signing link has been copied to your clipboard.',
--- a/apps/web/src/components/(dashboard)/layout/desktop-nav.tsx
+++ b/apps/web/src/components/(dashboard)/layout/desktop-nav.tsx
@ -52,24 +52,22 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
      {...props}
    >
      <div className="flex items-baseline gap-x-6">
-        {navigationLinks
-          .filter(({ href }) => href !== '/templates' || rootHref === '') // Remove templates for team pages.
-          .map(({ href, label }) => (
-            <Link
-              key={href}
-              href={`${rootHref}${href}`}
-              className={cn(
-                'text-muted-foreground dark:text-muted focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
-                {
-                  'text-foreground dark:text-muted-foreground': pathname?.startsWith(
-                    `${rootHref}${href}`,
-                  ),
-                },
-              )}
-            >
-              {label}
-            </Link>
-          ))}
+        {navigationLinks.map(({ href, label }) => (
+          <Link
+            key={href}
+            href={`${rootHref}${href}`}
+            className={cn(
+              'text-muted-foreground dark:text-muted focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
+              {
+                'text-foreground dark:text-muted-foreground': pathname?.startsWith(
+                  `${rootHref}${href}`,
+                ),
+              },
+            )}
+          >
+            {label}
+          </Link>
+        ))}
      </div>

      <CommandMenu open={open} onOpenChange={setOpen} />
--- a/apps/web/src/components/(dashboard)/layout/header.tsx
+++ b/apps/web/src/components/(dashboard)/layout/header.tsx
@ -7,6 +7,7 @@ import { useParams } from 'next/navigation';

 import { MenuIcon, SearchIcon } from 'lucide-react';

+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
 import { getRootHref } from '@documenso/lib/utils/params';
 import type { User } from '@documenso/prisma/client';
@ -18,6 +19,7 @@ import { CommandMenu } from '../common/command-menu';
 import { DesktopNav } from './desktop-nav';
 import { MenuSwitcher } from './menu-switcher';
 import { MobileNavigation } from './mobile-navigation';
+import { ProfileDropdown } from './profile-dropdown';

 export type HeaderProps = HTMLAttributes<HTMLDivElement> & {
  user: User;
@ -27,6 +29,10 @@ export type HeaderProps = HTMLAttributes<HTMLDivElement> & {
 export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
  const params = useParams();

+  const { getFlag } = useFeatureFlags();
+
+  const isTeamsEnabled = getFlag('app_teams');
+
  const [isCommandMenuOpen, setIsCommandMenuOpen] = useState(false);
  const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
  const [scrollY, setScrollY] = useState(0);
@ -41,6 +47,34 @@ export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

+  if (!isTeamsEnabled) {
+    return (
+      <header
+        className={cn(
+          'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-[60] flex h-16 w-full items-center border-b border-b-transparent backdrop-blur duration-200',
+          scrollY > 5 && 'border-b-border',
+          className,
+        )}
+        {...props}
+      >
+        <div className="mx-auto flex w-full max-w-screen-xl items-center justify-between gap-x-4 px-4 md:justify-normal md:px-8">
+          <Link
+            href="/"
+            className="focus-visible:ring-ring ring-offset-background rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+          >
+            <Logo className="h-6 w-auto" />
+          </Link>
+
+          <DesktopNav />
+
+          <div className="flex gap-x-4 md:ml-8">
+            <ProfileDropdown user={user} />
+          </div>
+        </div>
+      </header>
+    );
+  }
+
  return (
    <header
      className={cn(
@ -66,11 +100,11 @@ export const Header = ({ className, user, teams, ...props }: HeaderProps) => {

        <div className="flex flex-row items-center space-x-4 md:hidden">
          <button onClick={() => setIsCommandMenuOpen(true)}>
-            <SearchIcon className="h-6 w-6" />
+            <SearchIcon className="text-muted-foreground h-6 w-6" />
          </button>

          <button onClick={() => setIsHamburgerMenuOpen(true)}>
-            <MenuIcon className="h-6 w-6" />
+            <MenuIcon className="text-muted-foreground h-6 w-6" />
          </button>

          <CommandMenu open={isCommandMenuOpen} onOpenChange={setIsCommandMenuOpen} />
--- a/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
+++ b/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
@ -6,7 +6,7 @@ import { usePathname } from 'next/navigation';
 import { CheckCircle2, ChevronsUpDown, Plus, Settings2 } from 'lucide-react';
 import { signOut } from 'next-auth/react';

-import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { TEAM_MEMBER_ROLE_MAP, TEAM_URL_REGEX } from '@documenso/lib/constants/teams';
 import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
 import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
@ -71,6 +71,22 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
    return TEAM_MEMBER_ROLE_MAP[team.currentTeamMember.role];
  };

+  /**
+   * Formats the redirect URL so we can switch between documents and templates page
+   * seemlessly between teams and personal accounts.
+   */
+  const formatRedirectUrlOnSwitch = (teamUrl?: string) => {
+    const baseUrl = teamUrl ? `/t/${teamUrl}/` : '/';
+
+    const currentPathname = (pathname ?? '/').replace(TEAM_URL_REGEX, '');
+
+    if (currentPathname === '/templates') {
+      return `${baseUrl}templates`;
+    }
+
+    return baseUrl;
+  };
+
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
@ -100,7 +116,7 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
            <DropdownMenuLabel>Personal</DropdownMenuLabel>

            <DropdownMenuItem asChild>
-              <Link href="/">
+              <Link href={formatRedirectUrlOnSwitch()}>
                <AvatarWithText
                  avatarFallback={formatAvatarFallback()}
                  primaryText={user.name}
@ -152,7 +168,7 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp

            {teams.map((team) => (
              <DropdownMenuItem asChild key={team.id}>
-                <Link href={`/t/${team.url}`}>
+                <Link href={formatRedirectUrlOnSwitch(team.url)}>
                  <AvatarWithText
                    avatarFallback={formatAvatarFallback(team.name)}
                    primaryText={team.name}
--- a/apps/web/src/components/(dashboard)/layout/mobile-navigation.tsx
+++ b/apps/web/src/components/(dashboard)/layout/mobile-navigation.tsx
@ -42,12 +42,12 @@ export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigat
      href: '/settings/profile',
      text: 'Settings',
    },
-  ].filter(({ text, href }) => text !== 'Templates' || href === '/templates'); // Filter out templates for teams.
+  ];

  return (
    <Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>
      <SheetContent className="flex w-full max-w-[400px] flex-col">
-        <Link href="/" className="z-10" onClick={handleMenuItemClick}>
+        <Link href="/" onClick={handleMenuItemClick}>
          <Image
            src={LogoImage}
            alt="Documenso Logo"
--- a/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx
+++ b/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx
@ -0,0 +1,169 @@
+'use client';
+
+import Link from 'next/link';
+
+import {
+  CreditCard,
+  FileSpreadsheet,
+  Lock,
+  LogOut,
+  User as LucideUser,
+  Monitor,
+  Moon,
+  Palette,
+  Sun,
+  UserCog,
+} from 'lucide-react';
+import { signOut } from 'next-auth/react';
+import { useTheme } from 'next-themes';
+import { LuGithub } from 'react-icons/lu';
+
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
+import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import type { User } from '@documenso/prisma/client';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+
+export type ProfileDropdownProps = {
+  user: User;
+};
+
+export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
+  const { getFlag } = useFeatureFlags();
+  const { theme, setTheme } = useTheme();
+  const isUserAdmin = isAdmin(user);
+
+  const isBillingEnabled = getFlag('app_billing');
+
+  const avatarFallback = user.name
+    ? extractInitials(user.name)
+    : user.email.slice(0, 1).toUpperCase();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          title="Profile Dropdown"
+          className="relative h-10 w-10 rounded-full"
+        >
+          <Avatar className="h-10 w-10">
+            <AvatarFallback>{avatarFallback}</AvatarFallback>
+          </Avatar>
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent className="z-[60] w-56" align="end" forceMount>
+        <DropdownMenuLabel>Account</DropdownMenuLabel>
+
+        {isUserAdmin && (
+          <>
+            <DropdownMenuItem asChild>
+              <Link href="/admin" className="cursor-pointer">
+                <UserCog className="mr-2 h-4 w-4" />
+                Admin
+              </Link>
+            </DropdownMenuItem>
+
+            <DropdownMenuSeparator />
+          </>
+        )}
+
+        <DropdownMenuItem asChild>
+          <Link href="/settings/profile" className="cursor-pointer">
+            <LucideUser className="mr-2 h-4 w-4" />
+            Profile
+          </Link>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem asChild>
+          <Link href="/settings/security" className="cursor-pointer">
+            <Lock className="mr-2 h-4 w-4" />
+            Security
+          </Link>
+        </DropdownMenuItem>
+
+        {isBillingEnabled && (
+          <DropdownMenuItem asChild>
+            <Link href="/settings/billing" className="cursor-pointer">
+              <CreditCard className="mr-2 h-4 w-4" />
+              Billing
+            </Link>
+          </DropdownMenuItem>
+        )}
+
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link href="/templates" className="cursor-pointer">
+            <FileSpreadsheet className="mr-2 h-4 w-4" />
+            Templates
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <Palette className="mr-2 h-4 w-4" />
+            Themes
+          </DropdownMenuSubTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent className="z-[60]">
+              <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
+                <DropdownMenuRadioItem value="light">
+                  <Sun className="mr-2 h-4 w-4" /> Light
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="dark">
+                  <Moon className="mr-2 h-4 w-4" />
+                  Dark
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="system">
+                  <Monitor className="mr-2 h-4 w-4" />
+                  System
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuSubContent>
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link
+            href="https://github.com/documenso/documenso"
+            className="cursor-pointer"
+            target="_blank"
+          >
+            <LuGithub className="mr-2 h-4 w-4" />
+            Star on Github
+          </Link>
+        </DropdownMenuItem>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem
+          onSelect={() =>
+            void signOut({
+              callbackUrl: '/',
+            })
+          }
+        >
+          <LogOut className="mr-2 h-4 w-4" />
+          Sign Out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
--- a/apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx
+++ b/apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx
@ -19,6 +19,7 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
  const { getFlag } = useFeatureFlags();

  const isBillingEnabled = getFlag('app_billing');
+  const isTeamsEnabled = getFlag('app_teams');

  return (
    <div className={cn('flex flex-col gap-y-2', className)} {...props}>
@ -35,18 +36,20 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
        </Button>
      </Link>

-      <Link href="/settings/teams">
-        <Button
-          variant="ghost"
-          className={cn(
-            'w-full justify-start',
-            pathname?.startsWith('/settings/teams') && 'bg-secondary',
-          )}
-        >
-          <Users className="mr-2 h-5 w-5" />
-          Teams
-        </Button>
-      </Link>
+      {isTeamsEnabled && (
+        <Link href="/settings/teams">
+          <Button
+            variant="ghost"
+            className={cn(
+              'w-full justify-start',
+              pathname?.startsWith('/settings/teams') && 'bg-secondary',
+            )}
+          >
+            <Users className="mr-2 h-5 w-5" />
+            Teams
+          </Button>
+        </Link>
+      )}

      <Link href="/settings/webhooks">
        <Button
--- a/apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx
+++ b/apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx
@ -19,6 +19,7 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
  const { getFlag } = useFeatureFlags();

  const isBillingEnabled = getFlag('app_billing');
+  const isTeamsEnabled = getFlag('app_teams');

  return (
    <div
@ -38,18 +39,20 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
        </Button>
      </Link>

-      <Link href="/settings/teams">
-        <Button
-          variant="ghost"
-          className={cn(
-            'w-full justify-start',
-            pathname?.startsWith('/settings/teams') && 'bg-secondary',
-          )}
-        >
-          <Users className="mr-2 h-5 w-5" />
-          Teams
-        </Button>
-      </Link>
+      {isTeamsEnabled && (
+        <Link href="/settings/teams">
+          <Button
+            variant="ghost"
+            className={cn(
+              'w-full justify-start',
+              pathname?.startsWith('/settings/teams') && 'bg-secondary',
+            )}
+          >
+            <Users className="mr-2 h-5 w-5" />
+            Teams
+          </Button>
+        </Link>
+      )}

      <Link href="/settings/webhooks">
        <Button
--- a/apps/web/src/components/(teams)/dialogs/create-team-checkout-dialog.tsx
+++ b/apps/web/src/components/(teams)/dialogs/create-team-checkout-dialog.tsx
@ -158,6 +158,7 @@ export const CreateTeamCheckoutDialog = ({

              <Button
                type="submit"
+                disabled={selectedPrice.interval === 'yearly'}
                loading={isCreatingCheckout}
                onClick={async () =>
                  createCheckout({
@ -166,7 +167,7 @@ export const CreateTeamCheckoutDialog = ({
                  })
                }
              >
-                Checkout
+                {selectedPrice.interval === 'monthly' ? 'Checkout' : 'Coming soon'}
              </Button>
            </DialogFooter>
          </div>
--- a/apps/web/src/components/(teams)/dialogs/transfer-team-dialog.tsx
+++ b/apps/web/src/components/(teams)/dialogs/transfer-team-dialog.tsx
@ -238,7 +238,7 @@ export const TransferTeamDialog = ({
                <Alert variant="neutral">
                  <AlertDescription>
                    <ul className="list-outside list-disc space-y-2 pl-4">
-                      {IS_BILLING_ENABLED && (
+                      {IS_BILLING_ENABLED() && (
                        // Temporary removed.
                        // <li>
                        //   {form.getValues('clearPaymentMethods')
--- a/apps/web/src/components/(teams)/settings/layout/desktop-nav.tsx
+++ b/apps/web/src/components/(teams)/settings/layout/desktop-nav.tsx
@ -48,7 +48,7 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
        </Button>
      </Link>

-      {IS_BILLING_ENABLED && (
+      {IS_BILLING_ENABLED() && (
        <Link href={billingPath}>
          <Button
            variant="ghost"
--- a/apps/web/src/components/(teams)/settings/layout/mobile-nav.tsx
+++ b/apps/web/src/components/(teams)/settings/layout/mobile-nav.tsx
@ -56,7 +56,7 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
        </Button>
      </Link>

-      {IS_BILLING_ENABLED && (
+      {IS_BILLING_ENABLED() && (
        <Link href={billingPath}>
          <Button
            variant="ghost"
--- a/apps/web/src/components/forms/2fa/authenticator-app.tsx
+++ b/apps/web/src/components/forms/2fa/authenticator-app.tsx
@ -30,13 +30,11 @@ export const AuthenticatorApp = ({ isTwoFactorEnabled }: AuthenticatorAppProps)
      </div>

      <EnableAuthenticatorAppDialog
-        key={isEnableDialogOpen ? 'open' : 'closed'}
        open={isEnableDialogOpen}
        onOpenChange={(open) => !open && setModalState(null)}
      />

      <DisableAuthenticatorAppDialog
-        key={isDisableDialogOpen ? 'open' : 'closed'}
        open={isDisableDialogOpen}
        onOpenChange={(open) => !open && setModalState(null)}
      />
--- a/apps/web/src/components/forms/send-confirmation-email.tsx
+++ b/apps/web/src/components/forms/send-confirmation-email.tsx
@ -0,0 +1,95 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+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 { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const ZSendConfirmationEmailFormSchema = z.object({
+  email: z.string().email().min(1),
+});
+
+export type TSendConfirmationEmailFormSchema = z.infer<typeof ZSendConfirmationEmailFormSchema>;
+
+export type SendConfirmationEmailFormProps = {
+  className?: string;
+};
+
+export const SendConfirmationEmailForm = ({ className }: SendConfirmationEmailFormProps) => {
+  const { toast } = useToast();
+
+  const form = useForm<TSendConfirmationEmailFormSchema>({
+    values: {
+      email: '',
+    },
+    resolver: zodResolver(ZSendConfirmationEmailFormSchema),
+  });
+
+  const isSubmitting = form.formState.isSubmitting;
+
+  const { mutateAsync: sendConfirmationEmail } = trpc.profile.sendConfirmationEmail.useMutation();
+
+  const onFormSubmit = async ({ email }: TSendConfirmationEmailFormSchema) => {
+    try {
+      await sendConfirmationEmail({ email });
+
+      toast({
+        title: 'Confirmation email sent',
+        description:
+          'A confirmation email has been sent, and it should arrive in your inbox shortly.',
+        duration: 5000,
+      });
+
+      form.reset();
+    } catch (err) {
+      toast({
+        title: 'An error occurred while sending your confirmation email',
+        description: 'Please try again and make sure you enter the correct email address.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        className={cn('mt-6 flex w-full flex-col gap-y-4', className)}
+        onSubmit={form.handleSubmit(onFormSubmit)}
+      >
+        <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email address</FormLabel>
+                <FormControl>
+                  <Input type="email" {...field} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+
+          <FormMessage />
+
+          <Button size="lg" type="submit" disabled={isSubmitting} loading={isSubmitting}>
+            Send confirmation email
+          </Button>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};
--- a/apps/web/src/components/forms/signin.tsx
+++ b/apps/web/src/components/forms/signin.tsx
@ -2,6 +2,8 @@

 import { useState } from 'react';

+import { useRouter } from 'next/navigation';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
@ -38,6 +40,8 @@ const ERROR_MESSAGES: Partial<Record<keyof typeof ErrorCode, string>> = {
    'This account appears to be using a social login method, please sign in using that method',
  [ErrorCode.INCORRECT_TWO_FACTOR_CODE]: 'The two-factor authentication code provided is incorrect',
  [ErrorCode.INCORRECT_TWO_FACTOR_BACKUP_CODE]: 'The backup code provided is incorrect',
+  [ErrorCode.UNVERIFIED_EMAIL]:
+    'This account has not been verified. Please verify your account before signing in.',
 };

 const TwoFactorEnabledErrorCode = ErrorCode.TWO_FACTOR_MISSING_CREDENTIALS;
@ -63,6 +67,7 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
  const { toast } = useToast();
  const [isTwoFactorAuthenticationDialogOpen, setIsTwoFactorAuthenticationDialogOpen] =
    useState(false);
+  const router = useRouter();

  const [twoFactorAuthenticationMethod, setTwoFactorAuthenticationMethod] = useState<
    'totp' | 'backup'
@ -130,6 +135,17 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign

        const errorMessage = ERROR_MESSAGES[result.error];

+        if (result.error === ErrorCode.UNVERIFIED_EMAIL) {
+          router.push(`/unverified-account`);
+
+          toast({
+            title: 'Unable to sign in',
+            description: errorMessage ?? 'An unknown error occurred',
+          });
+
+          return;
+        }
+
        toast({
          variant: 'destructive',
          title: 'Unable to sign in',
--- a/apps/web/src/components/forms/signup.tsx
+++ b/apps/web/src/components/forms/signup.tsx
@ -1,5 +1,7 @@
 'use client';

+import { useRouter } from 'next/navigation';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
@ -55,6 +57,7 @@ export type SignUpFormProps = {
 export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: SignUpFormProps) => {
  const { toast } = useToast();
  const analytics = useAnalytics();
+  const router = useRouter();

  const form = useForm<TSignUpFormSchema>({
    values: {
@ -74,10 +77,13 @@ export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
    try {
      await signup({ name, email, password, signature });

-      await signIn('credentials', {
-        email,
-        password,
-        callbackUrl: SIGN_UP_REDIRECT_PATH,
+      router.push(`/unverified-account`);
+
+      toast({
+        title: 'Registration Successful',
+        description:
+          'You have successfully registered. Please verify your account by clicking on the link you received in the email.',
+        duration: 5000,
      });

      analytics.capture('App: User Sign Up', {