Magic links (#199)

* wip on magic link support

* Switch to nodemailer / resend for transactional mail

* Further cleanup

* Add stylized email using react-email

* fix

Author: brendan-kellam

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",
@@ -107,6 +110,7 @@
     "next": "14.2.21",
     "next-auth": "^5.0.0-beta.25",
     "next-themes": "^0.3.0",
+    "nodemailer": "^6.10.0",
     "posthog-js": "^1.161.5",
     "pretty-bytes": "^6.1.1",
     "psl": "^1.15.0",
@@ -128,6 +132,7 @@
   "devDependencies": {
     "@types/bcrypt": "^5.0.2",
     "@types/node": "^20",
+    "@types/nodemailer": "^6.4.17",
     "@types/psl": "^1.1.3",
     "@types/react": "^18",
     "@types/react-dom": "^18",
@@ -140,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",

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>
 

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">

packages/web/src/app/[domain]/connections/layout.tsx

@@ -11,7 +11,7 @@ export default function Layout({
     return (
         <div className="min-h-screen flex flex-col">
             <NavigationMenu domain={domain} />
-            <main className="flex-grow flex justify-center p-4 bg-[#fafafa] dark:bg-background relative">
+            <main className="flex-grow flex justify-center p-4 bg-backgroundSecondary relative">
                 <div className="w-full max-w-6xl rounded-lg p-6">{children}</div>
             </main>
         </div>

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

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}
+            />
+        </>
+    )
+}

packages/web/src/app/globals.css

@@ -5,6 +5,7 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
+    --background-secondary: 0, 0%, 98%;
     --foreground: 222.2 84% 4.9%;
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
@@ -42,6 +43,7 @@
 
   .dark {
     --background: 222.2 84% 4.9%;
+    --background-secondary: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;

packages/web/src/app/login/components/credentialsForm.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { Button } from "@/components/ui/button";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { useForm } from "react-hook-form";
+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: {
+            email: "",
+            password: "",
+        },
+    });
+
+    const onSubmit = (values: z.infer<typeof verifyCredentialsRequestSchema>) => {
+        setIsLoading(true);
+        signIn("credentials", {
+            email: values.email,
+            password: values.password,
+            redirectTo: callbackUrl ?? "/"
+        })
+        .finally(() => {
+            setIsLoading(false);
+        });
+    }
+
+    return (
+        <Form {...form}>
+            <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="w-full"
+            >
+                <FormField
+                    control={form.control}
+                    name="email"
+                    render={({ field }) => (
+                        <FormItem className="mb-4">
+                            <FormLabel>Email</FormLabel>
+                            <FormControl>
+                                <Input placeholder="[email protected]" {...field} />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+                <FormField
+                    control={form.control}
+                    name="password"
+                    render={({ field }) => (
+                        <FormItem className="mb-8">
+                            <FormLabel>Password</FormLabel>
+                            <FormControl>
+                                <Input type="password" {...field} />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+                <Button
+                    type="submit"
+                    className="w-full"
+                    variant="outline"
+                    disabled={isLoading}
+                >
+                    {isLoading ? <Loader2 className="animate-spin mr-2" /> : ""}
+                    Sign in with credentials
+                </Button>
+            </form>
+        </Form>
+    );
+}