login UI

kudos-ink · Dec 29, 2024 · 0721e66 · 0721e66
1 parent 5f120f4
commit 0721e66
Show file tree

Hide file tree

Showing 15 changed files with 110 additions and 102 deletions.
diff --git a/app/api/auth/[...nextauth]/options.ts b/app/api/auth/[...nextauth]/options.ts
@@ -1,6 +1,5 @@
-
 import GitHubProvider from "next-auth/providers/github";
-import NextAuth, { NextAuthOptions } from "next-auth";
+import { NextAuthOptions } from "next-auth";
 
 export const authOptions: NextAuthOptions = {
   providers: [
@@ -22,4 +21,4 @@ export const authOptions: NextAuthOptions = {
       return session;
     },
   },
-};
+};
diff --git a/app/api/auth/[...nextauth]/route.ts b/app/api/auth/[...nextauth]/route.ts
@@ -3,4 +3,4 @@ import { authOptions } from "./options";
 
 const handler = NextAuth(authOptions);
 
-export { handler as GET, handler as POST };
+export { handler as GET, handler as POST };
diff --git a/app/client-session-provider.tsx b/app/client-session-provider.tsx
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -10,8 +10,7 @@ import Navbar from "@/components/nav/navbar";
 import TopBar from "@/components/nav/top-bar";
 import { container } from "@/components/primitives";
 import { SITE_CONFIG } from "@/data/config";
