Merge pull request #10 from RotaractMora/feature-auth

setup authentication

src/app/admin/admin-dashboard-layout.tsx

@@ -0,0 +1,92 @@
+// AdminDashboardLayout.tsx
+"use client";
+import React, { ReactNode, useContext, useState } from "react";
+import { cn } from "@/lib/utils";
+import Footer from "@/components/blocks/footer";
+import { HoveredLink, Menu, MenuItem, ProductItem } from "../../components/ui/navbar-menu"
+import Image from "next/image";
+import RootLayout, { ThemeContext } from "@/app/layout";
+import { MoonIcon, SunIcon } from "@heroicons/react/24/solid";
+import LOGO_SMALL from "../../../public/Images/logo/RUR20_small.png";
+import { useAuth, AuthProvider } from "@/context/auth-provider";
+import { useRouter } from "next/navigation";
+
+interface AdminDashboardLayoutProps {
+    children: ReactNode;
+}
+
+export function AdminDashboardLayout({ children }: AdminDashboardLayoutProps) {
+
+    console.log("AdminDashboardLayout");
+
+    return (
+
+            <RootLayout>
+
+                    <div className="min-h-screen flex flex-col">
+                        <div className="relative w-full flex items-center justify-center mb-24">
+                            <Navbar className="top-2" />
+                        </div>
+
+                        <main className="flex-grow p-4">               
+                            {children}
+                        </main>
+
+                        <Footer />
+                    </div>
+
+            </RootLayout>
+
+    );
+}
+
+function Navbar({ className }: { className?: string }) {
+
+    const { user , logOut } = useAuth();
+    const router = useRouter();
+    const [active, setActive] = useState<string | null>(null);
+
+    const [tougleTheme, currentTheme] = useContext<any>(ThemeContext);
+
+    const handleLogout = async () => {
+        await logOut();
+        router.push("/admin/");
+    }
+
+    return (
+        <div className={cn("fixed top-10 inset-x-0 max-w-2xl mx-auto z-50", className)}>
+            <Menu setActive={setActive}>
+
+                    <Image src={LOGO_SMALL} alt="RUR" width={50} height={37} className="p-0 rounded-lg dark:bg-black bg-white"/>
+
+                    <MenuItem setActive={setActive} active={null} link="/" item="Home" />
+
+                    <MenuItem setActive={setActive} active={null} link="/admin/dashboard/timeline" item="Timeline" />
+
+                    <MenuItem setActive={setActive} active={null} link="/admin/dashboard/sponsors" item="Sponsors"/>
+
+                    <MenuItem setActive={setActive} active={null} link="/admin/logout" item="Logout"/>
+
+                    <button
+                        onClick={()=>tougleTheme()}
+                        className="border text-sm font-medium relative border-neutral-200 dark:border-white/[0.2] text-black dark:text-white px-4 py-2 rounded-full"
+                        >
+                        {currentTheme() === "dark" ? (
+                            <SunIcon className="h-5 w-5" />
+                        ) : (
+                            <MoonIcon className="h-5 w-5" />
+                        )}
+                    </button>
+
+
+                {/* <MenuItem setActive={setActive} active={active} item="Logout">
+                    <div className="flex flex-col space-y-4 text-sm">
+                    <HoveredLink href="/logout">Logout</HoveredLink>
+                    </div>
+                    </MenuItem> */}
+
+            </Menu>
+        </div>
+
+    );
+}

src/app/admin/dashboard/page.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { AdminDashboardLayout } from '@/app/admin/admin-dashboard-layout';
+import { useAuth } from '@/context/auth-provider';
+import { useRouter } from 'next/navigation';
+
+const AdminDashboard: React.FC = () => {
+
+    const { user } = useAuth();
+
+        // useEffect(() => {
+        // if(!user) {
+        //     // setTimeout(()=>{redirectToLogin(); console.log("redirected to login")},5000);
+        //   }
+        // }, [user]);
+
+
+
+    return (
+        <AdminDashboardLayout>
+            <div className="min-h-screen bg-custom-color-700 dark:bg-custom-dark-color-700 flex flex-col">
+                <header className="bg-custom-color-800 dark:bg-custom-dark-color-800 shadow">
+                    <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+                        <h1 className="text-3xl font-bold text-gray-900">Admin Dashboard</h1>
+                    </div>
+                </header>
+                <main className="flex-grow">
+                    <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+                        <div className="px-4 py-6 sm:px-0">
+                                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                                    <div className="bg-custom-color-800 dark:bg-custom-dark-color-800 p-6 rounded-lg shadow-md">
+                                        <h2 className="text-xl font-bold mb-2">Operation 1</h2>
+                                        <p className="text-gray-700">Description of operation 1.</p>
+                                    </div>
+                                    <div className="bg-custom-color-800 dark:bg-custom-dark-color-800 p-6 rounded-lg shadow-md">
+                                        <h2 className="text-xl font-bold mb-2">Operation 2</h2>
+                                        <p className="text-gray-700">Description of operation 2.</p>
+                                    </div>
+                                    <div className="bg-custom-color-800 dark:bg-custom-dark-color-800 p-6 rounded-lg shadow-md">
+                                        <h2 className="text-xl font-bold mb-2">Operation 3</h2>
+                                        <p className="text-gray-700">Description of operation 3.</p>
+                                    </div>
+                            </div>
+                        </div>
+                    </div>
+                </main>
+            </div>
+        </AdminDashboardLayout>
+    );
+};
+
+export default AdminDashboard;

