Merge pull request #143 from CodeForStartup/feat/send-mail

feat: config mail send

Author: luannguyenQV

README.md

@@ -33,26 +33,26 @@ turbo dev
 
 # Libraries
 
-- ReactJS  
-- TypeScript  
-- NextJS 14 - App router and server actions  
-- next-auth  
-- Prisma ORM  
-- Postgres  
-- Turborepo  
-- TailwindCSS  
-- shadcn  
-- next-themes  
-- Zod validation  
+- ReactJS
+- TypeScript
+- NextJS 14 - App router and server actions
+- next-auth
+- Prisma ORM
+- Postgres
+- Turborepo
+- TailwindCSS
+- shadcn
+- next-themes
+- Zod validation
 - React Form Hook
-- Tsup  
-- EditorJs  
-- react-toastify  
-- react-textarea-autosize  
-- lucide-react icon  
-- dayjs  
-- Eslint  
-- Husky  
+- Tsup
+- EditorJs
+- react-toastify
+- react-textarea-autosize
+- lucide-react icon
+- dayjs
+- Eslint
+- Husky
 - Prettier
 
 # Functions

apps/admin/@/molecules/nav/search-bar.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState } from "react"
 import { useRouter, useSearchParams } from "next/navigation"
 
+import { X } from "lucide-react"
 import { useTranslations } from "next-intl"
 
 import { Input } from "@/components/ui/input"