-import { AuthProvider } from "./client-session-provider";
-// import { auth } from "./api/auth/[...nextauth]/options";
+import { Providers } from "./providers";
 
 export const fontSans = Archivo({
   subsets: ["latin"],
@@ -75,13 +74,12 @@ export const viewport: Viewport = {
   themeColor: "#020817",
 };
 
-export default async function RootLayout({
+export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   const isProduction = process.env.VERCEL_ENV === "production";
-  // const session = await auth()
   return (
     <html
       lang="en"
@@ -94,7 +92,7 @@ export default async function RootLayout({
     >
       <head />
       <body className="min-h-screen bg-background font-sans antialiased">
-        <AuthProvider >
+        <Providers>
           <div className="bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-default from-0% to-background to-50% relative flex flex-col">
             <header>
               <TopBar />
@@ -107,7 +105,7 @@ export default async function RootLayout({
               <Footer />
             </footer>
           </div>
-        </AuthProvider>
+        </Providers>
         <Analytics />
       </body>
       {isProduction && <GoogleAnalytics gaId={SITE_CONFIG.googleAnalyticsId} />}

diff --git a/app/profiles/page.tsx b/app/profiles/page.tsx
diff --git a/app/providers.tsx b/app/providers.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 import * as React from "react";
-import { NextUIProvider } from "@nextui-org/system";
+import { SessionProvider as AuthProvider } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { NextUIProvider } from "@nextui-org/system";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { queryClient } from "@/lib/react-query-client";
@@ -19,7 +20,7 @@ export function Providers({ children }: ProvidersProps) {
     <QueryClientProvider client={queryClient}>
       <NextUIProvider navigate={router.push}>
         <NextThemesProvider attribute="class" defaultTheme="kudos">
-          {children}
+          <AuthProvider>{children}</AuthProvider>
         </NextThemesProvider>
       </NextUIProvider>
       <ReactQueryDevtools initialIsOpen={false} />

diff --git a/components/auth/auth-menu.tsx b/components/auth/auth-menu.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { signIn, signOut, useSession } from "next-auth/react";
+import { Avatar } from "@nextui-org/avatar";
+import { Button } from "@nextui-org/button";
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+} from "@nextui-org/dropdown";
+import { Skeleton } from "@nextui-org/skeleton";
+
+import { GithubIcon } from "@/assets/icons";
+
+const AuthMenu: React.FC = () => {
+  const { data: session, status } = useSession();
+
+  if (status === "loading") {
+    return <Skeleton className="h-10 w-10 rounded-full" />;
+  }
+
+  return (
+    <div>
+      {session ? (
+        <Dropdown placement="bottom-end">
+          <DropdownTrigger>
+            {/* TODO: Support no image placeholder */}
+            <Avatar
+              isBordered
+              as="button"
+              className="transition-transform"
+              src={session.user?.image}
+            />
+          </DropdownTrigger>
+          <DropdownMenu aria-label="Profile Actions" variant="flat">
+            {
+              <DropdownItem key="profile" className="h-14 gap-2" showDivider>
+                <p className="font-semibold">Signed in as</p>
+                <p className="font-semibold">{session.user?.name}</p>
+              </DropdownItem>
+            }
+            <DropdownItem key="logout" color="danger" onPress={() => signOut()}>
+              Log Out
+            </DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+      ) : (
+        <Button
+          size="sm"
+          aria-label="Login"
+          color="default"
+          variant="faded"
+          className="capitalize font-semibold"
+          onPress={() => signIn("github")}
+          startContent={<GithubIcon size={20} />}
+        >
+          <p>Login</p>
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default AuthMenu;
diff --git a/components/cta-banner.tsx b/components/cta-banner.tsx
@@ -66,7 +66,7 @@ const CtaBanner = ({}: ICtaBannerProps) => {
             className="font-semibold border-large hover:underline"
             color="danger"
             variant="bordered"
-            onClick={handleClose}
+            onPress={handleClose}
           >
             Hide this
           </Button>

diff --git a/components/nav/navbar.tsx b/components/nav/navbar.tsx
@@ -5,15 +5,13 @@ import {
   NavbarBrand,
 } from "@nextui-org/navbar";
 import { Chip } from "@nextui-org/chip";
+import AuthMenu from "@/components/auth/auth-menu";
 import { MyImage } from "@/components/ui/image";
+import { getAllProjects } from "@/lib/api/projects";
 
 import { BugReport, CtaButton, FeedbackForms, ProjectDropDown } from "./items";
 import Separator from "./separator";
 import SocialLinks from "./social-links";
-import { getAllProjects } from "@/lib/api/projects";
-import dynamic from "next/dynamic";
-
-const GitHubLoginButton = dynamic(() => import("@/components/sign-in"), { ssr: false });
 
 export default async function Navbar() {
   const projects = await getAllProjects().catch((error) => {
@@ -54,7 +52,9 @@ export default async function Navbar() {
           {projects && <ProjectDropDown projects={projects} />}
           <CtaButton />
         </div>
-        <div><GitHubLoginButton /></div>
+        <div>
+          <AuthMenu />
+        </div>
       </NavbarContent>
     </NextUINavbar>
   );

diff --git a/components/sign-in.tsx b/components/sign-in.tsx
diff --git a/components/table/row.tsx b/components/table/row.tsx
@@ -347,16 +347,15 @@ interface IApplyButtonProps {
   onOpen: () => void;
 }
 export const ApplyButton = ({ onOpen }: IApplyButtonProps) => {
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
+  const handleClick = () => {
     onOpen();
   };
 
   return (
     <Button
       className="invisible group-hover:visible"
       color="primary"
-      onClick={handleClick}
+      onPress={handleClick}
     >
       Apply
     </Button>

diff --git a/middlewares/github.ts b/middlewares/github.ts
@@ -1,5 +1,4 @@
-
 export { default } from "next-auth/middleware";
 
 // applies next-auth only to matching routes
-export const config = { matcher: ["/profiles"] };
+export const config = { matcher: ["/profiles"] };
diff --git a/next.config.js b/next.config.js
@@ -16,7 +16,7 @@ const cspHeader = `
 
 const nextConfig = {
   images: {
-    domains: ["avatars.githubusercontent.com"],
+    remotePatterns: ["avatars.githubusercontent.com"],
     formats: ["image/avif", "image/webp"],
     remotePatterns: [
       {

diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@next/third-parties": "15.1.3",
+    "@nextui-org/avatar": "^2.2.5",
     "@nextui-org/button": "2.2.8",
     "@nextui-org/card": "^2.2.8",
     "@nextui-org/checkbox": "^2.3.7",
@@ -53,7 +54,6 @@
     "react-dom": "19.0.0",
     "react-hook-form": "^7.54.2",
     "react-responsive": "^10.0.0",
-    "react-social-login-buttons": "^4.1.0",
     "sharp": "0.33.5",
     "tailwind-variants": "^0.3.0",
     "tailwindcss": "3.4.17",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,4 +3,4 @@ import { authOptions } from "./options";

		const handler = NextAuth(authOptions);

		export { handler as GET, handler as POST };
		export { handler as GET, handler as POST };