feat: implement Trello integration with OAuth and user fields (#48)

* feat: implement Trello integration with OAuth and user fields

* feat: migrate Trello integration to new integrations table

* refactor: migrate Trello integration to use new integration system

* refactor: migrate Trello integration to use new integrations table

* fix: add loading check for Trello integration and update VSCode settings

* feat: enhance import boards UI with dynamic integration providers and local storage config

* feat: add select/unselect all buttons and loading state to board import form

* feat: add Trello import env vars on README

* docs: update Trello import guide to use OAuth flow instead of API keys

* feat: add integrations table for OAuth token management

* feat: connect trello from import modal

* refactor: consolidate Trello integration endpoints into unified integration router

* fix: trello import again

* refactor: generalize integration authorization flow and improve error handling

* refactor: update Trello API endpoints and tags for better organization

* feat: add Integrations tag to OpenAPI specification

* refactor: update Trello auth endpoint to use generic integration provider param

* refactor: move Trello integration logic from trello.ts to import.ts router

* refactor: consolidate Trello integration endpoints and fix API URL

* chore: remove debug logs

---------

Co-authored-by: Henry <henry_ball@hotmail.co.uk>

apps/web/src/pages/api/auth/[...all].ts

@@ -5,6 +5,6 @@ import { createDrizzleClient } from "@kan/db/client";
 
 export const config = { api: { bodyParser: false } };
 
-const auth = initAuth(createDrizzleClient());
+export const auth = initAuth(createDrizzleClient());
 
 export default toNodeHandler(auth.handler);

apps/web/src/pages/api/trello/authenticate.ts

@@ -0,0 +1,51 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import { createNextApiContext } from "@kan/api/trpc";
+import { integrations } from "@kan/db/schema";
+import { addYears } from "date-fns";
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  if (req.method !== "POST") {
+    return res.status(405).json({ message: "Method not allowed" });
+  }
+
+  const { user } = await createNextApiContext(req);
+
+  if (!user)
+    return res.status(401).json({ message: "User not authenticated" });
+
+  const apiKey = process.env.TRELLO_APP_API_KEY;
+
+  if (!apiKey)
+    return res.status(500).json({ message: "Trello API key not set in Environment Variables" });
+
+  const token = req.body.token;
+
+  if (!token)
+    return res.status(400).json({ message: "No token found" });
+
+  try {
+    const { db } = await createNextApiContext(req);
+
+    await db.insert(integrations).values({
+      provider: "trello",
+      userId: user.id,
+      accessToken: token,
+      expiresAt: addYears(new Date(), 1),
+    }).onConflictDoUpdate({
+      set: {
+        accessToken: token,
+        expiresAt: addYears(new Date(), 1),
+      },
+      target: [integrations.userId, integrations.provider],
+    });
+
+    return res.status(200).json({ message: "Trello authentication successful" });
+  } catch (err) {
+    console.error("Trello authentication error:", err);
+    return res.status(400).json({ message: "Trello authentication failed" });
+  }
+}

apps/web/src/pages/settings/trello/authorize.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+
+export default function TrelloAuthorize() {
+    useEffect(() => {
+        const hash = window.location.hash;
+        const token = hash.split("=")[1];
+        if (token) {
+            console.log("Posting token to /api/trello/authenticate", token);
+            fetch("/api/trello/authenticate", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({ token }),
+            }).then(() => {
+                window.close();
+            });
+        }
+    }, []);
+
+    return <div className="flex h-[200px] items-center justify-center">
+        <p className="text-center">Connecting to Trello...</p>
+    </div>;
+}