Add stylized email using react-email

brendan-kellam · brendan-kellam · commit 10b464824f09 · 2025-02-18T11:27:43.000-08:00
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -7,7 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "test": "vitest"
+    "test": "vitest",
+    "dev:emails": "email dev --dir ./src/emails"
   },
   "dependencies": {
     "@auth/prisma-adapter": "^2.7.4",
@@ -56,6 +57,8 @@
     "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.4",
+    "@react-email/components": "^0.0.33",
+    "@react-email/render": "^1.0.5",
     "@replit/codemirror-lang-csharp": "^6.2.0",
     "@replit/codemirror-lang-nix": "^6.0.1",
     "@replit/codemirror-lang-solidity": "^6.0.2",
@@ -142,6 +145,7 @@
     "jsdom": "^25.0.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8",
+    "react-email": "3.0.3",
     "tailwindcss": "^3.4.1",
     "tsx": "^4.19.2",
     "typescript": "^5",
diff --git a/packages/web/src/app/[domain]/components/navigationMenu.tsx b/packages/web/src/app/[domain]/components/navigationMenu.tsx
@@ -2,15 +2,14 @@ import { Button } from "@/components/ui/button";
 import { NavigationMenu as NavigationMenuBase, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
 import Link from "next/link";
 import { Separator } from "@/components/ui/separator";
-import Image from "next/image";
-import logoDark from "@/public/sb_logo_dark_small.png";
-import logoLight from "@/public/sb_logo_light_small.png";
 import { SettingsDropdown } from "./settingsDropdown";
 import { GitHubLogoIcon, DiscordLogoIcon } from "@radix-ui/react-icons";
 import { redirect } from "next/navigation";
 import { OrgSelector } from "./orgSelector";
 import { getSubscriptionData } from "@/actions";
 import { isServiceError } from "@/lib/utils";
+import { SourcebotLogo } from "@/app/components/sourcebotLogo";
+
 const SOURCEBOT_DISCORD_URL = "https://discord.gg/6Fhp27x7Pb";
 const SOURCEBOT_GITHUB_URL = "https://github.com/sourcebot-dev/sourcebot";
 
@@ -31,17 +30,9 @@ export const NavigationMenu = async ({
                         href={`/${domain}`}
                         className="mr-3 cursor-pointer"
                     >
-                        <Image
-                            src={logoDark}
-                            className="h-11 w-auto hidden dark:block"
-                            alt={"Sourcebot logo"}
-                            priority={true}
-                        />
-                        <Image
-                            src={logoLight}
-                            className="h-11 w-auto block dark:hidden"
-                            alt={"Sourcebot logo"}
-                            priority={true}
+                        <SourcebotLogo
+                            className="h-11"
+                            size="small"
                         />
                     </Link>
 
diff --git a/packages/web/src/app/[domain]/components/payWall/paywallCard.tsx b/packages/web/src/app/[domain]/components/payWall/paywallCard.tsx
@@ -2,9 +2,7 @@ import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
 import { Check } from "lucide-react"
 import { EnterpriseContactUsButton } from "./enterpriseContactUsButton"
 import { CheckoutButton } from "./checkoutButton"
-import Image from "next/image";
-import logoDark from "@/public/sb_logo_dark_large.png";
-import logoLight from "@/public/sb_logo_light_large.png";
+import { SourcebotLogo } from "@/app/components/sourcebotLogo";
 
 const teamFeatures = [
   "Index hundreds of repos from multiple code hosts (GitHub, GitLab, Gerrit, Gitea, etc.). Self-hosted code sources supported",
@@ -24,17 +22,9 @@ export async function PaywallCard({ domain }: { domain: string }) {
   return (
     <div className="max-w-4xl mx-auto px-4 py-8">
       <div className="max-h-44 w-auto mb-4 flex justify-center">
-        <Image
-          src={logoDark}
-          className="h-18 md:h-40 w-auto hidden dark:block"
-          alt={"Sourcebot logo"}
-          priority={true}
-        />
-        <Image
-          src={logoLight}
-          className="h-18 md:h-40 w-auto block dark:hidden"
-          alt={"Sourcebot logo"}
-          priority={true}
+        <SourcebotLogo
+          className="h-18 md:h-40"
+          size="large"
         />
       </div>
       <h2 className="text-3xl font-bold text-center mb-8 text-primary">
diff --git a/packages/web/src/app/[domain]/page.tsx b/packages/web/src/app/[domain]/page.tsx
@@ -1,9 +1,6 @@
 import { listRepositories } from "@/lib/server/searchService";
 import { isServiceError } from "@/lib/utils";
-import Image from "next/image";
 import { Suspense } from "react";
-import logoDark from "@/public/sb_logo_dark_large.png";
-import logoLight from "@/public/sb_logo_light_large.png";
 import { NavigationMenu } from "./components/navigationMenu";
 import { RepositoryCarousel } from "./components/repositoryCarousel";
 import { SearchBar } from "./components/searchBar";
@@ -14,6 +11,7 @@ import Link from "next/link";
 import { getOrgFromDomain } from "@/data/org";
 import { PageNotFound } from "./components/pageNotFound";
 import { Footer } from "./components/footer";
+import { SourcebotLogo } from "../components/sourcebotLogo";
 
 
 export default async function Home({ params: { domain } }: { params: { domain: string } }) {
@@ -30,17 +28,8 @@ export default async function Home({ params: { domain } }: { params: { domain: s
             <UpgradeToast />
             <div className="flex flex-col justify-center items-center mt-8 mb-8 md:mt-18 w-full px-5">
                 <div className="max-h-44 w-auto">
-                    <Image
-                        src={logoDark}
-                        className="h-18 md:h-40 w-auto hidden dark:block"
-                        alt={"Sourcebot logo"}
-                        priority={true}
-                    />
-                    <Image
-                        src={logoLight}
-                        className="h-18 md:h-40 w-auto block dark:hidden"
-                        alt={"Sourcebot logo"}
-                        priority={true}
+                    <SourcebotLogo
+                        className="h-18 md:h-40 w-auto"
                     />
                 </div>
                 <SearchBar
diff --git a/packages/web/src/app/components/sourcebotLogo.tsx b/packages/web/src/app/components/sourcebotLogo.tsx
@@ -0,0 +1,30 @@
+import logoDarkLarge from "@/public/sb_logo_dark_large.png";
+import logoLightLarge from "@/public/sb_logo_light_large.png";
+import logoDarkSmall from "@/public/sb_logo_dark_small.png";
+import logoLightSmall from "@/public/sb_logo_light_small.png";
+import Image from "next/image";
+import { cn } from "@/lib/utils";
+
+interface SourcebotLogoProps {
+    className?: string;
+    size?: "small" | "large";
+}
+
+export const SourcebotLogo = ({ className, size = "large" }: SourcebotLogoProps) => {
+    return (
+        <>
+            <Image
+                src={size === "large" ? logoDarkLarge : logoDarkSmall}
+                className={cn("h-16 w-auto hidden dark:block", className)}
+                alt={"Sourcebot logo"}
+                priority={true}
+            />
+            <Image
+                src={size === "large" ? logoLightLarge : logoLightSmall}
+                className={cn("h-16 w-auto block dark:hidden", className)}
+                alt={"Sourcebot logo"}
+                priority={true}
+            />
+        </>
+    )
+}
diff --git a/packages/web/src/app/login/components/credentialsForm.tsx b/packages/web/src/app/login/components/credentialsForm.tsx
@@ -8,12 +8,15 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { signIn } from "next-auth/react";
 import { verifyCredentialsRequestSchema } from "@/lib/schemas";
+import { useState } from "react";
+import { Loader2 } from "lucide-react";
 
 interface CredentialsFormProps {
     callbackUrl?: string;
 }
 
 export const CredentialsForm = ({ callbackUrl }: CredentialsFormProps) => {
+    const [isLoading, setIsLoading] = useState(false);
     const form = useForm<z.infer<typeof verifyCredentialsRequestSchema>>({
         resolver: zodResolver(verifyCredentialsRequestSchema),
         defaultValues: {
@@ -23,10 +26,14 @@ export const CredentialsForm = ({ callbackUrl }: CredentialsFormProps) => {
     });
 
     const onSubmit = (values: z.infer<typeof verifyCredentialsRequestSchema>) => {
+        setIsLoading(true);
         signIn("credentials", {
             email: values.email,
             password: values.password,
             redirectTo: callbackUrl ?? "/"
+        })
+        .finally(() => {
+            setIsLoading(false);
         });
     }
 
@@ -66,7 +73,9 @@ export const CredentialsForm = ({ callbackUrl }: CredentialsFormProps) => {
                     type="submit"
                     className="w-full"
                     variant="outline"
+                    disabled={isLoading}
                 >
+                    {isLoading ? <Loader2 className="animate-spin mr-2" /> : ""}
                     Sign in with credentials
                 </Button>
             </form>
diff --git a/packages/web/src/app/login/components/loginForm.tsx b/packages/web/src/app/login/components/loginForm.tsx
@@ -1,8 +1,6 @@
 'use client';
 
 import { Button } from "@/components/ui/button";
-import logoDark from "@/public/sb_logo_dark_large.png";
-import logoLight from "@/public/sb_logo_light_large.png";
 import googleLogo from "@/public/google.svg";
 import Image from "next/image";
 import { signIn } from "next-auth/react";
@@ -11,6 +9,7 @@ import { Card } from "@/components/ui/card";
 import { cn, getCodeHostIcon } from "@/lib/utils";
 import { MagicLinkForm } from "./magicLinkForm";
 import { CredentialsForm } from "./credentialsForm";
+import { SourcebotLogo } from "@/app/components/sourcebotLogo";
 
 interface LoginFormProps {
     callbackUrl?: string;
@@ -45,20 +44,9 @@ export const LoginForm = ({ callbackUrl, error, enabledMethods }: LoginFormProps
     return (
         <div className="flex flex-col items-center justify-center">
             <div className="mb-6 flex flex-col items-center">
-                <div>
-                    <Image
-                        src={logoDark}
-                        className="h-16 w-auto hidden dark:block"
-                        alt={"Sourcebot logo"}
-                        priority={true}
-                    />
-                    <Image
-                        src={logoLight}
-                        className="h-16 w-auto block dark:hidden"
-                        alt={"Sourcebot logo"}
-                        priority={true}
-                    />
-                </div>
+                <SourcebotLogo
+                    className="h-16"
+                />
                 <h2 className="text-lg font-bold">Sign in to your account</h2>
             </div>
             <Card className="flex flex-col items-center border p-12 rounded-lg gap-6 w-[500px] bg-background">
@@ -73,6 +61,7 @@ export const LoginForm = ({ callbackUrl, error, enabledMethods }: LoginFormProps
                             <>
                                 {enabledMethods.github && (
                                     <ProviderButton
+                                        key="github"
                                         name="GitHub"
                                         logo={getCodeHostIcon("github")!}
                                         onClick={() => {
@@ -82,6 +71,7 @@ export const LoginForm = ({ callbackUrl, error, enabledMethods }: LoginFormProps
                                 )}
                                 {enabledMethods.google && (
                                     <ProviderButton
+                                        key="google"
                                         name="Google"
                                         logo={{ src: googleLogo }}
                                         onClick={() => {
@@ -92,10 +82,10 @@ export const LoginForm = ({ callbackUrl, error, enabledMethods }: LoginFormProps
                             </>
                         ] : []),
                         ...(enabledMethods.magicLink ? [
-                            <MagicLinkForm callbackUrl={callbackUrl} />
+                            <MagicLinkForm key="magic-link" callbackUrl={callbackUrl} />
                         ] : []),
                         ...(enabledMethods.credentials ? [
-                            <CredentialsForm callbackUrl={callbackUrl} />
+                            <CredentialsForm key="credentials" callbackUrl={callbackUrl} />
                         ] : [])
                     ]}
                 />
@@ -132,7 +122,7 @@ const DividerSet = ({ children }: { children: React.ReactNode[] }) => {
         return (
             <Fragment key={index}>
                 {child}
-                {index < children.length - 1 && <Divider />}
+                {index < children.length - 1 && <Divider key={`divider-${index}`} />}
             </Fragment>
         )
     })
diff --git a/packages/web/src/app/login/components/magicLinkForm.tsx b/packages/web/src/app/login/components/magicLinkForm.tsx
@@ -7,8 +7,8 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { signIn } from "next-auth/react";
-
-
+import { useState } from "react";
+import { Loader2 } from "lucide-react";
 const magicLinkSchema = z.object({
     email: z.string().email(),
 });
@@ -18,6 +18,7 @@ interface MagicLinkFormProps {
 }   
 
 export const MagicLinkForm = ({ callbackUrl }: MagicLinkFormProps) => {
+    const [isLoading, setIsLoading] = useState(false);
     const magicLinkForm = useForm<z.infer<typeof magicLinkSchema>>({
         resolver: zodResolver(magicLinkSchema),
         defaultValues: {
@@ -26,7 +27,11 @@ export const MagicLinkForm = ({ callbackUrl }: MagicLinkFormProps) => {
     });
 
     const onSignIn = (values: z.infer<typeof magicLinkSchema>) => {
-        signIn("nodemailer", { email: values.email, redirectTo: callbackUrl ?? "/" });
+        setIsLoading(true);
+        signIn("nodemailer", { email: values.email, redirectTo: callbackUrl ?? "/" })
+            .finally(() => {
+                setIsLoading(false);
+            });
     }
 
     return (
@@ -54,7 +59,9 @@ export const MagicLinkForm = ({ callbackUrl }: MagicLinkFormProps) => {
                     type="submit"
                     className="w-full"
                     variant="outline"
+                    disabled={isLoading}
                 >
+                    {isLoading ? <Loader2 className="animate-spin mr-2" /> : ""}
                     Sign in with magic link
                 </Button>
             </form>
diff --git a/packages/web/src/app/login/verify/page.tsx b/packages/web/src/app/login/verify/page.tsx
@@ -0,0 +1,17 @@
+import { SourcebotLogo } from "@/app/components/sourcebotLogo";
+
+export default function VerifyPage() {
+
+    return (
+        <div className="flex flex-col items-center justify-center h-screen">
+            <SourcebotLogo
+                className="mb-2 h-16"
+                size="small"
+            />
+            <h1 className="text-2xl font-bold mb-2">Verify your email</h1>
+            <p className="text-sm text-muted-foreground">
+                {`We've sent a magic link to your email. Please check your inbox.`}
+            </p>
+        </div>
+    )
+}
diff --git a/packages/web/src/app/onboard/components/orgCreateForm.tsx b/packages/web/src/app/onboard/components/orgCreateForm.tsx
@@ -8,10 +8,8 @@ import { isServiceError } from "@/lib/utils"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 import { zodResolver } from "@hookform/resolvers/zod"
-import logoDark from "@/public/sb_logo_dark_large.png";
-import logoLight from "@/public/sb_logo_light_large.png";
-import Image from "next/image";
 import { useState } from "react";
+import { SourcebotLogo } from "@/app/components/sourcebotLogo"
 
 const onboardingFormSchema = z.object({
     name: z.string()
@@ -64,17 +62,8 @@ export function OrgCreateForm({ setOrgCreateData }: OrgCreateFormProps) {
     return (
         <div className="space-y-6">
             <div className="flex justify-center">
-                <Image
-                    src={logoDark}
-                    className="h-16 w-auto hidden dark:block"
-                    alt={"Sourcebot logo"}
-                    priority={true}
-                />
-                <Image
-                    src={logoLight}
-                    className="h-16 w-auto block dark:hidden"
-                    alt={"Sourcebot logo"}
-                    priority={true}
+                <SourcebotLogo
+                    className="h-16"
                 />
             </div>
             <h1 className="text-2xl font-bold">Let&apos;s create your organization</h1>
diff --git a/packages/web/src/app/onboard/components/trialInfoCard.tsx b/packages/web/src/app/onboard/components/trialInfoCard.tsx
diff --git a/packages/web/src/app/redeem/page.tsx b/packages/web/src/app/redeem/page.tsx
diff --git a/packages/web/src/auth.ts b/packages/web/src/auth.ts
diff --git a/packages/web/src/emails/magicLink.tsx b/packages/web/src/emails/magicLink.tsx
diff --git a/yarn.lock b/yarn.lock