src/app/admin/dashboard/sponsors/page.tsx

@@ -1,26 +1,37 @@
 "use client"
 
 import Image from "next/image";
-import { AdminDashboardLayout } from "../admin-dashboard-layout";
+import { AdminDashboardLayout } from "../../admin-dashboard-layout";
 import { getSponsors } from "@/services/sponsors.service";
 import { ISponsor } from "@/interfaces/ISponsors";
 import SponsorAddUpdateModal from "@/components/blocks/modals/sponsor-add-update-modal";
 import { useEffect, useState } from "react";
 import SponsorDeleteModal from "@/components/blocks/modals/sponsor-delete-modal";
+import {useAuth} from "@/context/auth-provider";
+import { useRouter } from "next/navigation";
 
 export default function ManageSponsors() {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [sponsorToDelete, setItemToDelete] = useState<ISponsor | null>(null);
   const [sponsors, setSponsors] = useState([] as ISponsor[]);
   const [refresh, setRefresh] = useState(false); // State to trigger re-fetch
 
+  const { user , logOut } = useAuth();
+
+  const router = useRouter();
+
+  // useEffect(() => {
+
+  // }, [user]);
+
   useEffect(() => {
         getSponsors("All").then((data) => {
             setSponsors(data);
         }
         );
     }, [refresh]);
 
+
     const refreshData = () => {
       setRefresh(!refresh);  // run useEffect again to refresh list
     };

src/app/admin/dashboard/timeline/page.tsx

@@ -1,4 +1,4 @@
-import { AdminDashboardLayout } from "../admin-dashboard-layout"
+import { AdminDashboardLayout } from "../../admin-dashboard-layout"
 
 export default function ManageTimeline() {
   return (

src/app/admin/login/page.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { useAuth } from '@/context/auth-provider';
+import { useRouter } from 'next/navigation';
+import { AdminDashboardLayout } from '../admin-dashboard-layout';
+
+const AdminLoginPage: React.FC = () => {
+    const { googleSignIn, user } = useAuth();
+    const router = useRouter();
+
+    useEffect(() => {
+        if (user) {
+            router.push('/admin/dashboard');   
+        }
+    }
+    , [user]);
+
+    return (
+        <AdminDashboardLayout>
+
+        <div className="flex flex-col items-center justify-center h-screen bg-white dark:bg-gray-900">
+            <h1 className="text-3xl font-bold mb-4 text-black dark:text-white">Admin Login</h1>
+            <p className="mb-4 text-black dark:text-gray-300">Please log in using your Google account to access the admin panel.</p>
+            <button onClick={() =>{googleSignIn(); console.log("clicked");}} className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-500">
+            Login with Google
+            </button>
+        </div>
+
+        </AdminDashboardLayout>
+    );
+};
+
+export default AdminLoginPage;

src/app/admin/logout/page.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { useAuth } from "@/context/auth-provider";
+import { useEffect } from "react";
+import { AdminDashboardLayout } from "../admin-dashboard-layout";
+
+export default function logoutPage() {
+
+    const { logOut } = useAuth();
+    useEffect(() => {
+        logOut();
+    }, []);
+
+  return (
+    <AdminDashboardLayout>
+
+        <div className="flex flex-col items-center justify-center h-screen bg-white dark:bg-gray-900">
+        <h1 className="text-3xl font-bold mb-4 text-black dark:text-white">Admin Logout</h1>
+        <p className="mb-4 text-black dark:text-gray-300">waiting for logout...</p>
+        </div>
+
+    </AdminDashboardLayout>
+  );
+}

src/app/admin/page.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { useEffect } from "react";
+import { AdminDashboardLayout } from "@/app/admin/admin-dashboard-layout";
+import { useRouter } from "next/navigation";
+
+export default function redirectToDashboard() {
+
+    const router = useRouter();
+    useEffect(() => {
+        router.push('/admin/dashboard');
+    }, []);
+
+  return (
+    <AdminDashboardLayout>
+        <div className="flex flex-col items-center justify-center h-screen bg-white dark:bg-gray-900">
+        <h1 className="text-3xl font-bold mb-4 text-black dark:text-white">Redirecting to dashboard</h1>
+        <p className="mb-4 text-black dark:text-gray-300">please wait...</p>
+        </div>
+    </AdminDashboardLayout>
+  );
+}