@@ -80,7 +81,7 @@ export default function SearchBar() {
                 variant="outline"
                 onClick={onClear}
               >
-                <i className="ri-close-line text-[20px]" />
+                <X />
               </Button>
               <Button
                 variant="default"

apps/admin/@/molecules/user/posts/post-meta.tsx

@@ -2,8 +2,8 @@
 import Link from "next/link"
 
 import dayjs from "dayjs"
+import { Avatar, AvatarFallback, AvatarImage } from "ui"
 
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { TPostItem } from "@/types/posts"
 
 export type PostMetaProps = {

apps/web/.env.example

@@ -0,0 +1,13 @@
+NEXTAUTH_SECRET=
+NEXTAUTH_URL=
+
+NEXT_PUBLIC_FRONTEND_URL=
+
+GITHUB_ID=
+GITHUB_SECRET=
+
+JWT_SECRET=
+
+NEXT_PUBLIC_FB_APP_ID=
+
+RESEND_AUDIENCE_ID=

apps/web/@/actions/auth/index.ts

@@ -1,9 +1,11 @@
 "use server"
 
-import bcrypt from "bcrypt"
+import bcryptjs from "bcryptjs"
 import { signIn, signOut } from "configs/auth"
 import { Prisma } from "database"
 import { createUser } from "database/src/users/queries"
+import { sendEmail } from "emails"
+import VerifyEmail from "emails/verify-email"
 
 import { redirect } from "@/utils/navigation"
 
@@ -33,15 +35,40 @@ export const signUp = async (
   try {
     // hash password
     const { email, password } = data
-    const hashedPassword = await bcrypt.hash(password, 10)
+    const hashedPassword = await bcryptjs.hash(password, 10)
 
     await createUser({
       data: {
         email,
         password: hashedPassword,
       },
     })
+
+    console.log("create user...successfully")
+
+    // create verification code
+    const token = crypto.randomUUID()
+    await prisma.verificationToken.create({
+      data: {
+        token, // 6 digits code
+        identifier: email,
+        expires: new Date(Date.now() + 1000 * 60 * 60 * 24), // 1 day
+      },
+    })
+
+    console.log("verification token...successfully")
+
+    // send email
+    await sendEmail({
+      email,
+      subject: "Welcome to Next Forum",
+      react: VerifyEmail({
+        token,
+        email,
+      }),
+    })
   } catch (error) {
+    console.error("signUp.error", error)
     if (error?.error?.code === "P2002") {
       return {
         formErrors: null,

apps/web/@/libs/resend/index.tsx

@@ -0,0 +1,30 @@
+import { Resend } from "resend"
+
+const resendApiKey = process.env.RESEND_API_KEY
+
+export const resend = resendApiKey ? new Resend(resendApiKey) : null
+
+export async function subscribe({ email, name }: { email: string; name?: string | null }) {
+  const audienceId = process.env.RESEND_AUDIENCE_ID
+
+  if (!audienceId) {
+    console.error("RESEND_AUDIENCE_ID is not set in the .env. Skipping.")
+    return
+  }
+
+  return await resend?.contacts.create({
+    email,
+    ...(name && {
+      firstName: name.split(" ")[0],
+      lastName: name.split(" ").slice(1).join(" "),
+    }),
+    audienceId: process.env.RESEND_AUDIENCE_ID as string,
+  })
+}
+
+export async function unsubscribe({ email }: { email: string }) {
+  return await resend?.contacts.remove({
+    email,
+    audienceId: process.env.RESEND_AUDIENCE_ID as string,
+  })
+}

apps/web/@/molecules/auth/sign-up/index.tsx

@@ -3,25 +3,18 @@
 import Link from "next/link"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { Prisma } from "database"
-import { GithubIcon } from "lucide-react"
 import { useTranslations } from "next-intl"
-import { useFormState } from "react-dom"
 import { useForm } from "react-hook-form"
 import { toast } from "react-toastify"
 import {
   Button,
-  Card,
-  CardContent,
-  CardFooter,
   Form,
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
   Input,
-  Label,
   Typography,
 } from "ui"
 import { z } from "zod"

apps/web/@/molecules/footer/theme-toggle.tsx

@@ -2,6 +2,7 @@
 
 import React from "react"
 
+import { MonitorDot, Moon, Sun } from "lucide-react"
 import { useTheme } from "next-themes"
 import { Button } from "ui"
 
@@ -19,21 +20,21 @@ const ThemeToggle: React.FC = () => {
         variant="link"
         className="hover:no-underline"
       >
-        <i className="ri-mac-line" />
+        <MonitorDot />
       </Button>
       <Button
         onClick={toggleTheme}
         variant="link"
         className="hover:no-underline"
       >
-        <i className="ri-sun-line" />
+        <Sun />
       </Button>
       <Button
         onClick={toggleTheme}
         variant="link"
         className="hover:no-underline"
       >
-        <i className="ri-moon-line" />
+        <Moon />
       </Button>
     </div>
   )

apps/web/@/molecules/nav/search-bar.tsx

@@ -3,8 +3,9 @@
 import { useEffect, useRef, useState } from "react"
 import { useRouter, useSearchParams } from "next/navigation"
 
+import { SquareX, X } from "lucide-react"
 import { useTranslations } from "next-intl"
-import { Button, cn, Input } from "ui"
+import { Button, Input } from "ui"
 
 export default function SearchBar() {
   const t = useTranslations()
@@ -71,13 +72,16 @@ export default function SearchBar() {
         <div className="absolute right-1 top-1 flex h-8 items-center">
           {searchTerm && (
             <>
-              <Button
-                className="h-8 w-8 border-none hover:bg-transparent"
-                variant="outline"
+              <button
+                className="h-8 w-8 border-none"
                 onClick={onClear}
               >
-                <i className="ri-close-line text-[20px]" />
-              </Button>
+                <X
+                  size={20}
+                  strokeWidth={2}
+                  color="black"
+                />
+              </button>
               <Button
                 variant="default"
                 onClick={onSearch}

apps/web/@/molecules/posts/post-detail/like-button/LikeButton.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { PostOnUserType, TPostItem } from "database"
+import { Heart } from "lucide-react"
 import { useTranslations } from "next-intl"
 import { Button, cn, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "ui"
 
@@ -35,11 +36,9 @@ const LikeButton: React.FC<LikeButtonProps> = ({ children, post, isLiked }: Like
                 "hover:border-stale-300 border-stale-800 flex h-12 w-12 items-center justify-center rounded-full border bg-white p-0 text-2xl hover:bg-slate-200"
               )}
             >
-              <i
-                className={cn("ri-heart-3-fill", {
-                  "text-red-500": isLiked,
-                  "text-gray-500 ": !isLiked,
-                })}
+              <Heart
+                fill={isLiked ? "tomato" : "gray"}
+                color={isLiked ? "tomato" : "gray"}
               />
             </Button>
           </TooltipTrigger>