Merge 3cc2dd758a into 6678ded2f9

apps/website/.example.dev.vars

@@ -0,0 +1,6 @@
+PRO=<production>
+
+DISCORD_CLIENT_ID=<client id>
+DISCORD_CLIENT_SECRET=<client secret>
+DISCORD_BOT_TOKEN=<bot token>
+DISCORD_REDIRECT_URI=<domain>/auth/callback/discord

apps/website/.gitignore

@@ -19,3 +19,6 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+
+.dev.vars
+.wrangler/

apps/website/astro.config.ts

@@ -1,37 +1,29 @@
 import path from "path";
 import { fileURLToPath } from "url";
 import { defineConfig } from "astro/config";
+import preact from "@astrojs/preact";
 import sitemap from "@astrojs/sitemap";
-import robotsTxt from "astro-robots-txt";
-import compress from "astro-compress";
 import tailwind from "@astrojs/tailwind";
+import cloudflare from "@astrojs/cloudflare";
+
 import { CONFIG } from "./src/config";
-import image from "@astrojs/image";
+
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 // https://astro.build/config
 export default defineConfig({
   site: CONFIG.origin,
-  base: "/",
+  integrations: [sitemap(), tailwind(), preact()],
-  trailingSlash: "always",
+  output: "server",
-  output: "static",
+  adapter: cloudflare(),
-  integrations: [sitemap(), robotsTxt({
+  security: {
-    policy: [{
+    checkOrigin: true,
-      userAgent: "*"
+  },
-    }],
-    sitemap: true
-  }), compress({
-    css: true,
-    html: true,
-    img: true,
-    js: true,
-    svg: true
-  }), tailwind(), image()],
   vite: {
     resolve: {
       alias: {
-        "~": path.resolve(__dirname, "./src")
+        "~": path.resolve(__dirname, "./src"),
-      }
+      },
-    }
+    },
-  }
+  },
 });

apps/website/auth.config.ts

@@ -0,0 +1,50 @@
+import Discord from "@auth/core/providers/discord";
+import { defineConfig } from "auth-astro";
+import type { User } from "~/env";
+
+import dotenv from "dotenv";
+
+dotenv.config();
+
+const { env } = process;
+
+export default defineConfig({
+  secret: env.AUTH_SECRET,
+  providers: [
+    Discord({
+      clientId: env.DISCORD_CLIENT_ID,
+      clientSecret: env.DISCORD_CLIENT_SECRET,
+      authorization:
+        "https://discord.com/api/oauth2/authorize?scope=guilds+identify+email",
+    }),
+  ],
+  callbacks: {
+    async jwt({ token, account, profile }) {
+      if (account && profile) {
+        token.accessToken = account.access_token;
+        token.id = profile.id;
+
+        token.name = profile.username as string;
+        token.global_name = profile.global_name;
+      }
+
+      return token;
+    },
+    async session({ session, token }) {
+      if (session.user) {
+        session.user.id = token.id as string;
+        (session.user as unknown as User).global_name =
+          token.global_name as string;
+
+        (session.user as unknown as User).discordAccessToken =
+          token.accessToken as string;
+      }
+
+      return session;
+    },
+  },
+  pages: {
+    signIn: "/auth/login",
+    signOut: "/auth/logout",
+  },
+});

apps/website/migrations/0001_auth.sql

@@ -0,0 +1,18 @@
+-- Migration number: 0001 	 2024-08-03T15:43:57.349Z
+
+CREATE TABLE IF NOT EXISTS user (
+  id TEXT NOT NULL PRIMARY KEY,
+  discord_id TEXT NOT NULL UNIQUE,
+  username TEXT NOT NULL,
+  avatar TEXT NOT NULL,
+  access_token TEXT NOT NULL,
+  access_token_expiration NUMBER NOT NULL,
+  refresh_token TEXT NOT NULL
+);
+
+CREATE TABLE IF NOT EXISTS session (
+  id TEXT NOT NULL PRIMARY KEY,
+  expires_at INTEGER NOT NULL,
+  user_id TEXT NOT NULL,
+  FOREIGN KEY (user_id) REFERENCES user (id)
+);

apps/website/package.json

@@ -9,19 +9,23 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/image": "^0.16.5",
+    "@astrojs/cloudflare": "^11.0.4",
+    "@astrojs/preact": "^3.5.1",
     "@astrojs/prefetch": "^0.2.1",
