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

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>