diff options
Diffstat (limited to 'web/src')
| -rw-r--r-- | web/src/app/components/Guilds.jsx | 25 | ||||
| -rw-r--r-- | web/src/app/components/sign-in.jsx | 2 | ||||
| -rw-r--r-- | web/src/app/dashboard/page.js | 17 | ||||
| -rw-r--r-- | web/src/app/globals.css | 11 | ||||
| -rw-r--r-- | web/src/app/layout.js | 12 | ||||
| -rw-r--r-- | web/src/app/page.js | 2 | ||||
| -rw-r--r-- | web/src/lib/auth.js | 35 |
7 files changed, 89 insertions, 15 deletions
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; + } + } }) |