-    "@astrojs/sitemap": "^1.2.1",
+    "@astrojs/sitemap": "^3.1.6",
-    "@astrojs/tailwind": "^3.1.1",
+    "@astrojs/tailwind": "^5.1.0",
+    "@lucia-auth/adapter-sqlite": "^3.0.2",
     "@tailwindcss/typography": "^0.5.9",
-    "astro": "^2.2.1",
+    "arctic": "^1.9.2",
-    "astro-compress": "2.2.11",
+    "astro": "^4.11.5",
     "astro-google-fonts-optimizer": "^0.2.2",
     "astro-icon": "^0.8.0",
-    "astro-robots-txt": "^0.4.1",
+    "lucia": "^3.2.0",
+    "preact": "^10.23.1",
     "tailwindcss": "^3.3.1"
   },
   "devDependencies": {
+    "@cloudflare/workers-types": "^4.20240806.0",
     "autoprefixer": "^10.4.14",
     "cssnano": "^6.0.0",
     "postcss": "^8.4.21",

apps/website/src/components/Container.astro

@@ -0,0 +1,7 @@
+---
+const { class: className } = Astro.props;
+---
+
+<div class={`container mx-auto px-4 ${className ?? ""}`}>
+  <slot />
+</div>

apps/website/src/components/Settings.astro

@@ -0,0 +1,40 @@
+<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"
+  ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+    id="SVGRepo_tracerCarrier"
+    stroke-linecap="round"
+    stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"
+    ><path
+      fill="#CCD6DD"
+      d="M3 16v-2h30v2zm0 7v-2h30v2zm0 7v-2h30v2zM3 9V7h30v2z"></path><path
+      fill="#D5AB88"
+      d="M35 33V1a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1H4a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v32h34zM4 4h28v29H4V4z"
+    ></path><path
+      fill="#3B94D9"
+      d="M19 5.5A1.5 1.5 0 0 0 17.5 7a1.5 1.5 0 1 0-3 0a1.5 1.5 0 1 0-3 0a1.5 1.5 0 1 0-3 0a1.5 1.5 0 1 0-3 0v2a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 3 0V7A1.5 1.5 0 0 0 19 5.5z"
+    ></path><path
+      fill="#BE1931"
+      d="M19 12.5a1.5 1.5 0 0 0-1.5 1.5a1.5 1.5 0 1 0-3 0a1.5 1.5 0 1 0-3 0a1.5 1.5 0 1 0-3 0a1.5 1.5 0 1 0-3 0v2a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 3 0v-2a1.5 1.5 0 0 0-1.5-1.5z"
+    ></path><path
+      fill="#5C913B"
+      d="M19 19.5a1.5 1.5 0 0 0-1.5 1.5a1.5 1.5 0 1 0-3 0a1.5 1.5 0 1 0-3 0a1.5 1.5 0 1 0-3 0a1.5 1.5 0 1 0-3 0v2a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 3 0v-2a1.5 1.5 0 0 0-1.5-1.5z"
+    ></path><path
+      fill="#FFAC33"
+      d="M19 26.5a1.5 1.5 0 0 0-1.5 1.5a1.5 1.5 0 1 0-3 0a1.5 1.5 0 1 0-3 0a1.5 1.5 0 1 0-3 0a1.5 1.5 0 1 0-3 0v2a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 3 0v-2a1.5 1.5 0 0 0-1.5-1.5z"
+    ></path><path
+      fill="#3B94D9"
+      d="M29 10.5A1.5 1.5 0 0 1 27.5 9V7a1.5 1.5 0 1 1 3 0v2a1.5 1.5 0 0 1-1.5 1.5z"
+    ></path><path
+      fill="#BE1931"
+      d="M29 17.5a1.5 1.5 0 0 1-1.5-1.5v-2a1.5 1.5 0 1 1 3 0v2a1.5 1.5 0 0 1-1.5 1.5z"
+    ></path><path
+      fill="#5C913B"
+      d="M29 24.5a1.5 1.5 0 0 1-1.5-1.5v-2a1.5 1.5 0 0 1 3 0v2a1.5 1.5 0 0 1-1.5 1.5z"
+    ></path><path
+      fill="#FFAC33"
+      d="M29 31.5a1.5 1.5 0 0 1-1.5-1.5v-2a1.5 1.5 0 0 1 3 0v2a1.5 1.5 0 0 1-1.5 1.5z"
+    ></path><path
+      fill="#BF6952"
+      d="M35 33H1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h34a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1z"
+    ></path></g
+  ></svg
+>

apps/website/src/components/dashboard/GuildInfo.astro

@@ -0,0 +1,25 @@
+---
+import { Image } from "astro:assets";
+
+interface Props {
+  id: string;
+  name: string;
+  icon: string;
+}
+
+const { id, name, icon } = Astro.props;
+---
+
+<div class="flex items-center justify-center">
+  <Image
+    src={`https://cdn.discordapp.com/icons/${id}/${icon}.webp`}
+    class="mr-5 rounded-full"
+    alt="icon"
+    width={64}
+    height={64}
+  />
+
+  <h1 class="break-all py-12 text-5xl font-extrabold text-white">
+    {name}
+  </h1>
+</div>

apps/website/src/components/dashboard/UserInfo.astro

@@ -0,0 +1,19 @@
+---
+import { Image } from "astro:assets";
+
+const user = Astro.locals.user;
+---
+
+<div class="flex items-center justify-center">
+  <Image
+    src={`https://cdn.discordapp.com/avatars/${user.discordId}/${user.avatar}.webp`}
+    class="mr-5 rounded-full"
+    alt="icon"
+    width={64}
+    height={64}
+  />
+
+  <h1 class="break-all py-12 text-5xl font-extrabold text-white">
+    @{user.username}
+  </h1>
+</div>

apps/website/src/components/preact/Guild.tsx

@@ -0,0 +1,34 @@
+import type { Guild } from "~/env";
+
+interface Props {
+  guild: Guild;
+  mutual: boolean;
+}
+
+export default function Guild({ guild, mutual }: Props) {
+  return (
+    <a
+      class={`flex min-h-max w-80 cursor-pointer justify-between rounded-md border-[1px] border-neutral-800 bg-dark-100 p-6 md:w-96 ${
+        !mutual && "brightness-50"
+      }`}
+      href={
+        mutual
+          ? `/dashboard/guilds/${guild.id}`
+          : `https://discord.com/oauth2/authorize?client_id=923267906941370368&scope=bot+applications.commands&guild_id=${guild.id}`
+      }
+      target={mutual ? "_self" : "_blank"}
+    >
+      <div class="flex flex-row items-center">
+        <img
+          src={`https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.webp`}
+          class="mr-5 rounded-full"
+          alt="icon"
+          width="64"
+          height="64"
+        />
+
+        <h2 class="w-fit break-all text-3xl font-bold">{guild.name}</h2>
+      </div>
+    </a>
+  );
+}

apps/website/src/components/preact/GuildSelector.tsx

@@ -0,0 +1,31 @@
+import { Component } from "preact";
+import Guild from "./Guild";
+import LoadingGuild from "./LoadingGuild";
+import type { MutualeGuild } from "~/env";
+
+interface State {
+  guilds: MutualeGuild[] | null;
+}
+
+export default class GuildSelector extends Component<{}, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      guilds: null,
+    };
+  }
+
+  async componentDidMount() {
+    const response = await fetch("/api/user/guilds");
+    const data = await response.json();
+    this.setState({ guilds: data });
+  }
+
+  render() {
+    const { guilds } = this.state;
+    if (!guilds) return [...Array(15)].map(() => <LoadingGuild />);
+
+    return guilds.map((g) => <Guild guild={g.guild} mutual={g.mutual} />);
+  }
+}

