From a19b6ed4ef829697fd0be153af5e27c99f267787 Mon Sep 17 00:00:00 2001
From: Andrew Lee <andrew@alee14.me>
Date: Sun, 23 Mar 2025 16:24:32 -0400
Subject: Fundementials of the new dashboard

---
 web/src/app/components/Guilds.jsx  | 25 +++++++++++++++++++++++++
 web/src/app/components/sign-in.jsx |  2 +-
 web/src/app/dashboard/page.js      | 17 ++++++++++++++---
 web/src/app/globals.css            | 11 ++++++++---
 web/src/app/layout.js              | 12 ++++++------
 web/src/app/page.js                |  2 +-
 web/src/lib/auth.js                | 35 ++++++++++++++++++++++++++++++++++-
 7 files changed, 89 insertions(+), 15 deletions(-)
 create mode 100644 web/src/app/components/Guilds.jsx

(limited to 'web')

diff --git a/web/src/app/components/Guilds.jsx b/web/src/app/components/Guilds.jsx
new file mode 100644
index 0000000..50baa98
--- /dev/null
+++ b/web/src/app/components/Guilds.jsx
@@ -0,0 +1,25 @@
+
+export default async function Guilds({session}) {
+
+    const response = await fetch("https://discord.com/api/users/@me/guilds", {
+        headers: {
+            Authorization: `Bearer ${session.accessToken}`,
+        },
+    });
+    const guilds = await response.json();
+
+    const MANAGE_GUILD = 0x00000020;
+
+    const filteredGuilds = guilds.filter((guild) => {
+        // Convert permissions string to a BigInt for bitwise operations
+        const permissions = BigInt(guild.permissions);
+        // Check if MANAGE_GUILD bit is set
+        return (permissions & BigInt(MANAGE_GUILD)) === BigInt(MANAGE_GUILD);
+    });
+
+    return filteredGuilds.map((guild) => (
+        <div key={guild.id}>
+            <h2>{guild.name}</h2>
+        </div>
+    ))
+}
diff --git a/web/src/app/components/sign-in.jsx b/web/src/app/components/sign-in.jsx
index bb891c7..3d7142f 100644
--- a/web/src/app/components/sign-in.jsx
+++ b/web/src/app/components/sign-in.jsx
@@ -8,7 +8,7 @@ export default function SignIn() {
                 await signIn("discord")
             }}
         >
-            <button type="submit">Login with Discord</button>
+            <button type="submit" className="bg-discord-blurple p-3 rounded-md hover:bg-discord-blurple">Login with Discord</button>
         </form>
     )
 }
diff --git a/web/src/app/dashboard/page.js b/web/src/app/dashboard/page.js
index 065bfb0..d6e3a41 100644
--- a/web/src/app/dashboard/page.js
+++ b/web/src/app/dashboard/page.js
@@ -1,6 +1,7 @@
 import { redirect } from "next/navigation";
 import { auth } from "@/lib/auth";
 import SignOut from "@/app/components/sign-out";
+import Guilds from "@/app/components/Guilds";
 
 export default async function Home() {
     const session = await auth();
@@ -8,9 +9,19 @@ export default async function Home() {
 
     return (
         <div>
-            <h1>Dashboard</h1>
-            <p>Welcome {session.user?.name}</p>
-            <SignOut />
+            <nav className="bg-gray-900 text-white">
+                <div className="max-w-screen-xl flex items-center justify-between mx-auto p-4">
+                    <div className="flex items-center">
+                        <h1 className="text-xl font-medium">AleeBot</h1>
+                    </div>
+
+                    <div className="flex items-center space-x-4">
+                        <p className="text-sm md:text-base">Welcome {session.user?.username}!</p>
+                        <SignOut />
+                    </div>
+                </div>
+            </nav>
+            <Guilds session={session} />
         </div>
     )
 }
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index a2dc41e..4603348 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -8,8 +8,13 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-sans: var(--font-exo-sans);
+  --font-mono: var(--font-jetbrains-mono);
+}
+
+@theme discord {
+  --color-discord-blurple: #5865F2;
+  --color-discord-light-blurple: #E0E3FF;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -22,5 +27,5 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Exo 2", Helvetica, sans-serif;
 }
diff --git a/web/src/app/layout.js b/web/src/app/layout.js
index bec6c45..bd8d805 100644
--- a/web/src/app/layout.js
+++ b/web/src/app/layout.js
@@ -1,13 +1,13 @@
-import { Geist, Geist_Mono } from "next/font/google";
+import { Exo_2, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const exoSans = Exo_2({
+  variable: "--font-exo-sans",
   subsets: ["latin"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const jetbrainsMono = JetBrains_Mono({
+  variable: "--font-jetbrains-mono",
   subsets: ["latin"],
 });
 
@@ -20,7 +20,7 @@ export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${exoSans.variable} ${jetbrainsMono.variable} antialiased`}
       >
         {children}
       </body>
diff --git a/web/src/app/page.js b/web/src/app/page.js
index 1890f99..65b3dda 100644
--- a/web/src/app/page.js
+++ b/web/src/app/page.js
@@ -7,7 +7,7 @@ export default async function Home() {
   if (session) redirect("/dashboard");
     return (
     <>
-      <main>
+      <main className="flex justify-center items-center h-screen">
       <SignIn />
       </main>
     </>
diff --git a/web/src/lib/auth.js b/web/src/lib/auth.js
index bc482b1..3f78f94 100644
--- a/web/src/lib/auth.js
+++ b/web/src/lib/auth.js
@@ -2,5 +2,38 @@ import NextAuth from "next-auth"
 import Discord from "next-auth/providers/discord"
 
 export const { handlers, signIn, signOut, auth } = NextAuth({
-    providers: [Discord],
+    providers: [Discord({
+        authorization: {
+            profile(profile) {
+                return {
+                    id: profile.id,
+                    name: profile.username,
+                    image: profile.image_url
+                }
+            },
+            url: "https://discord.com/api/oauth2/authorize",
+            params: { scope: "identify guilds" },
+        }
+    })],
+    callbacks: {
+        async jwt({ token, account }) {
+            // Persist the OAuth access_token to the token right after sign in
+            if (account) {
+                token.accessToken = account.access_token;
+            }
+            return token;
+        },
+        async session({ session, token }) {
+            if (token.accessToken) {
+                session.user = await fetch('https://discord.com/api/users/@me', {
+                    headers: {
+                        authorization: `Bearer ${token.accessToken}`
+                    }
+                }).then((r) => r.json());
+                session.accessToken = token.accessToken;
+            }
+
+            return session;
+        }
+    }
 })
-- 
cgit v1.2.3