feat: allow user to use other forges

.env.sample

@@ -1,6 +1,6 @@
 OPENAI_API_KEY=
-NUXT_PUBLIC_GITHUB_CLIENT_ID=
-NUXT_GITHUB_CLIENT_SECRET=
+GITHUB_CLIENT_ID=
+GITHUB_CLIENT_SECRET=
 NUXT_API_URL=
 DATA_PATH=./data
 DATABASE_NAME=

.prettierignore

@@ -2,4 +2,5 @@ pnpm-lock.yaml
 dist
 coverage/
 .pnpm-store/
-server/db
+migrations/meta/*.json
+migrations/*.sql

README.md

@@ -10,8 +10,13 @@ Use the command `python uvicorn pyserver:app --reload --app-dir=ai` to start the
 
 ## Database
 
-We are using Drizzle ORM and sqlite as of now. The schemas need to be inside db/schemas and the migrations will be inside db/migrations. checkout `drizzle.config.ts` for the settings.
-use `pnpm push-schema` to directly update the database with new table schemas. This is only intended for development only. Use other commands along with `await migrate(db, { migrationsFolder: "" });` function call in a production environment. More information [https://orm.drizzle.team/kit-docs/quick](here). User `pnpm db-exporer` to open drizzle studio which is in beta state right now.
+Codecaptain is using [Drizzle ORM](https://orm.drizzle.team) and sqlite.
+
+### Migrations
+
+- To generate new migrations run: `pnpm db:generate-migration`
+- To migrate the database and seed it run: `pnpm db:up`
+- To open the database explorer run: `pnpm db:explorer`
 
 ## Appreciations
 

composables/auth.ts

@@ -0,0 +1,43 @@
+import jwt_decode from 'jwt-decode';
+
+export const useAuth = () => {
+  const token = useCookie('token');
+  const user = ref<{
+    name: string;
+    avatarUrl: string;
+    email: string;
+  }>();
+
+  function login(forgeId: number) {
+    //TODO: find a better way to share the forge id that is connected.
+    localStorage.setItem('forgeId', String(forgeId));
+    window.location.href = `/api/auth/login?forgeId=${forgeId}`;
+  }
+
+  function logout() {
+    localStorage.removeItem('forgeId');
+    window.location.href = '/api/auth/logout';
+  }
+
+  if (token.value) {
+    const decodedToken = jwt_decode(token.value) as { userId: string; exp: number; iat: number };
+
+    // TODO: logout if token is expired and we are in the browser => check if there is a better way
+    if (decodedToken.exp * 1000 < Date.now() && globalThis.window) {
+      logout();
+    }
+
+    // TODO: load user data
+    // TODO: fix for SSR
+    (async () => {
+      user.value = await $fetch('/api/user');
+    })();
+  }
+
+  return {
+    isAuthenticated: !!token.value,
+    user,
+    login,
+    logout,
+  };
+};

drizzle.config.ts

@@ -3,7 +3,7 @@ import type { Config } from 'drizzle-kit';
 // For config references visit  https://orm.drizzle.team/kit-docs/config-reference
 
 export default {
-  schema: ['./server/**/*.schema.ts'],
+  schema: ['./server/schemas/*schemas.ts'],
   out: './server/db/migrations',
   dbCredentials: {
     url: 'code_captain.db',

layouts/default.vue

@@ -7,15 +7,19 @@
       >
       <div class="ml-auto flex gap-4 items-center">
         <template v-if="user">
-          <img :src="user.avatar_url" alt="User profile icon" class="w-8 h-auto rounded-full" />
+          <img :src="user.avatarUrl" alt="User profile icon" class="w-8 h-auto rounded-full" />
           <button
             class="border rounded px-2 py-1 flex items-center justify-center gap-1 hover:bg-black hover:text-white"
             @click="logout"
           >
             Logout
           </button>
         </template>
-        <Button v-else @click="login"> <Icon name="fa-brands:github" /> Login with GitHub </Button>
+        <template v-else>
+          <Button v-for="forge in forges" :key="forge.id" @click="login(forge.id)">
+            <Icon name="fa-brands:github" /> Login with {{ forge.name }}
+          </Button>
+        </template>
       </div>
     </header>
 
@@ -31,9 +35,8 @@
 </template>
 
 <script setup lang="ts">
-const login = githubLogin;
-const logout = githubLogout;
-const user = await fetchGithubUser();
+const { user, login, logout } = useAuth();
+const forges = await $fetch('/api/forges');
 </script>
 
 <style>

nuxt.config.ts

@@ -2,14 +2,6 @@
 export default defineNuxtConfig({
   modules: ['@nuxtjs/tailwindcss', 'nuxt-icon'],
   runtimeConfig: {
-    public: {
-      github: {
-        clientId: process.env.NUXT_PUBLIC_GITHUB_CLIENT_ID,
-      },
-    },
-    github: {
-      clientSecret: process.env.NUXT_GITHUB_CLIENT_SECRET,
-    },
     api: {
       url: process.env.NUXT_API_URL || 'http://localhost:8000',
     },

package.json

@@ -11,6 +11,7 @@
     "db:drop": "drizzle-kit drop",
     "db:push": "drizzle-kit push:sqlite",
     "db:explorer": "drizzle-kit studio",
+    "db:up": "tsx server/contrib/index.ts",
     "clean": "rm -rf dist/ node_modules/ .eslintcache",
     "format:check": "prettier --check .",
     "format:fix": "prettier --write .",
@@ -19,17 +20,24 @@
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "@nuxtjs/tailwindcss": "6.8.0",
-    "@types/node": "18",
     "@types/better-sqlite3": "7.6.4",
+    "@types/jsonwebtoken": "^9.0.2",
+    "@types/node": "18",
     "better-sqlite3": "8.5.0",
+    "dotenv": "^16.3.1",
     "drizzle-kit": "^0.19.12",
     "nuxt": "3.6.1",
     "prettier": "^3.0.1",
+    "tsx": "^3.12.7",
     "typescript": "^5.1.6"
   },
   "dependencies": {
+    "@gitbeaker/core": "^39.10.3",
+    "@gitbeaker/rest": "^39.10.3",
     "better-sqlite3": "8.5.0",
     "drizzle-orm": "0.27.2",
+    "jsonwebtoken": "^9.0.1",
+    "jwt-decode": "^3.1.2",
     "nuxt-icon": "0.4.1",
     "octokit": "2.1.0",
     "simple-git": "3.19.1",

pages/index.vue

@@ -4,13 +4,12 @@
 
     <div class="flex flex-wrap gap-4 justify-center mt-4 min-h-fit max-w-4xl">
       <template v-if="repositories">
-        <Card v-for="repo in repositories.filter((r) => r.active)" :key="repo.id" :href="`/repos/${repo.id}/chat`">
+        <Card v-for="repo in repositories" :key="repo.id" :href="`/repos/${repo.id}/chat`">
           <div class="flex flex-col items-center p-2 gap-2 w-64 h-full justify-between">
-            <span class="font-bold text-gray-300 text-xl">{{ repo.full_name }}</span>
+            <span class="font-bold text-gray-300 text-xl">{{ repo.name }}</span>
             <Button class="flex justify-center items-center">Open</Button>
           </div>
         </Card>
-
         <Card href="/repos/add">
           <div class="flex flex-col items-center justify-between p-2 h-full gap-2 w-64">
             <span class="font-bold text-gray-300 text-xl">Add a repository</span>
@@ -19,17 +18,31 @@
         </Card>
       </template>
     </div>
+
+    <div v-if="forges && forges.length > 0" class="flex flex-col mt-8">
+      <span class="text-xl font-bold">Forges</span>
+      <div v-for="forge in forges" :key="forge.id">
+        <Button v-if="!forge.isConnected" class="flex justify-center items-center" @click="login(forge.id)"
+          >Connect to {{ forge.name }}</Button
+        >
+        <NuxtLink v-else to="/repos/add">{{ forge.name }} {{ forge.host }} (connected)</NuxtLink>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-const githubCookie = useGithubCookie();
+const { login } = useAuth();
 
 const repositories = ref(
-  await $fetch('/api/repos/list', {
-    headers: {
-      gh_token: githubCookie.value!,
-    },
-  }),
+  (
+    await useFetch('/api/repos/list', {
+      server: false,
+    })
+  ).data,
 );
+
+const { data: forges } = await useFetch('/api/user/forges', {
+  server: false,
+});
 </script>

pages/repos/add.vue

@@ -3,7 +3,23 @@
     <span class="m-auto text-2xl">Cloning and indexing repo ...</span>
   </div>
 
+  <div v-else-if="!selectedForgeId">
+    <li
+      v-for="forge in forges?.filter((f) => f.isConnected)"
+      :key="forge.id"
+      class="cursor-pointer hover:underline"
+      @click="selectedForgeId = forge.id"
+    >
+      {{ forge.name }} - {{ forge.host }}
+    </li>
+  </div>
+
   <div v-else class="mx-auto flex flex-col items-center max-w-2xl">
+    <div v-if="selectedForge" class="flex items-center gap-2">
+      <span class="text-xl font-bold">{{ selectedForge?.name }} - {{ selectedForge.host }}</span>
+      <div @click="selectedForgeId = undefined" class="cursor-pointer">x</div>
+    </div>
+
     <TextInput
       :model-value="search"
       placeholder="Search for a repo ..."
@@ -18,34 +34,35 @@
         :key="repo.id"
         class="flex border-b border-gray-200 items-center p-2 gap-2 w-full justify-between min-w-0"
       >
-        <span class="font-bold text-gray-300 flex-wrap truncate overflow-ellipsis">{{ repo.full_name }}</span>
+        <span class="font-bold text-gray-300 flex-wrap truncate overflow-ellipsis">{{ repo.name }}</span>
         <Button v-if="repo.active" :href="`/repos/${repo.id}/chat`">Open</Button>
-        <Button v-else @click="cloneRepo(repo.id)">Activate</Button>
+        <Button v-else @click="cloneRepo(repo.id)">Import</Button>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-const router = useRouter();
-const githubCookie = useGithubCookie();
-const user = await fetchGithubUser();
 const loading = ref(false);
+const { user } = useAuth();
+const { data: forges } = await useFetch('/api/user/forges', {
+  server: false,
+});
+const selectedForgeId = ref<number>();
+const selectedForge = computed(() => forges.value?.find((f) => f.id === selectedForgeId.value));
 
-const search = ref(`user:${user.value?.login}`);
+const search = ref('');
 const { data: repositories } = await useAsyncData(
   'repositories',
   () =>
-    $fetch('/api/repos/search', {
-      headers: {
-        gh_token: githubCookie.value!,
-      },
+    $fetch(`/api/forges/${selectedForgeId.value}/repos/search`, {
       query: {
         search: search.value,
       },
     }),
   {
-    watch: [search],
+    server: false,
+    watch: [search, selectedForgeId],
   },
 );
 
@@ -60,18 +77,23 @@ function debounce<T extends Function>(cb: T, wait = 20) {
 
 const updateSearch = debounce((_search: string) => {
   search.value = _search;
-}, 500);
+  console.log('search', _search);
+}, 1000);
 
 async function cloneRepo(repoId: string) {
   loading.value = true;
+  const forgeId = selectedForgeId.value;
   try {
-    await $fetch(`/api/repos/${repoId}/clone`, {
-      key: `cloneRepo-${repoId}`,
+    await $fetch(`/api/forges/${forgeId}/repos/add`, {
       method: 'POST',
-      headers: {
-        gh_token: githubCookie.value!,
+      body: {
+        repoId,
       },
     });
+  } catch (error) {
+    console.log(error);
+  }
+  try {
     await navigateTo(`/repos/${repoId}/chat`);
   } catch (error) {
     console.error(error);