From eed4b673c0dad58e13e680166d660c06da5f9bdd Mon Sep 17 00:00:00 2001
From: Denis Lugowski <denis.lugowski@gmail.com>
Date: Sun, 6 Apr 2025 09:35:15 +0200
Subject: [PATCH] feat(frontend): Add organization creation, deletion, add
 better-auth organization plugin

---
 .vscode/launch.json                           |   2 +-
 .../2025-02-07T09-47-53.111Z.sql              |   7 -
 .../2025-03-30T06-50-03.565Z.sql              |  13 ++
 .../components/CreateOrganizationModal.vue    | 117 ++++++++++
 .../components/InviteMemberModal.vue          |  82 +++++++
 legalconsenthub/components/UserMenu.vue       |   5 +
 legalconsenthub/pages/administration.vue      | 218 ++++++++++++++++++
 legalconsenthub/server/utils/auth.ts          |   6 +-
 legalconsenthub/stores/useUserStore.ts        |  39 ++++
 legalconsenthub/utils/auth-client.ts          |  15 +-
 legalconsenthub/utils/auth-types.ts           |   6 +
 11 files changed, 496 insertions(+), 14 deletions(-)
 delete mode 100644 legalconsenthub/better-auth_migrations/2025-02-07T09-47-53.111Z.sql
 create mode 100644 legalconsenthub/better-auth_migrations/2025-03-30T06-50-03.565Z.sql
 create mode 100644 legalconsenthub/components/CreateOrganizationModal.vue
 create mode 100644 legalconsenthub/components/InviteMemberModal.vue
 create mode 100644 legalconsenthub/pages/administration.vue
 create mode 100644 legalconsenthub/stores/useUserStore.ts
 create mode 100644 legalconsenthub/utils/auth-types.ts

diff --git a/.vscode/launch.json b/.vscode/launch.json
index 25e60d9..b57f7d5 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -7,7 +7,7 @@
       "type": "chrome",
       "request": "launch",
       "name": "client: chrome",
