feat(frontend): Move better auth functions into separate file

legalconsenthub/components/CreateOrganizationModal.vue

@@ -33,11 +33,12 @@
 </template>
 
 <script setup lang="ts">
-import type { FormSubmitEvent } from '@nuxt/ui'
 import * as z from 'zod'
+import { useBetterAuth } from '~/composables/useBetterAuth'
 
 const emit = defineEmits(['formSubmitted'])
 
+const { createOrganization } = useBetterAuth()
 const open = ref(false)
 const loading = ref(false)
 const isSlugEdited = ref(false)
@@ -86,32 +87,14 @@ function handleLogoChange(event: Event) {
   reader.readAsDataURL(file)
 }
 
-async function onSubmit(event: FormSubmitEvent<Schema>) {
+async function onSubmit() {
-  console.log('onSubmit', state)
   loading.value = true
-  await organization.create(
+
-    {
+  if (!state.name || !state.slug) return
-      name: event.data.name,
+
-      slug: event.data.slug,
+  await createOrganization(state.name, state.slug, state.logo)
-      logo: event.data.logo
+  emit('formSubmitted', { name: state.name, slug: state.slug })
-    },
+  loading.value = false
-    {
+  open.value = false
-      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/composables/useBetterAuth.ts

@@ -0,0 +1,49 @@
+const activeOrganization = ref<ActiveOrganization | null>(null)
+const selectedOrgId = ref<string | undefined>(undefined)
+
+export function useBetterAuth() {
+  const toast = useToast()
+
+  async function createOrganization(name: string, slug: string, logo?: string) {
+    await organization.create(
+      { name, slug, logo },
+      {
+        onSuccess: () => {
+          toast.add({ title: 'Organisation erfolgreich erstellt', color: 'success' })
+          return Promise.resolve()
+        },
+        onError: (ctx) => {
+          toast.add({
+            title: 'Fehler bei der Erstellung der Organisation',
+            description: ctx.error.message,
+            color: 'error'
+          })
+          return Promise.reject()
+        }
+      }
+    )
+  }
+
+  async function deleteOrganization() {
+    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' })
+        }
+      }
+    )
+  }
+
+  return {
+    activeOrganization,
+    selectedOrgId,
+    createOrganization,
+    deleteOrganization
+  }
+}

legalconsenthub/pages/administration.vue

@@ -141,10 +141,8 @@ 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 { deleteOrganization: betterAuthDeleteOrganization, activeOrganization, selectedOrgId } = useBetterAuth()
 
 const selectItems = computed(() => organizations.value.map((org) => ({ label: org.name, value: org.id })))
 
@@ -201,18 +199,6 @@ async function deleteOrganization() {
 
   if (!confirmed) return
 
-  await authClient.organization.delete(
+  await betterAuthDeleteOrganization()
-    { 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>