make homepage as server component

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>

frontend/emails/VerificationEmail.tsx

@@ -26,7 +26,7 @@ export default function VerificationEmail({
         <title>Verification Code</title>
         <header className="flex items-center justify-center text-xl my-6 align-middle font-sans font-bold antialiased">
           <AudioLines className="mr-2 inline" />
-          Connect <span className="text-sky-400/100"> Friends</span>
+          Meet <span className="text-sky-400/100"> ChillChat</span>
         </header>
         <Font
           fontFamily="Roboto"

frontend/src/actions/user.ts

@@ -1,8 +1,9 @@
-"use server";
-
 import { db } from "@/lib/db";
+import { User } from "@prisma/client";
 
-export async function getUserByIdentifier(identifier: string) {
+export async function getUserByIdentifier(
+  identifier: string
+): Promise<User | null> {
   try {
     const user = await db.user.findFirst({
       where: {
@@ -16,7 +17,7 @@ export async function getUserByIdentifier(identifier: string) {
   }
 }
 
-export async function getUserById(id: string) {
+export async function getUserById(id: string): Promise<User | null> {
   try {
     const User = await db.user.findUnique({
       where: {

frontend/src/app/page.tsx

@@ -13,7 +13,7 @@ export default function Home() {
       <Navbar />
       <div className="flex flex-col items-center text-center absolute">
         <div
-          className={`min-h-10vh text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 cursor-pointer animate-fadeIn my-5`}
+          className={`min-h-10vh text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 cursor-pointer my-5`}
         >
           Miss <FlipWords words={words} />
           ? <br /> All in one Website for Meet

frontend/src/auth.config.ts

@@ -3,17 +3,33 @@ import Credentials from "next-auth/providers/credentials";
 import Google from "next-auth/providers/google";
 import { signInSchema } from "./schemas/signinSchema";
 import { getUserByIdentifier } from "./actions/user";
+import bcrypt from "bcryptjs";
 
 export default {
   providers: [
+    Google({
+      clientId: process.env.GOOGLE_CLIENT_ID || "",
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET || "",
+    }),
     Credentials({
-      async authorize(credentials: any): Promise<any> {
+      async authorize(credentials): Promise<any> {
         const validateFields = signInSchema.safeParse(credentials);
 
         if (validateFields.success) {
           try {
-            const user = await getUserByIdentifier(credentials.identifier);
-            return user;
+            const user = await getUserByIdentifier(
+              validateFields.data.identifier
+            );
+            if (!user || !user.password) return null;
+            const passwordMatch = await bcrypt.compare(
+              validateFields.data.password,
+              user.password
+            );
+
+            if (passwordMatch) {
+              return user;
+            }
+            return null;
           } catch (error) {
             throw new Error("Error in authorization" + error);
           }
@@ -23,9 +39,5 @@ export default {
         }
       },
     }),
-    Google({
-      clientId: process.env.GOOGLE_CLIENT_ID || "",
-      clientSecret: process.env.GOOGLE_CLIENT_SECRET || "",
-    }),
   ],
 } satisfies NextAuthConfig;

frontend/src/auth.ts

@@ -17,15 +17,16 @@ export const {
   ...authConfig,
   callbacks: {
     async signIn({ account, user }) {
-      if (account?.provider === "google") {
-        // return Boolean(user.is_verified && user.email?.endsWith("@gmail.com"));
-        return true;
-      }
+      // if (account?.provider === "google") {
+      // return Boolean(user.is_verified && user.email?.endsWith("@gmail.com"));
+      // return true;
+      // }
+      if (account?.provider !== "credentials") return true;
+
       const existingUser = await getUserById(user.id!);
       if (!existingUser || !existingUser.is_verified) {
         return false;
       }
-
       return true;
     },
     async jwt({ token, user }) {

frontend/src/components/ChatRoomProfileSction.tsx

@@ -53,7 +53,7 @@ function ChatRoomProfileSction() {
         </Button>
         <footer className="flex items-center justify-center text-xl my-6 align-middle font-sans font-bold antialiased">
           <AudioLines className="mr-2 inline" />
-          Connect <span className="text-sky-400/100"> Friends</span>
+          Meet <span className="text-sky-400/100"> ChillChat</span>
         </footer>
       </div>
     </div>

frontend/src/components/Icon-card-button.tsx

@@ -1,16 +1,13 @@
-"use client";
-
 import React from "react";
 import functions from "@/app/data/functions";
 import Link from "next/link";
-import { useSession } from "next-auth/react";
 import { PinContainer } from "./ui/3d-pin";
 import { BackgroundGradient } from "./ui/background-gradient";
 import { Meteors } from "./ui/meteors";
+import { currentUser } from "@/lib/auth";
 
-const IconCardButton = () => {
-  const session = useSession();
-  const user = session.data?.user;
+const IconCardButton = async () => {
+  const user = await currentUser();
   return functions.map((f, i) => (
     <Link key={i} href={user ? f.link : "/api/auth/login"} passHref>
       <PinContainer title={f.description}>

frontend/src/components/JoinRoomForm.tsx

@@ -1,20 +1,13 @@
-"use client";
-
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { useSession } from "next-auth/react";
-import { Skeleton } from "@/components/ui/skeleton";
 import RoomIdForm from "./RoomIdForm";
 import SignInForm from "./SignInForm";
 import SignupForm from "./SignupForm";
+import { currentUser } from "@/lib/auth";
 
-function JoinRoomForm() {
-  const session = useSession();
-  const user = session.data?.user;
-
-  return session.status === "loading" ? (
-    <Skeleton className="mx-5 sm:w-[400px] w-[350px] flex justify-center items-center lg:mb-96 sm:mb-10 h-[400px] bg-secondary-foreground" />
-  ) : (
-    <div className="mx-5 sm:w-[400px] w-[350px] flex flex-col justify-center items-center lg:mb-96 sm:mb-10 ">
+async function JoinRoomForm() {
+  const user = await currentUser();
+  return (
+    <div className="mx-5 sm:w-[400px] md:w-[500px] w-[350px] flex flex-col justify-center items-center lg:mb-96 sm:mb-10 ">
       {user ? (
         <RoomIdForm />
       ) : (

frontend/src/components/LogoutButton.tsx

@@ -2,18 +2,9 @@
 
 import React from "react";
 import { Button } from "./ui/button";
-import { useSession } from "next-auth/react";
-import { Skeleton } from "@/components/ui/skeleton";
 import { signOut } from "next-auth/react";
 
-function LogoutButton() {
-  const session = useSession();
-  const user = session.data?.user;
-
-  if (session.status === "loading") {
-    return <Skeleton className="relative h-9 w-20 bg-secondary-foreground" />;
-  }
-
+function LogoutButton(user: { user: any }) {
   if (!user) {
     return null;
   }

frontend/src/components/Navbar.tsx

@@ -1,42 +1,39 @@
-"use client";
-
 import React from "react";
 import { AudioLines, ArrowLeftRightIcon } from "lucide-react";
-import { User } from "@/type";
 import UserAvatar from "./UserAvatar";
-import { useSession } from "next-auth/react";
 import LogoutButton from "./LogoutButton";
+import { currentUser } from "@/lib/auth";
+import { User } from "@prisma/client";
 
 export interface NavbarProps {
   remoteUser?: User | undefined | null;
   remoteSocketId?: string | undefined | null;
 }
 
-const Navbar: React.FC<NavbarProps> = (props) => {
+const Navbar: React.FC<NavbarProps> = async (props) => {
   const { remoteUser, remoteSocketId } = props;
-  const session = useSession();
-  const currentUser = session.data?.user;
+  const user = await currentUser();
 
   return (
     <nav className="flex items-center justify-between mx-10 mt-2">
       <header className="flex items-center text-xl align-middle font-sans font-bold antialiased relative">
         <AudioLines className="mr-2 inline" />
-        Connect <span className="text-sky-400/100"> Friends</span>
+        Meet <span className="text-sky-400/100"> ChillChat</span>
       </header>
-      {currentUser && remoteSocketId && (
+      {user && remoteSocketId && (
         <div>
           <div className="mx-5 mt-4 flex items-center text-white">
             <UserAvatar
-              username={currentUser?.name || currentUser.email || "Someone"}
-              src={currentUser?.image || ""}
+              username={user?.fullname || user.email || "Someone"}
+              src={user?.profile_image || ""}
               height={40}
               width={40}
             />
             <ArrowLeftRightIcon fontSize={20} />
             {remoteUser ? (
               <UserAvatar
-                username={remoteUser?.name || "Someone"}
-                src={remoteUser?.picture || ""}
+                username={remoteUser?.username || "Someone"}
+                src={remoteUser?.profile_image || ""}
                 height={40}
                 width={40}
               />
@@ -48,15 +45,15 @@ const Navbar: React.FC<NavbarProps> = (props) => {
       )}
 
       <div className="mt-4 flex space-x-4">
-        {currentUser && (
+        {user && (
           <>
             <UserAvatar
-              username={currentUser?.name || currentUser?.email || "Someone"}
-              src={currentUser?.image || ""}
+              username={user?.username || user?.email || "Someone"}
+              src={user?.profile_image || ""}
               height={40}
               width={40}
             />
-            <LogoutButton />
+            <LogoutButton user={user} />
           </>
         )}
       </div>

frontend/src/components/RoomIdForm.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -33,12 +35,13 @@ function RoomIdForm() {
       color={["#A07CFE", "#FE8FB5", "#FFBE7B"]}
       duration={7}
       borderWidth={4}
+      className="w-full"
     >
       {" "}
       <Form {...roomForm}>
         <form
           onSubmit={roomForm.handleSubmit(onRoomFormSubmit)}
-          className="w-full p-8 space-y-8 bg-secondary rounded-lg shadow-md"
+          className=" p-8 space-y-8 rounded-lg shadow-md"
         >
           <FormField
             control={roomForm.control}

frontend/src/components/ui/background-gradient.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import React from "react";
 import { motion } from "framer-motion";
 import { cn } from "@/lib/utils";

frontend/src/components/ui/form.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";

frontend/src/components/ui/meteors.tsx

@@ -1,3 +1,4 @@
+"use client";
 
 import { cn } from "@/lib/utils";
 import React from "react";

frontend/src/lib/auth.ts

@@ -0,0 +1,7 @@
+import { auth } from "@/auth";
+
+export async function currentUser() {
+  const session = await auth();
+  const user = session?.user;
+  return user;
+}

frontend/tailwind.config.ts

@@ -67,11 +67,7 @@ const config = {
           foreground: "hsl(var(--hover-foreground))",
         },
       },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
+
       keyframes: {
         "shine-pulse": {
           "0%": {