Added google provider and some UI-responsiveness changes

Video 131/actions/useractions.js

@@ -9,7 +9,7 @@ import User from "@/models/User"
 export const initiate = async (amount, to_username, paymentform) => {
     await connectDb()
     // fetch the secret of the user who is getting the payment 
-    let user = await User.findOne({username: to_username})
+    let user = await User.findOne({ username: to_username })
     const secret = user.razorpaysecret
 
     var instance = new Razorpay({ key_id: user.razorpayid, key_secret: secret })
@@ -24,7 +24,7 @@ export const initiate = async (amount, to_username, paymentform) => {
     let x = await instance.orders.create(options)
 
     // create a payment object which shows a pending payment in the database
-    await Payment.create({ oid: x.id, amount: amount/100, to_user: to_username, name: paymentform.name, message: paymentform.message })
+    await Payment.create({ oid: x.id, amount: amount / 100, to_user: to_username, name: paymentform.name, message: paymentform.message })
 
     return x
 
@@ -41,8 +41,8 @@ export const fetchuser = async (username) => {
 export const fetchpayments = async (username) => {
     await connectDb()
     // find all payments sorted by decreasing order of amount and flatten object ids
-    let p = await Payment.find({ to_user: username, done:true }).sort({ amount: -1 }).limit(10).lean()
-    return p
+    let p = await Payment.find({ to_user: username, done: true }).sort({ amount: -1 }).limit(10).lean()
+    return JSON.parse(JSON.stringify(p))
 }
 
 export const updateProfile = async (data, oldusername) => {
@@ -54,16 +54,16 @@ export const updateProfile = async (data, oldusername) => {
         let u = await User.findOne({ username: ndata.username })
         if (u) {
             return { error: "Username already exists" }
-        }   
-        await User.updateOne({email: ndata.email}, ndata)
+        }
+        await User.updateOne({ email: ndata.email }, ndata)
         // Now update all the usernames in the Payments table 
-        await Payment.updateMany({to_user: oldusername}, {to_user: ndata.username})
-        
+        await Payment.updateMany({ to_user: oldusername }, { to_user: ndata.username })
+
     }
-    else{
+    else {
+
 
-
-        await User.updateOne({email: ndata.email}, ndata)
+        await User.updateOne({ email: ndata.email }, ndata)
     }
 
 

Video 131/app/api/auth/[...nextauth]/route.js

@@ -1,22 +1,26 @@
 import NextAuth from 'next-auth'
 // import AppleProvider from 'next-auth/providers/apple'
 // import FacebookProvider from 'next-auth/providers/facebook'
-// import GoogleProvider from 'next-auth/providers/google'
+import GoogleProvider from 'next-auth/providers/google'
 // import EmailProvider from 'next-auth/providers/email'
 import GitHubProvider from "next-auth/providers/github";
 import mongoose from "mongoose";
 import connectDb from '@/db/connectDb';
 import User from '@/models/User';
 import Payment from '@/models/Payment';
-
 
-export const authoptions =  NextAuth({
-    providers: [
-      // OAuth authentication providers...
-      GitHubProvider({
-        clientId: process.env.GITHUB_ID,
-        clientSecret: process.env.GITHUB_SECRET
-      }),
+
+export const authoptions = NextAuth({
+  providers: [
+    // OAuth authentication providers...
+    GitHubProvider({
+      clientId: process.env.GITHUB_ID,
+      clientSecret: process.env.GITHUB_SECRET
+    }),
+    GoogleProvider({
+      clientId: process.env.GOOGLE_ID,
+      clientSecret: process.env.GOOGLE_SECRET,
+    }),
     //   AppleProvider({
     //     clientId: process.env.APPLE_ID,
     //     clientSecret: process.env.APPLE_SECRET
@@ -34,30 +38,32 @@ export const authoptions =  NextAuth({
     //     server: process.env.MAIL_SERVER,
     //     from: 'NextAuth.js <[email protected]>'
     //   }),
-    ],
-    callbacks: {
-      async signIn({ user, account, profile, email, credentials }) {
-         if(account.provider == "github") { 
-          await connectDb()
-          // Check if the user already exists in the database
-          const currentUser =  await User.findOne({email: email}) 
-          if(!currentUser){
-            // Create a new user
-             const newUser = await User.create({
-              email: user.email, 
-              username: user.email.split("@")[0], 
-            })   
-          } 
-          return true
-         }
-      },
-
-      async session({ session, user, token }) {
-        const dbUser = await User.findOne({email: session.user.email})
+  ],
+  callbacks: {
+    async signIn({ user, account, profile, email, credentials }) {
+      if (account.provider == "github" || account.provider === 'google') {
+        await connectDb()
+        // Check if the user already exists in the database
+        const currentUser = await User.findOne({ email: user.email })
+        if (!currentUser) {
+          // Create a new user
+          const newUser = await User.create({
+            email: user.email,
+            username: user.email.split("@")[0],
+          })
+        }
+        return true
+      }
+    },
+
+    async session({ session, user, token }) {
+      const dbUser = await User.findOne({ email: session.user.email })
+      if (dbUser) {
         session.user.name = dbUser.username
-        return session
-      },
-    } 
-  })
+      }
+      return session
+    },
+  }
+})
 
-  export { authoptions as GET, authoptions as POST}
+export { authoptions as GET, authoptions as POST }

Video 131/app/dashboard/page.js

@@ -1,15 +1,24 @@
 
-import Dashboard from '@/components/Dashboard'
+'use client'
+import React, { useEffect } from 'react'
+import { useSession, signIn, signOut } from "next-auth/react"
+import { useRouter } from 'next/navigation'
+import Dashboard from '@/components/Dashboard.js'
 
 const DashboardPage = () => {
+    const { data: session } = useSession()
+    const router = useRouter()
+    useEffect(() => {
+        if (!session) {
+            router.push('/login')
+        }
+    }, [session, router])
     return (
-        <Dashboard/>
+        <div>
+            <Dashboard />
+        </div>
     )
 }
 
 export default DashboardPage
 
-export const metadata = {
-    title: "Dashboard - Get Me A Chai",
-  }
-

Video 131/app/login/page.js

@@ -1,29 +1,26 @@
-"use client"
-import React, {useEffect} from 'react'
+'use client'
+import React, { useEffect } from 'react'
 import { useSession, signIn, signOut } from "next-auth/react"
 import { useRouter } from 'next/navigation'
 
 const Login = () => {
   const { data: session } = useSession()
   const router = useRouter()
-
   useEffect(() => {
-    document.title = "Login - Get Me A Chai" 
-    console.log(session)
     if (session) {
       router.push('/dashboard')
     }
-  }, [])
-
+  }, [session, router])
   return (
-    <div className='text-white py-14 container mx-auto'>
-      <h1 className='text-center font-bold text-3xl'>Login to Get Started</h1>
-
-      <div className="flex flex-col gap-2 min-h-screen items-center  p-10">
+    <>
+      <div className='text-white container mx-auto py-14'>
+        <h1 className='text-center font-bold text-2xl'>Login/SignUp to GetMeAChai to get your fans to support you</h1>
+      </div>
+      <div className="flex flex-col gap-2 min-h-screen items-center p-10">
 
 
-        <button
-          className="flex items-center w-64 bg-slate-50 text-black border border-gray-300 rounded-lg shadow-md max-w-xs px-6 py-2 text-sm font-medium  hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+        <button onClick={() => signIn('google')}
+          className=" cursor-pointer flex items-center w-64 bg-slate-50 text-black border border-gray-300 rounded-lg shadow-md max-w-xs px-6 py-2 text-sm font-medium  hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
           <svg className="h-6 w-6 mr-2" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
             viewBox="-0.5 0 48 48" version="1.1">
 
@@ -51,7 +48,7 @@ const Login = () => {
 
 
         <button
-          className="flex items-center w-64 bg-slate-50 text-black border border-gray-300 rounded-lg shadow-md max-w-xs px-6 py-2 text-sm font-medium  hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+          className=" cursor-pointer flex items-center w-64 bg-slate-50 text-black border border-gray-300 rounded-lg shadow-md max-w-xs px-6 py-2 text-sm font-medium  hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
           <svg className="h-6 w-6 mr-2" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
             viewBox="0 -2 44 44" version="1.1">
             <g id="Icons" stroke="none" width="1" fill="none" fillRule="evenodd">
@@ -68,7 +65,7 @@ const Login = () => {
 
 
         <button
-          className="flex items-center w-64 bg-slate-50 text-black border border-gray-300 rounded-lg shadow-md max-w-xs px-6 py-2 text-sm font-medium  hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+          className=" cursor-pointer flex items-center w-64 bg-slate-50 text-black border border-gray-300 rounded-lg shadow-md max-w-xs px-6 py-2 text-sm font-medium  hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
           <svg className="h-6 w-6 mr-2" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
             viewBox="0 -4 48 48" version="1.1">
             <g id="Icons" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
@@ -87,7 +84,7 @@ const Login = () => {
 
 
         <button
-          className="flex items-center w-64 bg-slate-50 text-black border border-gray-300 rounded-lg shadow-md max-w-xs px-6 py-2 text-sm font-medium  hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+          className=" cursor-pointer flex items-center w-64 bg-slate-50 text-black border border-gray-300 rounded-lg shadow-md max-w-xs px-6 py-2 text-sm font-medium  hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
           <svg className="h-6 w-6 mr-2" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
             viewBox="0 0 48 48" version="1.1">
             <g id="Icons" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
@@ -105,8 +102,11 @@ const Login = () => {
         </button>
 
 
-        <button onClick={() => { signIn("github") }}
-          className="flex items-center w-64 bg-slate-50 text-black border border-gray-300 rounded-lg shadow-md max-w-xs px-6 py-2 text-sm font-medium  hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+        <button onClick={() => {
+          signIn('github')
+        }
+        }
+          className=" cursor-pointer flex items-center w-64 bg-slate-50 text-black border border-gray-300 rounded-lg shadow-md max-w-xs px-6 py-2 text-sm font-medium  hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
           <svg className="h-6 w-6 mr-2" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
             viewBox="0 0 73 73" version="1.1">
             <g id="team-collaboration/version-control/github" stroke="none" strokeWidth="1" fill="none"
@@ -130,7 +130,7 @@ const Login = () => {
 
 
         <button
-          className="flex items-center w-64 bg-slate-50 text-black border border-gray-300 rounded-lg shadow-md max-w-xs px-6 py-2 text-sm font-medium  hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+          className=" cursor-pointer flex items-center w-64 bg-slate-50 text-black border border-gray-300 rounded-lg shadow-md max-w-xs px-6 py-2 text-sm font-medium  hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
           <svg className="h-6 w-6 mr-2" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
             viewBox="-1.5 0 20 20" version="1.1">
             <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
@@ -151,9 +151,9 @@ const Login = () => {
 
 
       </div>
-    </div>
+    </>
   )
 }
 
 export default Login
- 
+

Video 131/app/page.js

@@ -7,8 +7,8 @@ export default function Home() {
       <div className="flex justify-center flex-col gap-4 items-center text-white h-[44vh] px-5 md:px-0 text-xs md:text-base  ">
         <div className="font-bold flex gap-6 md:gap-20 md:text-5xl justify-center items-center text-3xl">Get Me a Chai <span><img className="invertImg" src="/tea.gif" width={88} alt="" /></span></div>
         <p className="text-center md:text-left">
-          A crowdfunding platform for creators to fund their projects. 
-          
+          A crowdfunding platform for creators to fund their projects.
+
         </p>
         <p className="text-center md:text-left">
 
@@ -17,11 +17,11 @@ export default function Home() {
         <div>
           <Link href={"/login"}>
 
-          <button type="button" className="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Start Here</button>
+            <button type="button" className="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Start Here</button>
           </Link>
 
           <Link href="/about">
-          <button type="button" className="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Read More</button>
+            <button type="button" className="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Read More</button>
           </Link>
 
         </div>
@@ -30,36 +30,42 @@ export default function Home() {
       </div>
 
       <div className="text-white container mx-auto pb-32 pt-14 px-10">
-  <h2 className="text-3xl font-bold text-center mb-14">Your Fans can buy you a Chai</h2>
-  <div className="flex gap-5 justify-around">
-    <div className="item space-y-3 flex flex-col items-center justify-center">
-      <img className="bg-slate-400 rounded-full p-2 text-black" width={88} src="/man.gif" alt="" />
-      <p className="font-bold text-center">Fans want to help</p>
-      <p className="text-center">Your fans are available to support you</p>
-    </div>
-    <div className="item space-y-3 flex flex-col items-center justify-center">
-      <img className="bg-slate-400 rounded-full p-2 text-black" width={88} src="/coin.gif" alt="" />
-      <p className="font-bold text-center">Fans want to contribute</p>
-      <p className="text-center">Your fans are willing to contribute financially</p>
-    </div>
-    <div className="item space-y-3 flex flex-col items-center justify-center">
-      <img className="bg-slate-400 rounded-full p-2 text-black" width={88} src="/group.gif" alt="" />
-      <p className="font-bold text-center">Fans want to collaborate</p>
-      <p className="text-center">Your fans are ready to collaborate with you</p>
-    </div>
-  </div>
-</div>
+        <h2 className="text-3xl font-bold text-center mb-14">Your Fans can buy you a Chai</h2>
+        <div className="flex gap-5 justify-around">
+          <div className="item space-y-3 flex flex-col items-center justify-center">
+            <img className="bg-slate-400 rounded-full p-2 text-black" width={88} src="/man.gif" alt="" />
+            <p className="font-bold text-center">Fans want to help</p>
+            <p className="text-center">Your fans are available to support you</p>
+          </div>
+          <div className="item space-y-3 flex flex-col items-center justify-center">
+            <img className="bg-slate-400 rounded-full p-2 text-black" width={88} src="/coin.gif" alt="" />
+            <p className="font-bold text-center">Fans want to contribute</p>
+            <p className="text-center">Your fans are willing to contribute financially</p>
+          </div>
+          <div className="item space-y-3 flex flex-col items-center justify-center">
+            <img className="bg-slate-400 rounded-full p-2 text-black" width={88} src="/group.gif" alt="" />
+            <p className="font-bold text-center">Fans want to collaborate</p>
+            <p className="text-center">Your fans are ready to collaborate with you</p>
+          </div>
+        </div>
+      </div>
       <div className="bg-white h-1 opacity-10">
       </div>
 
       <div className="text-white container mx-auto pb-32 pt-14 flex flex-col items-center justify-center">
         <h2 className="text-3xl font-bold text-center mb-14">Learn more about us</h2>
         {/* Responsive youtube embed  */}
-        <div className="w-[90%] h-[40vh] md:w-[50%] md:h-[40vh] lg:w-[50%] lg:h-[40vh] xl:w-[50%] xl:h-[40vh]">
-          <iframe className="w-full h-full" src="https://www.youtube.com/embed/ojuUnfqnUI0?si=wMUv4DG3ia6Wt4zn" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+        <div className="w-[90%] md:w-[50%]">
+          <iframe
+            className="w-full aspect-video"
+            src="https://www.youtube.com/embed/ojuUnfqnUI0?si=wMUv4DG3ia6Wt4zn"
+            title="YouTube video player"
+            frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowFullScreen>
+          </iframe>
+        </div>
 
-          </div>
-
       </div>
     </>
   );