apps/website/src/components/preact/LoadingGuild.tsx

@@ -0,0 +1,9 @@
+export default function LoadingGuild() {
+  return (
+    <div className="flex min-h-max w-80 items-center justify-center rounded-md border border-neutral-800 bg-dark-100 p-6 md:w-96">
+      <div className="flex flex-row">
+        <div className="h-6 w-52 animate-pulse rounded-md bg-neutral-700 shadow-md"></div>
+      </div>
+    </div>
+  );
+}

apps/website/src/components/preact/MultiStepForm.tsx

@@ -0,0 +1,128 @@
+import { useState, useEffect } from "preact/hooks";
+
+const steps = [
+  { id: 1, name: "Select Channel" },
+  { id: 2, name: "Add Buttons/Dropdowns" },
+  { id: 3, name: "Set Message Content" },
+  { id: 4, name: "Send" },
+];
+
+const MultiStepForm = ({ guildId }) => {
+  const [currentStep, setCurrentStep] = useState(1);
+  const [channels, setChannels] = useState([]);
+
+  useEffect(() => {
+    fetch(`/api/guild/${guildId}/channels`)
+      .then((response) => response.json())
+      .then((data) => setChannels(data));
+  }, [guildId]);
+
+  const nextStep = () => {
+    setCurrentStep((prevStep) => Math.min(prevStep + 1, steps.length));
+  };
+
+  const prevStep = () => {
+    setCurrentStep((prevStep) => Math.max(prevStep - 1, 1));
+  };
+
+  return (
+    <div className="mx-auto w-full max-w-lg rounded-lg bg-gray-800 p-6 text-white shadow-lg">
+      <div className="relative pt-1">
+        <div className="mb-2 flex items-center justify-between">
+          <div className="text-right">
+            <span className="inline-block text-xs font-semibold text-green-400">
+              Step {currentStep} of {steps.length}
+            </span>
+          </div>
+        </div>
+        <div className="mb-4 flex h-2 overflow-hidden rounded bg-gray-700 text-xs">
+          <div
+            style={{ width: `${(currentStep / steps.length) * 100}%` }}
+            className="flex flex-col justify-center whitespace-nowrap bg-green-500 text-center text-white shadow-none"
+          ></div>
+        </div>
+      </div>
+
+      {currentStep === 1 && (
+        <div>
+          <label className="mb-2 block">Select Channel:</label>
+          <select className="mb-4 w-full rounded border border-gray-600 bg-gray-700 p-2">
+            {channels.map((channel) => (
+              <option key={channel.id} value={channel.id}>
+                {channel.name}
+              </option>
+            ))}
+          </select>
+          <button
+            onClick={nextStep}
+            className="mt-4 w-full rounded bg-white px-4 py-2 text-gray-800 hover:bg-gray-200"
+          >
+            Next
+          </button>
+        </div>
+      )}
+
+      {currentStep === 2 && (
+        <div>
+          <label className="mb-2 block">Add Buttons/Dropdowns:</label>
+          {/* Add buttons or dropdowns here */}
+          <div className="flex justify-between">
+            <button
+              onClick={prevStep}
+              className="mt-4 w-full rounded bg-gray-600 px-4 py-2 text-white hover:bg-gray-700"
+            >
+              Back
+            </button>
+            <button
+              onClick={nextStep}
+              className="mt-4 w-full rounded bg-white px-4 py-2 text-gray-800 hover:bg-gray-200"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      )}
+
+      {currentStep === 3 && (
+        <div>
+          <label className="mb-2 block">Set Message Content:</label>
+          {/* Set message content, embed, etc. here */}
+          <div className="flex justify-between">
+            <button
+              onClick={prevStep}
+              className="mt-4 w-full rounded bg-gray-600 px-4 py-2 text-white hover:bg-gray-700"
+            >
+              Back
+            </button>
+            <button
+              onClick={nextStep}
+              className="mt-4 w-full rounded bg-white px-4 py-2 text-gray-800 hover:bg-gray-200"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      )}
+
+      {currentStep === 4 && (
+        <div>
+          <label className="mb-2 block">Review and Send:</label>
+          {/* Send message here */}
+          <div className="flex justify-between">
+            <button
+              onClick={prevStep}
+              className="mt-4 w-full rounded bg-gray-600 px-4 py-2 text-white hover:bg-gray-700"
+            >
+              Back
+            </button>
+            <button className="mt-4 w-full rounded bg-white px-4 py-2 text-gray-800 hover:bg-gray-200">
+              Send
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MultiStepForm;

apps/website/src/env.d.ts

@@ -1 +1,35 @@
 /// <reference types="astro/client" />
+
+type Env = {
+  GITHUB_APP_NAME: string;
+  DISCORD_CLIENT_ID: string;
+  DISCORD_CLIENT_SECRET: string;
+  DISCORD_BOT_TOKEN: string;
+  DISCORD_REDIRECT_URI: string;
+  DB: D1Database;
+};
+
+/*export interface Guild {
+  id: string;
+  name: string;
+  icon: string;
+  permissions: string;
+  owner: boolean;
+}
+
+export interface MutualeGuild {
+  mutual: boolean;
+  guild: Guild;
+}*/
+
+type Runtime = import("@astrojs/cloudflare").Runtime<Env>;
+
+// https://github.com/withastro/astro/issues/7394#issuecomment-1975657601
+declare namespace App {
+  interface Locals extends Runtime {
+    discord: import("arctic").Discord;
+    lucia: import("lucia").Lucia;
+    session: import("lucia").Session | null;
+    user: import("lucia").User | null;
+  }
+}

apps/website/src/lib/auth.ts

@@ -0,0 +1,54 @@
+import { Lucia } from "lucia";
+import { D1Adapter } from "@lucia-auth/adapter-sqlite";
+import { Discord } from "arctic";
+
+export function initializeLucia(D1: D1Database) {
+  const adapter = new D1Adapter(D1, {
+    user: "user",
+    session: "session",
+  });
+  return new Lucia(adapter, {
+    sessionCookie: {
+      attributes: {
+        // set to `true` when using HTTPS
+        secure: import.meta.env.PROD,
+      },
+    },
+    getUserAttributes: (attributes) => {
+      return {
+        discordId: attributes.discord_id,
+        username: attributes.username,
+        avatar: attributes.avatar,
+        sensitive: {
+          accessToken: attributes.access_token,
+          refreshToken: attributes.refresh_token,
+          accessTokenExpiresAt: attributes.access_token_expiration,
+        },
+      };
+    },
+  });
+}
+
+export function initializeDiscord(
+  discordClientId: string,
+  discordClientSecret: string,
+  redirectUri: string
+) {
+  return new Discord(discordClientId, discordClientSecret, redirectUri);
+}
+
+declare module "lucia" {
+  interface Register {
+    Lucia: ReturnType<typeof initializeLucia>;
+    DatabaseUserAttributes: DatabaseUserAttributes;
+  }
+}
+
+interface DatabaseUserAttributes {
+  discord_id: number;
+  username: string;
+  avatar: string;
+  access_token: string;
+  refresh_token: string;
+  access_token_expiration: number;
+}

apps/website/src/lib/guilds.ts

@@ -0,0 +1,77 @@
+import type { Guild, MutualeGuild } from "~/env";
+import { isUserEligible } from "./user";
+
+export async function getGuild(
+  user,
+  guildId: string,
+  env
+): Promise<Guild | undefined> {
+  const guilds = await getUserGuilds(user);
+  const guild = guilds.find((g) => g.id === guildId);
+
+  if (!guild || !(await isMutualGuild(guild, env))) return undefined;
+
+  return guild;
+}
+
+export async function getGuildChannels(guildId: string, env) {
+  const discordApiGuildChannelsResponse = await fetch(
+    `https://discord.com/api/v10/guilds/${guildId}/channels`,
+    {
+      headers: {
+        Authorization: `Bot ${env.DISCORD_BOT_TOKEN}`,
+        "Cache-Control": "max-age=300",
+      },
+    }
+  );
+
+  return await discordApiGuildChannelsResponse.json();
+}
+
+export async function getUserGuilds(user): Promise<Guild[]> {
+  const discordApiGuildsResponse = await fetch(
+    "https://discord.com/api/v10/users/@me/guilds",
+    {
+      headers: {
+        Authorization: `Bearer ${user.sensitive.accessToken as string}`,
+        "Cache-Control": "max-age=300",
+      },
+    }
+  );
+
+  return (await discordApiGuildsResponse.json()) as Guild[];
+}
+
+export async function filterUserGuilds(
+  guilds: Guild[],
+  env
+): Promise<MutualeGuild[]> {
+  const filtered = guilds
+    .filter(isUserEligible)
+    .sort((a, b) => Number(b.owner) - Number(a.owner));
+
+  const result: MutualeGuild[] = [];
+
+  for (const guild of filtered) {
+    const mutual = await isMutualGuild(guild, env);
+
+    result.push({ mutual, guild });
+  }
+
+  result.sort((a, b) => Number(b.mutual) - Number(a.mutual));
+
+  return result;
+}
+
+export async function isMutualGuild(guild: Guild, env): Promise<boolean> {
+  const res = await fetch(
+    `https://discord.com/api/v10/guilds/${guild.id}/members/${env.DISCORD_CLIENT_ID}`,
+    {
+      headers: {
+        Authorization: `Bot ${env.DISCORD_BOT_TOKEN}`,
+      },
+    }
+  );
+
+  return res.ok;
+}

apps/website/src/lib/user.ts

@@ -0,0 +1,6 @@
+import type { Guild } from "~/env";
+
+// Checks if user has AMDINISTRATOR permissions in the guild
+export function isUserEligible(guild: Guild): boolean {
+  return (BigInt(guild.permissions) & 0x8n) == 0x8n;
+}

apps/website/src/middleware.ts

@@ -0,0 +1,40 @@
+import { initializeLucia, initializeDiscord } from "./lib/auth";
+import { defineMiddleware } from "astro:middleware";
+
+export const onRequest = defineMiddleware(async (context, next) => {
+  const lucia = initializeLucia(context.locals.runtime.env.DB);
+  context.locals.lucia = lucia;
+  const discord = initializeDiscord(
+    context.locals.runtime.env.DISCORD_CLIENT_ID,
+    context.locals.runtime.env.DISCORD_CLIENT_SECRET,
+    context.locals.runtime.env.DISCORD_REDIRECT_URI
+  );
+  context.locals.discord = discord;
+  const sessionId = context.cookies.get(lucia.sessionCookieName)?.value ?? null;
+  if (!sessionId) {
+    context.locals.user = null;
+    context.locals.session = null;
+    return next();
+  }
+
+  const { session, user } = await lucia.validateSession(sessionId);
+  if (session && session.fresh) {
+    const sessionCookie = lucia.createSessionCookie(session.id);
+    context.cookies.set(
+      sessionCookie.name,
+      sessionCookie.value,
+      sessionCookie.attributes
+    );
+  }
+  if (!session) {
+    const sessionCookie = lucia.createBlankSessionCookie();
+    context.cookies.set(
+      sessionCookie.name,
+      sessionCookie.value,
+      sessionCookie.attributes
+    );
+  }
+  context.locals.session = session;
+  context.locals.user = user;
+  return next();
+});

apps/website/src/pages/api/guild/[id]/channels.ts

@@ -0,0 +1,19 @@
+import type { APIContext, APIRoute } from "astro";
+import { getGuildChannels } from "~/lib/guilds";
+
+interface APIParams {
+  id: string;
+}
+
+export const GET: APIRoute = async ({ params, locals }) => {
+  const user = locals.user;
+  if (!user) {
+    return new Response(null, {
+      status: 401,
+    });
+  }
+
+  const channels = await getGuildChannels(params.id!, locals.runtime.env);
+
+  return Response.json(channels);
+};

apps/website/src/pages/api/user/guilds.ts

@@ -0,0 +1,16 @@
+import type { APIRoute } from "astro";
+import { filterUserGuilds, getUserGuilds } from "~/lib/guilds";
+
+export const GET: APIRoute = async ({ locals }) => {
+  const user = locals.user;
+  if (!user) {
+    return new Response(null, {
+      status: 401,
+    });
+  }
+
+  const guilds = await getUserGuilds(user);
+  const res = await filterUserGuilds(guilds, locals.runtime.env);
+
+  return Response.json(res);
+};

apps/website/src/pages/auth/callback/discord.ts

@@ -0,0 +1,114 @@
+import { OAuth2RequestError } from "arctic";
+import type { APIContext } from "astro";
+import { generateIdFromEntropySize } from "lucia";
+
+type UserRow = {
+  id: string;
+};
+
+export async function GET(context: APIContext): Promise<Response> {
+  const code = context.url.searchParams.get("code");
+  const state = context.url.searchParams.get("state");
+  const storedState = context.cookies.get("discord_oauth_state")?.value ?? null;
+  if (!code || !state || !storedState || state !== storedState) {
+    return new Response(null, {
+      status: 400,
+    });
+  }
+
+  try {
+    const tokens = await context.locals.discord.validateAuthorizationCode(code);
+    const disocrdUserResponse = await fetch(
+      "https://discord.com/api/users/@me",
+      {
+        headers: {
+          Authorization: `Bearer ${tokens.accessToken}`,
+        },
+      }
+    );
+
+    const discordUser: DiscordUser = await disocrdUserResponse.json();
+
+    const existingUser = await context.locals.runtime.env.DB.prepare(
+      "SELECT * FROM user WHERE discord_id = ?1"
+    )
+      .bind(discordUser.id)
+      .first<UserRow>();
+
+    if (existingUser) {
+      const session = await context.locals.lucia.createSession(
+        existingUser.id,
+        {}
+      );
+
+      const sessionCookie = context.locals.lucia.createSessionCookie(
+        session.id
+      );
+
+      context.cookies.set(
+        sessionCookie.name,
+        sessionCookie.value,
+        sessionCookie.attributes
+      );
+
+      await context.locals.runtime.env.DB.prepare(
+        "UPDATE user SET username = ?2, avatar = ?3, access_token = ?4,access_token_expiration = ?5, refresh_token = ?6 WHERE discord_id = ?1"
+      )
+        .bind(
+          discordUser.id,
+          discordUser.username,
+          discordUser.avatar,
+          tokens.accessToken,
+          tokens.accessTokenExpiresAt.getTime(),
+          tokens.refreshToken
+        )
+        .first<UserRow>();
+
+      return context.redirect("/dashboard");
+    }
+
+    const userId = generateIdFromEntropySize(10); // 16 characters long
+
+    await context.locals.runtime.env.DB.prepare(
+      "INSERT INTO user (id, discord_id, username, avatar, access_token, access_token_expiration, refresh_token) VALUES (?1, ?2, ?3, ?4, ?5, ?6, ?7)"
+    )
+      .bind(
+        userId,
+        discordUser.id,
+        discordUser.username,
+        discordUser.avatar,
+        tokens.accessToken,
+        tokens.accessTokenExpiresAt.getTime(),
+        tokens.refreshToken
+      )
+      .run();
+
+    const session = await context.locals.lucia.createSession(userId, {});
+    const sessionCookie = context.locals.lucia.createSessionCookie(session.id);
+    context.cookies.set(
+      sessionCookie.name,
+      sessionCookie.value,
+      sessionCookie.attributes
+    );
+    return context.redirect("/dashboard");
+  } catch (e) {
+    console.error(e.message);
+
+    // the specific error message depends on the provider
+    if (e instanceof OAuth2RequestError) {
+      // invalid code
+      return new Response(null, {
+        status: 400,
+      });
+    }
+    return new Response(null, {
+      status: 500,
+    });
+  }
+}
+
+interface DiscordUser {
+  id: string;
+  username: string;
+  avatar: string;
+}

apps/website/src/pages/auth/login.ts

@@ -0,0 +1,22 @@
+import { generateState } from "arctic";
+
+import type { APIContext } from "astro";
+
+export async function GET(context: APIContext): Promise<Response> {
+  const state = generateState();
+  const url = await context.locals.discord.createAuthorizationURL(state, {
+    scopes: ["identify", "guilds"],
+  });
+
+  console.log("login");
+
+  context.cookies.set("discord_oauth_state", state, {
+    path: "/",
+    secure: import.meta.env.PROD,
+    httpOnly: true,
+    maxAge: 60 * 10,
+    sameSite: "lax",
+  });
+
+  return context.redirect(url.toString());
+}

apps/website/src/pages/auth/logout.ts

@@ -0,0 +1,20 @@
+import type { APIContext } from "astro";
+
+export async function GET(context: APIContext): Promise<Response> {
+  if (!context.locals.session) {
+    return new Response(null, {
+      status: 401,
+    });
+  }
+
+  await context.locals.lucia.invalidateSession(context.locals.session.id);
+
+  const sessionCookie = context.locals.lucia.createBlankSessionCookie();
+  context.cookies.set(
+    sessionCookie.name,
+    sessionCookie.value,
+    sessionCookie.attributes
+  );
+
+  return context.redirect("/");
+}

apps/website/src/pages/dashboard/guilds/[id].astro

@@ -0,0 +1,51 @@
+---
+import GuildInfo from "~/components/dashboard/GuildInfo.astro";
+import UserInfo from "~/components/dashboard/UserInfo.astro";
+import MultiStepForm from "~/components/preact/MultiStepForm";
+import Layout from "~/layouts/Layout.astro";
+import { getGuild } from "~/lib/guilds";
+import { isUserEligible } from "~/lib/user";
+
+const { id } = Astro.params;
+
+const user = Astro.locals.user;
+if (!user || !id) {
+  return Astro.redirect("/auth/login");
+}
+
+const guild = await getGuild(user, id, Astro.locals.runtime.env);
+if (!guild) {
+  return Astro.redirect("/dashboard");
+}
+
+const eligible = isUserEligible(guild);
+if (!eligible) {
+  return Astro.redirect("/dashboard");
+}
+---
+
+<Layout>
+  <div class="flex flex-col items-center justify-center md:flex-row">
+    <UserInfo />
+
+    <p class="px-6 text-5xl text-white">on</p>
+
+    <GuildInfo id={guild.id} name={guild.name} icon={guild.icon} />
+  </div>
+
+  <div class="mx-auto mt-8 w-full max-w-lg">
+    <MultiStepForm guildId={guild.id} client:load />
+  </div>
+
+  <style>
+    .step {
+      padding: 10px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    }
+    .step.active {
+      background-color: #4caf50;
+      color: white;
+    }
+  </style>
+</Layout>

apps/website/src/pages/dashboard/index.astro

@@ -0,0 +1,22 @@
+---
+import Layout from "~/layouts/Layout.astro";
+import Container from "~/components/Container.astro";
+import GuildSelector from "~/components/preact/GuildSelector";
+import UserInfo from "~/components/dashboard/UserInfo.astro";
+
+if (!Astro.locals.user) {
+  return Astro.redirect("/auth/login");
+}
+---
+
+<Layout>
+  <UserInfo />
+
+  <Container class="pb-4">
+    <main
+      class="flex flex-wrap items-center justify-center gap-12 pb-4 text-white"
+    >
+      <GuildSelector client:load />
+    </main>
+  </Container>
+</Layout>

apps/website/src/pages/index.astro

@@ -2,8 +2,11 @@
 import Layout from "~/layouts/Layout.astro";
 import Invite from "~/components/Invite.astro";
 import Computer from "~/components/Computer.astro";
-import { Image } from "@astrojs/image/components";
+import Settings from "~/components/Settings.astro";
 import Logo from "~/assets/logo.png";
+import { Image } from "astro:assets";
+
+export const prerender = true;
 ---
 
 <Layout>
@@ -32,15 +35,22 @@ import Logo from "~/assets/logo.png";
         <div class="mt-6 flex flex-col gap-6 md:flex-row">
           <a
             href="https://discord.com/api/oauth2/authorize?client_id=923267906941370368&permissions=268435456&scope=bot%20applications.commands"
-            class="broder-1 duration-400 flex items-center justify-center gap-x-3 rounded-lg border border-[#5865F2] bg-[#5865F2]/25 px-10 py-3 text-lg font-semibold text-white shadow-2xl shadow-[#5865F2]/25 transition-colors ease-out hover:bg-[#5865F2]/40 hover:shadow-[#5865F2]/30"
+            class="broder-1 duration-400 flex items-center justify-center gap-x-3 rounded-lg border border-blue bg-blue/25 px-10 py-3 text-lg font-semibold text-white shadow-2xl shadow-blue/25 transition-colors ease-out hover:bg-blue/40 hover:shadow-blue/30"
             target="_blank"
           >
             <Invite />
             Add to Discord</a
           >
+          <a
+            href="/dashboard"
+            class="broder-1 duration-400 flex items-center justify-center gap-x-3 rounded-lg border border-gold bg-gold/25 px-10 py-3 text-lg font-semibold text-white shadow-2xl shadow-gold/25 transition-colors ease-out hover:bg-gold/40 hover:shadow-gold/30"
+          >
+            <Settings />
+            Dashboard</a
+          >
           <a
             href="https://github.com/xHyroM/roles-bot"
-            class="broder-1 duration-400 flex items-center justify-center gap-x-3 rounded-lg border border-[#FFA500] bg-[#FFA500]/25 px-10 py-3 text-lg font-semibold text-white shadow-2xl shadow-[#FFA500]/25 transition-colors ease-out hover:bg-[#FFA500]/40 hover:shadow-[#FFA500]/30"
+            class="broder-1 duration-400 flex items-center justify-center gap-x-3 rounded-lg border border-gray-50 bg-gray-50/25 px-10 py-3 text-lg font-semibold text-white shadow-2xl shadow-gray-50/25 transition-colors ease-out hover:bg-gray-50/40 hover:shadow-gray-50/30"
             target="_blank"
           >
             <Computer />

apps/website/tailwind.config.cjs

@@ -1,15 +1,18 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
-	theme: {
+  theme: {
-		extend: {
+    extend: {
-			colors: {
+      colors: {
-				dark: "#111111",
+        dark: "#111111",
-			},
+        "dark-100": "#1A1A1A",
-			fontFamily: {
+        blue: "#5865F2",
-				body: ["Montserrat", "sans-serif"],
+        gold: "#FFA500",
-			},
+      },
-		},
+      fontFamily: {
-	},
+        body: ["Montserrat", "sans-serif"],
-	plugins: [],
+      },
+    },
+  },
+  plugins: [],
 };

apps/website/tsconfig.json

@@ -1,8 +1,8 @@
 {
-  "extends": "astro/tsconfigs/base",
+  "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
+    "types": ["@cloudflare/workers-types"],
     "strictNullChecks": true,
-    "allowJs": true,
     "baseUrl": ".",
     "paths": {
       "~/*": ["src/*"]

apps/website/worker-configuration.d.ts

@@ -0,0 +1,11 @@
+// Generated by Wrangler on Sat Aug 03 2024 17:34:42 GMT+0200 (Central European Summer Time)
+// by running `wrangler types`
+
+interface Env {
+	PRO: string;
+	DISCORD_CLIENT_ID: string;
+	DISCORD_CLIENT_SECRET: string;
+	DISCORD_BOT_TOKEN: string;
+	DISCORD_REDIRECT_URI: string;
+	DB: D1Database;
+}

apps/website/wrangler.toml

@@ -0,0 +1,6 @@
+name = "roles-bot"
+
+[[d1_databases]]
+binding = "DB" # i.e. available in your Worker on env.DB
+database_name = "roles-bot-dashboard"
+database_id = "fdc6f902-9142-44bf-9be9-b38d351ffd27"