feat(frontend): Add organization creation, deletion, add better-auth organization plugin

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>

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>

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',