-      "url": "http://localhost:3000",
+      "url": "http://localhost:3001",
       "webRoot": "${workspaceFolder}/legalconsenthub"
     },
     {
diff --git a/legalconsenthub/better-auth_migrations/2025-02-07T09-47-53.111Z.sql b/legalconsenthub/better-auth_migrations/2025-02-07T09-47-53.111Z.sql
deleted file mode 100644
index 64b3e5e..0000000
--- a/legalconsenthub/better-auth_migrations/2025-02-07T09-47-53.111Z.sql
+++ /dev/null
@@ -1,7 +0,0 @@
-create table "better_auth_user" ("id" text not null primary key, "name" text not null, "email" text not null unique, "emailVerified" integer not null, "image" text, "createdAt" date not null, "updatedAt" date not null);
-
-create table "better_auth_session" ("id" text not null primary key, "expiresAt" date not null, "token" text not null unique, "createdAt" date not null, "updatedAt" date not null, "ipAddress" text, "userAgent" text, "userId" text not null references "better_auth_user" ("id"));
-
-create table "better_auth_account" ("id" text not null primary key, "accountId" text not null, "providerId" text not null, "userId" text not null references "better_auth_user" ("id"), "accessToken" text, "refreshToken" text, "idToken" text, "accessTokenExpiresAt" date, "refreshTokenExpiresAt" date, "scope" text, "password" text, "createdAt" date not null, "updatedAt" date not null);
-
-create table "better_auth_verification" ("id" text not null primary key, "identifier" text not null, "value" text not null, "expiresAt" date not null, "createdAt" date, "updatedAt" date)
\ No newline at end of file
diff --git a/legalconsenthub/better-auth_migrations/2025-03-30T06-50-03.565Z.sql b/legalconsenthub/better-auth_migrations/2025-03-30T06-50-03.565Z.sql
new file mode 100644
index 0000000..2316b7d
--- /dev/null
+++ b/legalconsenthub/better-auth_migrations/2025-03-30T06-50-03.565Z.sql
@@ -0,0 +1,13 @@
+create table "user" ("id" text not null primary key, "name" text not null, "email" text not null unique, "emailVerified" integer not null, "image" text, "createdAt" date not null, "updatedAt" date not null);
+
+create table "session" ("id" text not null primary key, "expiresAt" date not null, "token" text not null unique, "createdAt" date not null, "updatedAt" date not null, "ipAddress" text, "userAgent" text, "userId" text not null references "user" ("id"), "activeOrganizationId" text);
+
+create table "account" ("id" text not null primary key, "accountId" text not null, "providerId" text not null, "userId" text not null references "user" ("id"), "accessToken" text, "refreshToken" text, "idToken" text, "accessTokenExpiresAt" date, "refreshTokenExpiresAt" date, "scope" text, "password" text, "createdAt" date not null, "updatedAt" date not null);
+
+create table "verification" ("id" text not null primary key, "identifier" text not null, "value" text not null, "expiresAt" date not null, "createdAt" date, "updatedAt" date);
+
+create table "organization" ("id" text not null primary key, "name" text not null, "slug" text not null unique, "logo" text, "createdAt" date not null, "metadata" text);
+
+create table "member" ("id" text not null primary key, "organizationId" text not null references "organization" ("id"), "userId" text not null references "user" ("id"), "role" text not null, "createdAt" date not null);
+
+create table "invitation" ("id" text not null primary key, "organizationId" text not null references "organization" ("id"), "email" text not null, "role" text, "status" text not null, "expiresAt" date not null, "inviterId" text not null references "user" ("id"));
\ No newline at end of file
diff --git a/legalconsenthub/components/CreateOrganizationModal.vue b/legalconsenthub/components/CreateOrganizationModal.vue
new file mode 100644
index 0000000..b030575
--- /dev/null
+++ b/legalconsenthub/components/CreateOrganizationModal.vue
@@ -0,0 +1,117 @@
+<template>
+  <UModal
+    v-model:open="open"
+    title="New Organization"
+    description="Create a new organization to collaborate with your team"
+  >
+    <template #default>
+      <UButton icon="i-heroicons-plus" @click="open = true"> Organisation erstellen </UButton>
+    </template>
+
+    <template #body>
+      <UForm :state="state" :schema="schema" class="space-y-4" @submit="onSubmit">
+        <UFormField label="Name" name="name">
+          <UInput v-model="state.name" class="w-full" />
+        </UFormField>
+
+        <UFormField label="Slug" name="slug">
+          <UInput v-model="state.slug" class="w-full" @input="isSlugEdited = true" />
+        </UFormField>
+
+        <UFormField label="Logo (optional)" name="logo">
+          <input type="file" accept="image/*" @change="handleLogoChange" />
+          <img v-if="state.logo" :src="state.logo" alt="Logo preview" class="w-16 h-16 object-cover mt-2" />
+        </UFormField>
+        <div class="flex justify-end gap-2">
+          <UButton type="submit" :loading="loading">
+            {{ loading ? 'Creating...' : 'Create' }}
+          </UButton>
+        </div>
+      </UForm>
+    </template>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+import type { FormSubmitEvent } from '@nuxt/ui'
+import * as z from 'zod'
+
+const emit = defineEmits(['formSubmitted'])
+
+const open = ref(false)
+const loading = ref(false)
+const isSlugEdited = ref(false)
+
+type Schema = z.output<typeof schema>
+
+const schema = z.object({
+  name: z.string().min(2, 'Too short'),
+  slug: z.string().min(2, 'Too short'),
+  logo: z.string().optional()
+})
+
+const state = reactive<Partial<Schema>>({
+  name: undefined,
+  slug: undefined,
+  logo: undefined
+})
+
+watch(
+  () => state.name,
+  (newName) => {
+    if (!isSlugEdited.value) {
+      state.slug = (newName ?? '').trim().toLowerCase().replace(/\s+/g, '-')
+    }
+  }
+)
+
+watch(open, (val) => {
+  if (val) {
+    state.name = ''
+    state.slug = ''
+    state.logo = undefined
+    isSlugEdited.value = false
+  }
+})
+
+function handleLogoChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input?.files?.[0]
+  if (!file) return
+
+  const reader = new FileReader()
+  reader.onload = () => {
+    state.logo = reader.result as string
+  }
+  reader.readAsDataURL(file)
+}
+
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  console.log('onSubmit', state)
+  loading.value = true
+  await organization.create(
+    {
+      name: event.data.name,
+      slug: event.data.slug,
+      logo: event.data.logo
+    },
+    {
+      onSuccess: () => {
+        useToast().add({ title: 'Organisation erfolgreich erstellt', color: 'success' })
+        emit('formSubmitted', { name: state.name, slug: state.slug })
+        open.value = false
+      },
+      onError: (ctx) => {
+        useToast().add({
+          title: 'Fehler bei der Erstellung der Organisation',
+          description: ctx.error.message,
+          color: 'error'
+        })
+      },
+      onResponse: () => {
+        loading.value = false
+      }
+    }
+  )
+}
+</script>
diff --git a/legalconsenthub/components/InviteMemberModal.vue b/legalconsenthub/components/InviteMemberModal.vue
new file mode 100644
index 0000000..63cd09d
--- /dev/null
+++ b/legalconsenthub/components/InviteMemberModal.vue
@@ -0,0 +1,82 @@
+<template>
+  <UModal v-model:open="open" title="Invite Member" description="Invite a member to your organization">
+    <UButton icon="i-lucide-mail-plus" variant="outline" size="sm" @click="open = true"> Invite Member </UButton>
+
+    <template #body>
+      <UForm :state="form" class="space-y-4" @submit="handleSubmit">
+        <UFormField label="Email" name="email">
+          <UInput v-model="form.email" type="email" placeholder="Email" class="w-full" />
+        </UFormField>
+
+        <UFormField label="Role" name="role">
+          <USelect
+            v-model="form.role"
+            :items="roleOptions"
+            placeholder="Select a role"
+            value-key="value"
+            class="w-full"
+          />
+        </UFormField>
+
+        <div class="flex justify-end">
+          <UButton type="submit" :loading="loading">
+            {{ loading ? 'Inviting...' : 'Invite' }}
+          </UButton>
+        </div>
+      </UForm>
+    </template>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  organization: ActiveOrganization
+}>()
+
+const emit = defineEmits(['update'])
+
+const open = ref(false)
+const loading = ref(false)
+
+const form = ref({
+  email: '',
+  role: 'member'
+})
+
+const roleOptions = [
+  { label: 'Admin', value: 'admin' },
+  { label: 'Member', value: 'member' }
+]
+
+watch(open, (val) => {
+  if (val) {
+    form.value = { email: '', role: 'member' }
+  }
+})
+
+async function handleSubmit() {
+  loading.value = true
+  await organization.inviteMember({
+    email: form.value.email,
+    role: form.value.role as 'member' | 'admin',
+    fetchOptions: {
+      throw: true,
+      onSuccess: (ctx) => {
+        const updatedOrg = {
+          ...props.organization,
+          invitations: [...(props.organization.invitations || []), ctx.data]
+        }
+        emit('update', updatedOrg)
+        open.value = false
+      },
+      onError: (error) => {
+        useToast().add({ title: 'Fehler beim Einladen', description: error.error.message, color: 'error' })
+      },
+      onResponse: () => {
+        loading.value = false
+      }
+    }
+  })
+  useToast().add({ title: 'Invitation sent', color: 'success' })
+}
+</script>
diff --git a/legalconsenthub/components/UserMenu.vue b/legalconsenthub/components/UserMenu.vue
index bee395e..b2eca77 100644
--- a/legalconsenthub/components/UserMenu.vue
+++ b/legalconsenthub/components/UserMenu.vue
@@ -83,6 +83,11 @@ const items = computed<DropdownMenuItem[][]>(() => [
       label: 'Profile',
       icon: 'i-lucide-user'
     },
+    {
+      label: 'Administration',
+      icon: 'i-lucide-user',
+      to: '/administration'
+    },
     {
       label: 'Settings',
       icon: 'i-lucide-settings',
diff --git a/legalconsenthub/pages/administration.vue b/legalconsenthub/pages/administration.vue
new file mode 100644
index 0000000..5274c80
--- /dev/null
+++ b/legalconsenthub/pages/administration.vue
@@ -0,0 +1,218 @@
+<template>
+  <UDashboardPanel>
+    <template #header>
+      <UDashboardNavbar title="Administration" :ui="{ right: 'gap-3' }">
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </template>
+
+        <template #right />
+      </UDashboardNavbar>
+
+      <UDashboardToolbar>
+        <template #left />
+      </UDashboardToolbar>
+    </template>
+
+    <template #body>
+      <div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-2xl mx-auto">
+        <UPageCard
+          title="Organization Selection"
+          description="Choose an organization or create a new one."
+          class="mb-6"
+        >
+          <div class="flex justify-between items-center">
+            <USelect
+              v-model="selectedOrgId"
+              :items="selectItems"
+              value-key="value"
+              placeholder="Select organization"
+              class="w-64"
+            />
+            <CreateOrganizationModal />
+          </div>
+        </UPageCard>
+
+        <UPageCard
+          title="Organization Overview"
+          description="View your current organization and its details."
+          class="mb-6"
+        >
+          <div class="flex gap-4 items-center">
+            <UAvatar :src="activeOrganization?.logo || undefined" size="md" alt="Org Logo" class="rounded" />
+            <div>
+              <p class="font-semibold">{{ activeOrganization?.name }}</p>
+              <p class="text-xs text-gray-500">{{ activeOrganization?.members?.length || 1 }} members</p>
+            </div>
+          </div>
+
+          <div class="flex justify-end mt-4">
+            <UButton color="error" icon="i-lucide-trash" @click="deleteOrganization"> Delete Organization </UButton>
+          </div>
+        </UPageCard>
+
+        <UPageCard title="Members & Invitations" description="Manage team members and pending invites.">
+          <div class="flex flex-col md:flex-row gap-8">
+            <!-- Members -->
+            <div class="flex-1">
+              <p class="font-medium mb-2">Members</p>
+              <div v-if="activeOrganization?.members" class="space-y-2">
+                <div
+                  v-for="member in activeOrganization.members"
+                  :key="member.id"
+                  class="flex justify-between items-center"
+                >
+                  <div class="flex items-center gap-2">
+                    <UAvatar :src="member.user.image || undefined" size="sm" />
+                    <div>
+                      <p class="text-sm">{{ member.user.name }}</p>
+                      <p class="text-xs text-gray-500">{{ member.role }}</p>
+                    </div>
+                  </div>
+                  <div v-if="session && canRemove({ role: 'owner' }, member)">
+                    <UButton size="xs" color="error" @click="organization.removeMember({ memberIdOrEmail: member.id })">
+                      {{ member.user.id === session.id ? 'Leave' : 'Remove' }}
+                    </UButton>
+                  </div>
+                </div>
+                <div v-if="!activeOrganization?.id" class="flex items-center gap-2">
+                  <UAvatar :src="session?.image ?? undefined" />
+                  <div>
+                    <p class="text-sm">{{ session?.name }}</p>
+                    <p class="text-xs text-gray-500">Owner</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Invitations -->
+            <div class="flex-1">
+              <p class="font-medium mb-2">Invites</p>
+              <div class="space-y-2">
+                <div
+                  v-for="inv in activeOrganization?.invitations.filter((i: Invitation) => i.status === 'pending')"
+                  :key="inv.id"
+                  class="flex justify-between items-center"
+                >
+                  <div>
+                    <p class="text-sm">{{ inv.email }}</p>
+                    <p class="text-xs text-gray-500">{{ inv.role }}</p>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <UButton
+                      size="xs"
+                      color="error"
+                      :loading="isRevoking.includes(inv.id)"
+                      @click="() => handleRevokeInvitation(inv.id)"
+                    >
+                      Revoke
+                    </UButton>
+                    <UButton icon="i-lucide-copy" size="xs" @click="copy(getInviteLink(inv.id))">
+                      {{ copied ? 'Copied!' : 'Copy' }}
+                    </UButton>
+                  </div>
+                </div>
+                <p v-if="!activeOrganization?.invitations.length" class="text-sm text-gray-500">
+                  No active invitations
+                </p>
+                <p v-if="!activeOrganization?.id" class="text-xs text-gray-500">
+                  You can't invite members to your personal workspace.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-end mt-6">
+            <InviteMemberModal
+              v-if="activeOrganization?.id"
+              :organization="activeOrganization"
+              @update="activeOrganization = $event"
+            />
+          </div>
+        </UPageCard>
+      </div>
+    </template>
+  </UDashboardPanel>
+</template>
+
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+
+const { copy, copied } = useClipboard()
+const toast = useToast()
+
+const selectedOrgId = ref<string | undefined>(undefined)
+const activeOrganization = ref<ActiveOrganization | null>(null)
+
+const organizations = computed(() => useListOrganizations().value.data || [])
+
+const selectItems = computed(() => organizations.value.map((org) => ({ label: org.name, value: org.id })))
+
+watch(selectedOrgId, async (newId) => {
+  const { data } = await organization.setActive({ organizationId: newId || null })
+  activeOrganization.value = data
+})
+
+const { data: sessionData } = useSession().value
+const session = computed(() => sessionData?.user)
+
+const isRevoking = ref<string[]>([])
+
+function isAdminOrOwner(member: { role: string }) {
+  return member.role === 'owner' || member.role === 'admin'
+}
+
+function canRemove(current: { role: string }, target: { role: string }) {
+  return target.role !== 'owner' && isAdminOrOwner(current)
+}
+
+async function handleRevokeInvitation(invitationId: string) {
+  isRevoking.value.push(invitationId)
+  await organization.cancelInvitation(
+    { invitationId },
+    {
+      onSuccess: () => {
+        toast.add({ title: 'Success', description: 'Invitation revoked', color: 'success' })
+        isRevoking.value = isRevoking.value.filter((id) => id !== invitationId)
+        if (activeOrganization.value) {
+          activeOrganization.value.invitations = activeOrganization.value.invitations.filter(
+            (inv) => inv.id !== invitationId
+          )
+        }
+      },
+      onError: (ctx) => {
+        toast.add({ title: 'Error', description: ctx.error.message, color: 'error' })
+        isRevoking.value = isRevoking.value.filter((id) => id !== invitationId)
+      }
+    }
+  )
+}
+
+function getInviteLink(inviteId: string): string {
+  return `${window.location.origin}/accept-invitation/${inviteId}`
+}
+
+async function deleteOrganization() {
+  if (!activeOrganization.value?.id) return
+
+  const confirmed = confirm(
+    `Are you sure you want to delete the organization "${activeOrganization.value.name}"? This cannot be undone.`
+  )
+
+  if (!confirmed) return
+
+  await authClient.organization.delete(
+    { organizationId: activeOrganization.value.id },
+    {
+      onSuccess: () => {
+        toast.add({ title: 'Organization deleted', color: 'success' })
+        activeOrganization.value = null
+        selectedOrgId.value = undefined
+      },
+      onError: (ctx) => {
+        toast.add({ title: 'Error deleting organization', description: ctx.error.message, color: 'error' })
+      }
+    }
+  )
+}
+</script>
diff --git a/legalconsenthub/server/utils/auth.ts b/legalconsenthub/server/utils/auth.ts
index 332f1a0..42ddb6d 100644
--- a/legalconsenthub/server/utils/auth.ts
+++ b/legalconsenthub/server/utils/auth.ts
@@ -1,11 +1,9 @@
 import { betterAuth } from 'better-auth'
 import Database from 'better-sqlite3'
+import { organization } from 'better-auth/plugins'
 
 export const auth = betterAuth({
   database: new Database('./sqlite.db'),
   emailAndPassword: { enabled: true, autoSignIn: false },
-  user: { modelName: 'better_auth_user' },
-  session: { modelName: 'better_auth_session' },
-  account: { modelName: 'better_auth_account' },
-  verification: { modelName: 'better_auth_verification' }
+  plugins: [organization()]
 })
diff --git a/legalconsenthub/stores/useUserStore.ts b/legalconsenthub/stores/useUserStore.ts
new file mode 100644
index 0000000..b684435
--- /dev/null
+++ b/legalconsenthub/stores/useUserStore.ts
@@ -0,0 +1,39 @@
+import type { FormSubmitEvent } from '@nuxt/ui'
+
+export const useUserStore = defineStore('User', () => {
+  const name = ref('')
+
+  async function signUp(payload: FormSubmitEvent<Schema>) {
+    await authClient.signUp.email(
+      {
+        email: payload.data.email,
+        password: payload.data.password,
+        name: payload.data.name
+      },
+      {
+        onRequest: (ctx) => {
+          // TODO: Show loading spinner
+          console.log('Sending register request')
+        },
+        onResponse: () => {
+          // TODO: Hide loading spinner
+          console.log('Receiving register response')
+        },
+        onSuccess: async (ctx) => {
+          console.log('Successfully registered!')
+          await navigateTo('/')
+        },
+        onError: (ctx) => {
+          console.log(ctx.error.message)
+          useToast().add({
+            title: 'Fehler bei der Registrierung',
+            description: ctx.error.message,
+            color: 'success'
+          })
+        }
+      }
+    )
+  }
+
+  return { name, signUp }
+})
diff --git a/legalconsenthub/utils/auth-client.ts b/legalconsenthub/utils/auth-client.ts
index 37f8ca4..ed76128 100644
--- a/legalconsenthub/utils/auth-client.ts
+++ b/legalconsenthub/utils/auth-client.ts
@@ -1,7 +1,18 @@
 import { createAuthClient } from 'better-auth/vue'
+import { organizationClient } from 'better-auth/client/plugins'
 
 export const authClient = createAuthClient({
-  baseURL: 'http://localhost:3000'
+  baseURL: 'http://localhost:3001',
+  plugins: [organizationClient()]
 })
 
-export const { signIn, signOut, signUp, useSession, forgetPassword, resetPassword } = authClient
+export const {
+  signIn,
+  signOut,
+  signUp,
+  useSession,
+  forgetPassword,
+  resetPassword,
+  organization,
+  useListOrganizations
+} = authClient
diff --git a/legalconsenthub/utils/auth-types.ts b/legalconsenthub/utils/auth-types.ts
new file mode 100644
index 0000000..775a278
--- /dev/null
+++ b/legalconsenthub/utils/auth-types.ts
@@ -0,0 +1,6 @@
+import type { auth } from '../server/utils/auth'
+import type { authClient } from './auth-client'
+
+export type Session = typeof auth.$Infer.Session
+export type ActiveOrganization = typeof authClient.$Infer.ActiveOrganization
+export type Invitation = typeof authClient.$Infer.Invitation